前置き
この記事を書きながら気づきましたが、素晴らしいアップデートが入り、最新版のNext.js 16以降ではTurbopackがデフォルトで使われます。つまり、普通に npm run dev するだけでOKなので、この記事、ほぼ意味ないっすね～笑
なお、この記事はWebpackが標準だったNext.js 15.5.14での話です。
💻 結論
結論、Next.js 15以前を使っていて、スペックの低いパソコンなら、次のコマンドを試してみてください。
npm run dev -- --turbo
Next.jsの開発コマンドは、一般的に次のコマンドだと思います。
npm run dev
しかし、1万4千円の私の中古ノートPCでは重すぎて、使い物になりませんでした。
そこで使ってみたのが、--turbo というオプションです。
これをつけるだけで、開発環境が驚くほど改善されます。
なぜ、通常の npm run dev は重いのか？
Next.js 15.5.14を使っていた私の環境では、開発時に使われるコンパイラの違いが大きく影響していました。
「コンパイラ」と呼びますが、WebpackやTurbopackは、厳密には複数のファイルをまとめる「バンドラー」と呼ぶみたいです。
従来から使われてきたWebpackはJavaScriptで作られています。プロジェクトの構成や規模によっては、開発サーバーの起動やコード変更後の反映に時間がかかることがあります。
特にページや依存関係が多いプロジェクトでは、スペックの低いPCで動作が重く感じられることがあります。
なぜ、npm run dev -- --turbo は速いのか？
TurbopackはRustで作られており、開発時の処理速度を重視して設計されたコンパイラです。
さらに、必要なコードを必要になったタイミングで処理する、オンデマンドな仕組みが採用されています。
そのため、私の環境では無駄な待ち時間が減り、低スペックなPCでもかなり快適に動かせるようになりました。
🛠️ Next.jsの4大コマンド
Next.jsには、基本的に次の4つのコマンドがあります。
npm run dev
開発中に、手元で画面を確認するためのコマンドです。
今回は、このコマンドについてのお話です。
npm run build
本番公開用にコードをしっかり最適化するコマンドです。
4つの中では、もっとも負荷の高いコマンドです。
npm run start
npm run build で生成されたファイルを使って、本番サーバーを立ち上げるコマンドです。
npm run lint
package.json にlint用のスクリプトが設定されている場合に、コードの問題を自動でチェックするコマンドです。
なお、Next.js 16では next lint が廃止されているため、ESLintやBiomeなどを直接実行する設定が必要です。
📊 4つの開発コマンドを徹底比較
開発時によく見る次の4つのコマンドについて、何が違い、どれを選ぶべきなのかを比較します。
| コマンド | コンパイラ | 特徴と低スペックPCでの体感 |
|---|---|---|
next dev |
15以前：Webpack 16以降：Turbopack |
Next.jsを直接起動する。16以降は何もつけなくてもTurbopackになる |
npm run dev |
package.jsonの設定による |
npm経由でdevスクリプトを実行する。中身がnext devなら、15以前はWebpack、16以降はTurbopackになる |
next dev --turbo |
Turbopack（Rust製） | Next.jsを直接Turbopackで起動する。16以降ではTurbopackが標準なので、指定する必要はない |
npm run dev -- --turbo |
Turbopack（Rust製） | npm経由でTurbopackを明示的に有効にする。15.5.14の私のPCではもっとも快適だったが、16以降では基本的に不要 |
大きく分けると、次の2つの違いを組み合わせたものです。
- 「
npm run devかnext devか」という実行ルートの違い - 「Webpackか、
--turboをつけたTurbopackか」というコンパイラの違い
❓ ①「npm」と「next dev」の違いってなに？
まずは、npm run dev と next dev の違いについてです。
next dev は「直接命令」
パソコンに対して、「Next.jsを直接起動して！」と呼び出す方法です。
ただし、パソコンの環境やパスなどの設定によっては、次のようなエラーになってしまうことがあります。
そんなコマンドは知らない
npm run dev は「ショートカット経由」
プロジェクトにある package.json というファイルを見ると、あらかじめ次のような設定が書かれています。
{
"scripts": {
"dev": "next dev"
}
}
このように設定されている場合、npm run dev と入力すると、npmが次のように仲介してくれます。
代わりに、プロジェクト内の
next devを実行するね
そのため、グローバル環境に next コマンドがなくても、プロジェクトにインストールされたNext.jsを実行できるのがメリットです。
なぜ -- が2回あるのか？
Next.js 15以前で、安全なnpmルートを使いつつターボモードにしたいときに入力するのが、次のコマンドです。
npm run dev -- --turbo
なぜハイフンが2回続くのかというと、真ん中の -- がオプションを渡すための区切りになるからです。
イメージとしては、npmに次のようにお願いしています。
npmさん、
devを動かして。あ、その先で動くNext.jsに、--turboというオプションをそのまま引き渡しておいて！
⚙️ 毎回入力するのが面倒なときの対策
Next.js 15以前で毎回 -- --turbo と入力するのが大変なら、package.json の中身を直接書き換えてしまうのがおすすめです。
{
"scripts": {
"dev": "next dev --turbo"
}
}
こうしておけば、次からは長いコマンドを入力する必要はありません。
いつもの短いコマンドを実行するだけで、自動的にターボモードが起動します。
npm run dev
自分が使っているNext.jsのバージョンは、プロジェクトのフォルダで次のコマンドを実行すると確認できます。
npx next --version
✍️ まとめ
Next.js 15.5.14を使っていた私の環境では、Turbopackに切り替えることで、1万4千円の中古PCでもNext.jsの開発がかなり快適になりました。
Next.js 15以前なら --turbo を試し、Next.js 16以降なら、まず通常の npm run dev がTurbopackで動いていることを確認してみてください！