Next.jsとNode.js：両者の関係
Next.jsとNode.jsの違い：フレームワークとランタイムを解説 | We.Inc
Node.jsはブラウザーの外でJavaScriptを実行し、Next.jsはその上で動くReactフレームワークです。スタックを層ごとに確認し、同じエンドポイントを両方で書き、どちらを使うべきかを解説します。
Node.jsはランタイム、つまりサーバーやノートPC上でJavaScriptを実行するプログラムです。Next.jsはWebサイトを作るためのReactフレームワークで、そのビルドツールとサーバーはNode.js上で動きます。そのため、どちらか一方を選ぶという話になることはまれです。Next.jsアプリには必ず下にNode.jsが必要ですが、Node.jsアプリにNext.jsは必須ではありません。
ランタイムとフレームワーク
- 何であるか
- JavaScriptランタイム
- Reactフレームワーク
- インストールの形
- マシン上のプログラム
- プロジェクト内のnpmパッケージ
- Webページを作れるか
- そのコードを自分で書けば
- はい、ルーティングとレンダリングが組み込み
- HTTPを扱えるか
- node:httpやExpressなどのライブラリで
- ページとRoute Handler
- もう一方に依存するか
- いいえ
- はい、Node.js 20.9以上
- 本番での起動
- next build, then next start
両者の関係を最も早く理解するには、リクエストが通過する層を見ることです。下の典型的なNext.jsアプリの各層をクリックすると、その役割と担当者がわかります。
- 上のブラウザーから下のオペレーティングシステムまで、層をクリックします。
- その層がNext.jsアプリで何をするかを読みます。
- 後半にある素のNode.jsサーバーとNext.jsのRoute Handlerの例を比べます。
- 表の判断用の行を参考に、プロジェクトに必要なものを選びます。
- Next.jsをインストールする前にnode --versionを確認しましょう。現在のドキュメントでは、最低要件はNode.js 20.9です。
- サーバーではNode.jsの長期サポート版を使い、ローカルと本番で同じメジャーバージョンに固定しましょう。
- Webページがなく、APIだけを提供するプロジェクトなら、Next.jsより素のNode.jsサーバーやバックエンドフレームワークのほうが軽量で適しています。
- Next.jsサイトの静的エクスポートでは、Node.jsが必要なのはビルド時だけです。出力はどのWebサーバーでもホストできる普通のファイルですが、サーバー専用の機能は使えなくなります。
よくある質問
Next.jsはバックエンドですか、フロントエンドですか？
一定の範囲で両方です。サーバーでReactページをレンダリングし、インタラクティブな部分をブラウザーに送り、JSONエンドポイント用のRoute Handlerも書けます。ただし、多数の別クライアント向けの本格的なバックエンドを想定したものではありません。
Next.jsの前にNode.jsを学ぶ必要がありますか？
Node.jsのインストールと、npmやターミナルの基本的な感覚は必要です。サーバーはNext.jsが処理してくれるため、node:httpモジュールの深い知識は不要です。
Next.jsにEdge Runtimeはまだありますか？
runtimeのルートオプションでは、現在'nodejs'がデフォルト、'edge'が非推奨とされています。ドキュメントではルートファイルからruntimeのエクスポートを削除するよう求めているため、新しいコードはNode.jsを前提にすべきです。
BunやDenoでNext.jsを動かせますか？
Next.jsのデプロイに関するドキュメントでは、Bunが検証済みのアダプターとして、Deno Deployが独自の統合を持つプラットフォームの1つとして挙げられています。Node.jsサーバー以外では対応機能が異なるため、各プラットフォームの注意事項を確認してください。
ExpressはNext.jsと同じ種類のものですか？
どちらもNode.js上のライブラリなので、Node.jsよりは近い存在です。Expressは最小限のHTTPサーバー用ツールキットで、Next.jsはReactを中心に作られた本格的なWebサイトフレームワークです。
Node.jsをひと言で
- Node.jsの公式サイトでは、スケーラブルなネットワークアプリケーションを構築するために設計された、非同期イベント駆動型のJavaScriptランタイムと説明されています。実際には、ブラウザーでは許可されない、ファイルの読み込み、ネットワークポートの開放、データベースとの通信をJavaScriptで行えるようにします。
Next.jsが上に加えるもの
- Next.jsは、Reactコンポーネントのフォルダーをサイトに変えます。ファイルベースのルーティング、サーバーレンダリング、データ取得、画像とフォントの処理、本番用サーバーを提供します。next startを実行すると、そのサーバーはNode.jsのプロセスになり、ドキュメントによればこのデプロイ方法はNext.jsのすべての機能に対応しています。
- 開発中のnext devも同様で、next buildもNode.js上で動いてページのコンパイルとプリレンダリングを行います。
プロジェクトに合わせて選ぶ
- ReactでWebサイトやWebアプリを作るなら、Next.jsを使い、Node.jsはセットアップの一部として受け入れましょう。コマンドラインツール、キューを処理するワーカー、純粋なAPIを作るなら、Node.jsで直接、またはバックエンドフレームワークで書き、Next.jsはまったく使わなくて構いません。
素のNode.jsサーバー
組み込みのnode:httpモジュールだけを使います。ポート、ヘッダー、ルーティングはすべて自分で決めます。node server.mjsで実行します。
Next.jsのRoute Handler
ファイルパスが/api/helloになり、サーバーはNext.jsが動かします。未知のパスには自動でフレームワークの404ページが返ります。
Next.jsプロジェクトでNode.jsが動く場所
package.jsonのscripts
どのスクリプトもNode.jsのプロセスを起動します。開発サーバー、本番ビルド、本番サーバーです。
ブラウザー
訪問者
Next.jsがサーバーでレンダリングしたHTMLを受け取り、ボタンやフォームが動くよう、Client Component用のJavaScriptだけを読み込みます。
アプリのコード
あなた
appフォルダー内のページ、レイアウト、Route Handlerです。ReactにNext.jsのいくつかの規約を加えたもので、JavaScriptかTypeScriptで書きます。
フレームワーク
フォルダーをURLに対応させ、Server Componentをレンダリングし、クライアント用コードをバンドルし、next startで起動する本番サーバーを動かします。
ランタイム
上のJavaScriptをすべてサーバー上で実行します。ビルド、開発サーバー、本番でのすべてのリクエストです。
オペレーティングシステム
ホスティング
macOS、Windows、Linux、またはコンテナです。Next.jsは開発環境として、macOS、WSLを含むWindows、Linuxをサポート対象に挙げています。
Next.jsアプリの層
層を選択
担当：{v}
上から{v}層中{n}層目
無料で始める · クレジットカード不要
関連: ガイド｜Webマーケティングと集客を学ぶ
製品
ご利用いただける方
機能
リソース
会社情報
サイトマップを見る