NestJS と Next.js：役割は違い、同じプロジェクトでも併用
NestJS と Next.js：バックエンドか React フレームワークか | We.Inc
NestJS は Node.js のサーバーAPIを作り、Next.js はサーバーコードも少し書ける React のWebサイトを作ります。同じエンドポイントを両方で書いた例、連携の仕方、それぞれが必要な場面を紹介します。
NestJS と Next.js はライバルではありません。NestJS はサーバーサイドの Node.js アプリケーションのためのフレームワークで、API向けにコントローラー、モジュール、依存性注入を提供します。Next.js はWebページを作るための React フレームワークで、軽いバックエンド処理には Route Handlers を使います。小さなアプリなら Next.js だけで完結でき、大きなシステムでは Next.js のフロントエンドの背後に NestJS のAPIを置くことがよくあります。
それぞれのフレームワークの用途
- 主な役割
- サーバーサイドのアプリケーションとAPI
- React のWebサイトとWebアプリ
- ページを描画する？
- いいえ、データを返す
- はい、Server Components と Client Components
- 言語
- TypeScript で作られている（JavaScript も可）
- JavaScript または TypeScript
- HTTP層
- デフォルトは Express、Fastify も選択可
- next start による独自のサーバー
- エンドポイントの書き方
- @Get メソッドを持つ @Controller クラス
- GET、POST などを export する route.ts
- プロジェクトの開始
- nest new project-name
- npx create-next-app@latest
下は1つのエンドポイント、GET /cats で猫の一覧を返す処理を、NestJS のコントローラーと Next.js の Route Handler で書いたものです。例を切り替えると、POSTのルートや、Next.js のページから NestJS のAPIを呼び出すための設定も見られます。
- 例を選びます：GETの一覧、POSTの作成、または2つのアプリの連携です。
- 左側の NestJS のコードと右側の Next.js のコードを読みます。
- メモで、それぞれのフレームワークが最初から何を提供してくれるかを確認します。
- 自分のプロジェクトに合う版をコピーします。
- どちらの開発サーバーもデフォルトはポート 3000 です。並べて動かすときは、NestJS を 3001 など別のポートで起動しましょう。
- ブラウザーが NestJS のAPIを直接呼び出すなら、NestJS でサイトのオリジンに対してCORSを有効にしましょう。Next.js のサーバーコードからだけ呼び出すなら、CORSは関係ありません。
- Server Components や Route Handlers からだけ呼び出す場合は、APIのアドレスをサーバー専用の環境変数に保存しましょう。
- リクエストとレスポンスの型は、両方のアプリが import する小さなパッケージで共有しましょう。フィールド名を変えたときに、本番ではなくビルドで壊れるようになります。
よくある質問
Next.js は NestJS の代わりになりますか？
小さなアプリなら、多くの場合なります。Route Handlers は Web の Request と Response の API で GET、POST、PUT、PATCH、DELETE、HEAD、OPTIONS に対応しています。NestJS が真価を発揮するのはバックエンドが大きくなったときです。多数のモジュール、バックグラウンドジョブ、モバイルアプリなど複数のクライアントがあり、チームが構造の強制を望む場合です。
NestJS で React のページを描画できますか？
そのためには作られていません。NestJS はデータを返し、オブジェクトはデフォルトでJSONにシリアライズされます。ページには Next.js か、別のフロントエンドフレームワークを使いましょう。
NestJS には TypeScript が必要ですか？
NestJS は TypeScript で作られていて完全に対応していますが、ドキュメントによるとプレーンな JavaScript でも書けます。ほぼすべての例とガイドが TypeScript を使っているので、使うことになると考えておきましょう。
2つは1つのリポジトリに置くべきですか？
2つのアプリと共有の型パッケージを持つモノレポは、1つのチームならうまく機能します。それぞれのリリーススケジュールを持つ別々のチームには、別のリポジトリが向いています。
どちらを先に学ぶべきですか？
Webサイトを公開したいなら Next.js から始めましょう。複数のフロントエンドやサービスが依存するAPIを作るときに NestJS を学びましょう。
NestJS がバックエンドにもたらすもの
- NestJS は、効率的でスケーラブルな Node.js のサーバーサイドアプリケーションを作るためのフレームワークだと自らを説明しています。コードをモジュール、コントローラー、プロバイダーに整理し、依存性注入で結び付けるので、多くの開発者が関わる大きなAPIでも一貫性を保てます。
- 内部ではデフォルトで Express の上で動きます。@nestjs/platform-fastify アダプターに差し替えると、コントローラーを書き直さずにHTTP層を変えられますが、その場合 Express 専用のミドルウェアには Fastify の代わりが必要です。
Next.js がWebサイトにもたらすもの
- Next.js はサーバーで React を描画し、フォルダー名とファイル名でルーティングし、インタラクティブな部分だけをブラウザーに送ります。Route Handlers は、同じサイトに属するフォーム送信、Webhook、小さなJSONエンドポイントには十分です。
- 一方で、他のクライアント向けの構造化されたバックエンドを目指してはいません。モジュールシステムも依存性注入もないので、ルートファイルだけで作った大きなAPIは崩れていきがちです。
両者の組み合わせ方
- よくある分担は、すべてのページを Next.js が、ビジネスロジックとデータを NestJS が受け持つ形です。Next.js の Server Components はサーバー上で NestJS のAPIからデータを取得するので、秘密情報や内部URLがブラウザーに届くことはなく、Client Components は必要なときだけAPIを呼び出します。
両方のプロジェクトを作る
NestJS のAPIと Next.js のサイトの雛形を作る
Nest のコマンドラインツールをインストールしてAPIを作り、隣のフォルダーにサイトを作ります。
GET /cats
NestJS では @Controller('cats') の接頭辞と @Get() がパスを組み立て、コントローラーはモジュールに登録されます。Next.js ではフォルダーのパスがURLになり、export した関数名がメソッドになります。
POST /cats
NestJS は @Body() でJSONの本文を自動で解析し、POSTにはデフォルトでステータス 201 を返します。Next.js の Route Handler は request.json() で本文を読み、ステータスも自分で設定します。
両方を使う
NestJS をポート 3001 に移し、サイトのオリジンを許可します。Next.js のページは Server Component なので、fetch はサーバーで実行され、API_URL は公開されません。
例を選択
NestJS
NestJS版をコピー
例 {n} / {v}
無料で始める · クレジットカード不要
関連: ガイド｜Webマーケティングと集客を学ぶ
製品
ご利用いただける方
機能
リソース
会社情報
サイトマップを見る