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

Next.jsはデフォルトでnext startコマンドを使用して独自のサーバーを起動します。既存のバックエンドがある場合でも、Next.jsと一緒に使用できます（これはカスタムサーバーではありません）。カスタムNext.jsサーバーを使用すると、カスタムパターン用にプログラムでサーバーを起動できます。ほとんどの場合、この方法は必要ありませんが、必要に応じて利用可能です。

知っておくと良いこと:

カスタムサーバーを使用する前に、Next.jsの統合ルーターがアプリの要件を満たせない場合にのみ使用するようにしてください。カスタムサーバーを使用すると、**自動静的最適化**のような重要なパフォーマンス最適化が無効になります。

スタンドアロン出力モードを使用する場合、カスタムサーバーファイルはトレースされません。代わりに、最小限のserver.jsファイルが別途出力されます。これらを一緒に使用することはできません。

カスタムサーバーのサンプル例をご覧ください:

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 http://localhost:${port} as ${
      dev ? 'development' : process.env.NODE_ENV
    }`
  )
})

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

カスタムサーバーを実行するには、package.jsonのscriptsを次のように更新します:

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`	`Object`	`next.config.js`で使用するのと同じオブジェクト。デフォルトは`{}`
`dev`	`Boolean`	（オプション）Next.jsを開発モードで起動するかどうか。デフォルトは`false`
`dir`	`String`	（オプション）Next.jsプロジェクトの場所。デフォルトは`'.'`
`quiet`	`Boolean`	（オプション）サーバー情報を含むエラーメッセージを非表示にする。デフォルトは`false`
`hostname`	`String`	（オプション）サーバーが実行されているホスト名
`port`	`Number`	（オプション）サーバーが実行されているポート番号
`httpServer`	`node:http#Server`	（オプション）Next.jsが実行されているHTTPサーバー
`turbo`	`Boolean`	（オプション）Turbopackを有効にする

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

ファイルシステムルーティングの無効化

デフォルトでは、Nextはpagesフォルダ内の各ファイルをファイル名に一致するパス名で提供します。カスタムサーバーを使用するプロジェクトでは、この動作により同じコンテンツが複数のパスから提供される可能性があり、SEOやUXに問題が生じる可能性があります。

この動作を無効にしてpages内のファイルに基づくルーティングを防止するには、next.config.jsを開き、useFileSystemPublicRoutes設定を無効にします:

next.config.js

module.exports = {
  useFileSystemPublicRoutes: false,
}

useFileSystemPublicRoutesはSSRからのファイル名ルートを無効にしますが、クライアントサイドルーティングではこれらのパスにアクセス可能な場合があります。このオプションを使用する場合は、プログラムで不要なルートへのナビゲーションを防ぐ必要があります。

また、クライアントサイドルーターを設定して、ファイル名ルートへのクライアントサイドリダイレクトを禁止することもできます。詳細はrouter.beforePopStateを参照してください。

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

ファイルシステムルーティングの無効化

On this page