コンテンツにスキップ

カスタムサーバー

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://127.0.0.1:${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オブジェクト`next.config.js`で使用するのと同じオブジェクト。デフォルトは`{}`です
customServerブール値(*オプション*)サーバーがNext.jsによって作成された場合はfalseに設定します
devブール値ブール値
(_オプション_)Next.jsを開発モードで起動するかどうか。デフォルトは `false` です。dir文字列
(_オプション_)Next.jsプロジェクトの場所。デフォルトは `'.'` です。ブール値quiet
ブール値dir(*オプション*) サーバー情報を含むエラーメッセージを非表示にします。デフォルトは `false` です。
hostname文字列(*オプション*) サーバーが実行されているホスト名
port数値(*オプション*) サーバーが実行されているポート
turboブール値httpServer

node:http#Server

(*オプション*) Next.js が実行されている HTTP サーバー

turbo

ブール値

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

useFileSystemPublicRoutes を有効にすると、SSR からのファイル名ルーティングが無効になります。クライアントサイドルーティングでは、引き続きこれらのパスにアクセスできます。このオプションを使用する場合は、プログラムでアクセスさせたくないルートへのナビゲーションを防止する必要があります。

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