カスタムサーバー

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

知っておくと良いこと:

カスタムサーバーの使用を決定する前に、Next.jsの統合ルーターがアプリケーションの要件を満たせない場合にのみ使用すべきであることを覚えておいてください。カスタムサーバーを使用すると、自動静的最適化のような重要なパフォーマンス最適化が失われます。

カスタムサーバーはVercelにデプロイすることはできません。

スタンドアロン出力モードを使用する場合、カスタムサーバーファイルはトレースされません。このモードでは代わりに、最小限の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 Compilerやバンドルプロセスを経由しません。このファイルが要求する構文とソースコードが、現在使用している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({})

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

オプション	タイプ	説明
`conf`	`オブジェクト`	`next.config.js`で使用するのと同じオブジェクトです。デフォルトは`{}`です。
`dev`	`ブール値`	（オプション）Next.jsを開発モードで起動するかどうか。デフォルトは`false`です。
`dir`	`文字列`	（オプション）Next.jsプロジェクトの場所。デフォルトは`'.'`です。
`quiet`	`ブール値`	（オプション）サーバー情報を含むエラーメッセージを非表示にします。デフォルトは`false`です。
`hostname`	`文字列`	（オプション）サーバーが稼働しているホスト名
`port`	`数値`	（オプション）サーバーが稼働しているポート
`httpServer`	`node:http#Server`	（オプション）Next.jsが稼働しているHTTPサーバー
`turbo`	`ブール値`	（オプション）Turbopackを有効にする

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

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

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

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

next.config.js

module.exports = {
  useFileSystemPublicRoutes: false,
}

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

クライアントサイドのルーターを構成して、ファイル名ルートへのクライアントサイドのリダイレクトを許可しないようにすることもできます。そのためには、router.beforePopStateを参照してください。