Next.jsでカスタムサーバーを設定する方法

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

補足:

• カスタムサーバーの使用を決定する前に、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を以下のように更新する必要があります。

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

または、nodemonをセットアップできます（例）。カスタムサーバーは以下のimportを使用して、サーバーをNext.jsアプリケーションに接続します。

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

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

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

ファイルシステムルーティングを無効にする

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

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

module.exports = {
  useFileSystemPublicRoutes: false,
}

useFileSystemPublicRoutesはSSRからのファイル名ルートを無効にします。クライアント側ルーティングは依然としてこれらのパスにアクセスできる場合があります。このオプションを使用する場合は、プログラムから望まないルートへのナビゲーションをガードする必要があります。

クライアント側ルーターがファイル名ルートへのクライアント側リダイレクトを許可しないように設定することもできます。その場合はrouter.beforePopStateを参照してください。