カスタムサーバー
Next.jsにはデフォルトでnext start
が付属しています。既存のバックエンドがある場合でも、Next.jsと一緒に使用できます(これはカスタムサーバーではありません)。カスタムNext.jsサーバーは、カスタムパターン用にプログラムでサーバーを開始することを可能にします。ほとんどの場合、このアプローチが必要になることはありません。ただし、必要に応じて使用可能です。
Good to know:
- カスタムサーバーを使用することを決める前に、Next.jsの統合されたrouterがアプリの要件を満たせない場合にのみ使用されるべきであることを忘れないでください。カスタムサーバーは、Automatic Static Optimization のような重要なパフォーマンス最適化を削除します。
- カスタムサーバーは、Vercel にデプロイすることができません。
- スタンドアロンの出力モードを使用すると、カスタムサーバーファイルがトレースされません。このモードは、代わりに最小限の
server.js
ファイルを別々に出力します。これらは一緒に使用することができません。
カスタムサーバーの以下の例をご覧ください:
- TypeScript
- JavaScript
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
インポートは、次のオプションを含むオブジェクトを受け取る関数です:
Option | Type | Description |
---|---|---|
conf | Object | next.config.js で使用するのと同じオブジェクト。デフォルトは{} |
customServer | Boolean | (オプション)サーバーがNext.jsによって作成された場合にfalseに設定 |
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が必要に応じてリクエストを処理することができます。