Next.jsでカスタムサーバーを設定する方法
Next.jsはデフォルトでnext start
コマンドを使用した独自のサーバーを含んでいます。既存のバックエンドがある場合でも、Next.jsと一緒に使用できます(これはカスタムサーバーではありません)。カスタムNext.jsサーバーを使用すると、カスタムパターン用にプログラムでサーバーを起動できます。ほとんどの場合、このアプローチは必要ありませんが、必要に応じて利用できます。
補足:
- カスタムサーバーを使用する前に、Next.jsの統合ルーターがアプリの要件を満たせない場合にのみ使用すべきであることを覚えておいてください。カスタムサーバーを使用すると、自動静的最適化 などの重要なパフォーマンス最適化が無効になります。
- スタンドアロン出力モードを使用する場合、カスタムサーバーファイルはトレースされません。このモードでは、代わりに別の最小限の
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
を次のように更新する必要があります:
{
"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にリクエストを処理させることができます。
ファイルシステムルーティングの無効化
デフォルトでは、Next
はpages
フォルダ内の各ファイルをファイル名に一致するパス名で提供します。プロジェクトでカスタムサーバーを使用している場合、この動作により同じコンテンツが複数のパスから提供される可能性があり、SEOやUXの問題が発生する可能性があります。
この動作を無効にし、pages
内のファイルに基づくルーティングを防ぐには、next.config.js
を開き、useFileSystemPublicRoutes
設定を無効にします:
module.exports = {
useFileSystemPublicRoutes: false,
}
useFileSystemPublicRoutes
はSSRからのファイル名ルートを無効にすることに注意してください。クライアントサイドのルーティングはそれらのパスにアクセスする可能性があります。このオプションを使用する場合は、プログラムで不要なルートへのナビゲーションを防ぐ必要があります。
クライアントサイドのルーターがファイル名ルートへのクライアントサイドのリダイレクトを禁止するように設定することもできます。その場合は
router.beforePopState
を参照してください。