カスタムサーバー
Next.jsはデフォルトで next start
で独自のサーバーを備えています。既存のバックエンドがある場合でも、Next.jsと一緒に使用できます(これはカスタムサーバーではありません)。カスタムNext.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
を設定することもできます(例)。カスタムサーバーは、次のインポートを使用してサーバーを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がリクエストを処理できます。
ファイルシステムルーティングの無効化
デフォルトでは、Next
は pages
フォルダ内の各ファイルをファイル名に一致するパス名の下で提供します。カスタムサーバーを使用するプロジェクトでは、この動作により同じコンテンツが複数のパスから提供され、SEOやUXに問題が生じる可能性があります。
この動作を無効にし、pages
内のファイルに基づくルーティングを防ぐには、next.config.js
を開き、useFileSystemPublicRoutes
の設定を無効にします:
module.exports = {
useFileSystemPublicRoutes: false,
}
useFileSystemPublicRoutes
はSSRからのファイル名ルートを無効にします。クライアント側のルーティングは依然としてそれらのパスにアクセスできます。このオプションを使用する場合、プログラム的に望まないルートへのナビゲーションを防ぐ必要があります。
クライアント側のルーターでファイル名ルートへのクライアント側リダイレクトを禁止することもできます。詳細は
router.beforePopState
を参照してください。