Menu

カスタムサーバー

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 http://localhost:${port} as ${
      dev ? 'development' : process.env.NODE_ENV
    }`
  )
})
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 インポートは、以下のオプションを持つオブジェクトを受け取る関数です：

オプション型説明
confObjectnext.config.jsで使用するものと同じオブジェクト。デフォルトは {}
customServerBoolean（オプション）サーバーがNext.jsによって作成されたかどうかを設定。
devBoolean（オプション）Next.jsを開発モードで起動するかどうか。デフォルトは false
dirString（オプション）Next.jsプロジェクトの場所。デフォルトは '.'
quietBoolean（オプション）サーバー情報を含むエラーメッセージを非表示にする。デフォルトは false
hostnameString（オプション）サーバーが稼働しているホスト名
portNumber（オプション）サーバーが稼働しているポート
httpServernode:http#Server（オプション）Next.jsが稼働しているHTTPサーバー
turboBoolean（オプション）Turbopackを有効にする

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

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

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

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

next.config.js
module.exports = {
  useFileSystemPublicRoutes: false,
}

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

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