コンテンツにスキップ
App RouterGuidesCustom Server

Next.js でカスタムサーバーをセットアップする方法

Next.js にはデフォルトで next start を使用する独自のサーバーが含まれています。既存のバックエンドがある場合でも、Next.js でそれを使用できます(これはカスタムサーバーではありません)。カスタム Next.js サーバーを使用すると、カスタムパターン用のサーバーをプログラムで起動できます。ほとんどの場合、このアプローチは必要ありません。ただし、必要に応じて利用できます。

知っておくと良いこと:

  • カスタムサーバーの使用を決定する前に、Next.js の統合ルーターがアプリの要件を満たせない場合にのみ使用すべきであることを覚えておいてください。カスタムサーバーは、Automatic Static Optimization のような重要なパフォーマンス最適化を削除します。
  • スタンドアロン出力モードを使用する場合、カスタムサーバーファイルはトレースされません。代わりに、このモードでは個別の最小限の server.js ファイルが出力されます。これらを一緒に使用することはできません。

カスタムサーバーの次の例をご覧ください

server.ts
import { createServer } from 'http'
import { parse } from 'url'
import next from 'next'
 
const port = parseInt(process.env.PORT || '3000', 10)
const dev = process.env.NODE_ENV !== 'production'
const app = next({ dev })
const handle = app.getRequestHandler()
 
app.prepare().then(() => {
  createServer((req, res) => {
    const parsedUrl = parse(req.url!, true)
    handle(req, res, parsedUrl)
  }).listen(port)
 
  console.log(
    `> Server listening at https://:${port} as ${
      dev ? 'development' : process.env.NODE_ENV
    }`
  )
})

server.js は Next.js コンパイラやバンドルプロセスを経由しません。このファイルが必要とする構文とソースコードが、使用している現在の Node.js バージョンと互換性があることを確認してください。例を表示

カスタムサーバーを実行するには、package.jsonscripts を以下のように更新する必要があります。

package.json
{
  "scripts": {
    "dev": "node server.js",
    "build": "next build",
    "start": "NODE_ENV=production node server.js"
  }
}

または、nodemon () をセットアップすることもできます。カスタムサーバーは、サーバーと Next.js アプリケーションを接続するために次のインポートを使用します。

import next from 'next'
 
const app = next({})

上記の next インポートは、次のオプションを持つオブジェクトを受け取る関数です。

オプションタイプ説明
confオブジェクトnext.config.js で使用するのと同じオブジェクト。デフォルトは {} です。
devブーリアン(オプション) Next.js を開発モードで起動するかどうか。デフォルトは false です。
dir文字列(オプション) Next.js プロジェクトの場所。デフォルトは '.' です。
quietブーリアン(オプション) サーバー情報を含むエラーメッセージを非表示にする。デフォルトは false です。
hostname文字列(オプション) サーバーが実行されているホスト名。
portNumber(オプション) サーバーが実行されているポート。
httpServernode:http#Server(オプション) Next.js が実行されている HTTP サーバー。
turbopackブーリアン(オプション) Turbopack を有効にする(デフォルトで有効)。
webpackブーリアン(オプション) webpack を有効にする。

返された app は、要求に応じて Next.js でリクエストを処理するために使用できます。