Custom Server
Next.jsはデフォルトでnext start
とともに独自のサーバーを含んでいます。既存のバックエンドがある場合でも、Next.jsと一緒に使用できます(これはカスタムサーバーではありません)。カスタムNext.jsサーバーを使用すると、カスタムパターンのためにプログラムでサーバーを開始できます。ほとんどの場合、このアプローチは必要ありませんが、必要に応じて使用可能です。
Good to know:
- カスタムサーバーを使用する前に、Next.jsの統合されたルーターがアプリの要件を満たせない場合にのみ使用することを覚えておいてください。カスタムサーバーは、**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
インポートは、次のオプションを持つオブジェクトを受け取る関数です:
オプション | 型 | 説明 |
---|---|---|
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がリクエストを処理できるように使用できます。