メインコンテンツまでスキップ

Custom Server

Next.jsはデフォルトでnext startとともに独自のサーバーを含んでいます。既存のバックエンドがある場合でも、Next.jsと一緒に使用できます(これはカスタムサーバーではありません)。カスタムNext.jsサーバーを使用すると、カスタムパターンのためにプログラムでサーバーを開始できます。ほとんどの場合、このアプローチは必要ありませんが、必要に応じて使用可能です。

Good to know:

  • カスタムサーバーを使用する前に、Next.jsの統合されたルーターがアプリの要件を満たせない場合にのみ使用することを覚えておいてください。カスタムサーバーは、**Automatic Static Optimization**のような重要なパフォーマンス最適化を削除します。
  • カスタムサーバーは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はNext.jsコンパイラやバンドルプロセスを通過しません。このファイルが必要とする構文とソースコードが、使用している現在のNode.jsバージョンと互換性があることを確認してください。例を参照

カスタムサーバーを実行するには、package.jsonscriptsを次のように更新する必要があります:

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で使用するのと同じオブジェクト。デフォルトは{}
devBooleanオプション)Next.jsを開発モードで起動するかどうか。デフォルトはfalse
dirStringオプション)Next.jsプロジェクトの場所。デフォルトは'.'
quietBooleanオプション)サーバー情報を含むエラーメッセージを非表示にするかどうか。デフォルトはfalse
hostnameStringオプション)サーバーが実行されているホスト名
portNumberオプション)サーバーが実行されているポート
httpServernode:http#Serverオプション)Next.jsが実行されているHTTPサーバー
turboBooleanオプション)Turbopackを有効にするかどうか

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