Next.jsでカスタムサーバーを設定する方法
Next.jsはデフォルトでnext start
コマンドを使用した独自のサーバーを含んでいます。既存のバックエンドがある場合でも、Next.jsと一緒に使用できます(これはカスタムサーバーではありません)。カスタムNext.jsサーバーを使用すると、カスタムパターン用にプログラムでサーバーを起動できます。ほとんどの場合、このアプローチは必要ありませんが、必要に応じて利用できます。
補足:
- カスタムサーバーを使用する前に、Next.jsの統合ルーターがアプリの要件を満たせない場合にのみ使用すべきであることを覚えておいてください。カスタムサーバーを使用すると、自動静的最適化 などの重要なパフォーマンス最適化が無効になります。
- スタンドアロン出力モードを使用する場合、カスタムサーバーファイルはトレースされません。このモードでは、代わりに別の最小限の
server.js
ファイルが出力されます。これらを一緒に使用することはできません。
カスタムサーバーの次の例を見てみましょう:
server.ts
TypeScript
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
をセットアップすることもできます(例)。カスタムサーバーは次のimportを使用して、サーバーをNext.jsアプリケーションと接続します:
import next from 'next'
const app = next({})
上記のnext
importは、以下のオプションを含むオブジェクトを受け取る関数です:
オプション | 型 | 説明 |
---|---|---|
conf | Object | next.config.js で使用するのと同じオブジェクト。デフォルトは{} |
dev | Boolean | (任意)Next.jsを開発モードで起動するかどうか。デフォルトはfalse |
dir | String | (任意)Next.jsプロジェクトの場所。デフォルトは'.' |
quiet | Boolean | (任意)サーバー情報を含むエラーメッセージを非表示にする。デフォルトはfalse |
hostname | String | (任意)サーバーが動作しているホスト名 |
port | Number | (任意)サーバーが動作しているポート |
httpServer | node:http#Server | (任意)Next.jsが動作しているHTTPサーバー |
turbo | Boolean | (任意)Turbopackを有効にする |
返されたapp
を使用して、必要に応じてNext.jsにリクエストを処理させることができます。