カスタムサーバー
デフォルトでは、Next.jsにはnext start
で起動する独自のサーバーが含まれています。既存のバックエンドがある場合でも、Next.jsと一緒に使用できます(これはカスタムサーバーではありません)。カスタムNext.jsサーバーを使用すると、カスタムサーバーパターンを利用するためにプログラムで100%サーバーを起動できます。ほとんどの場合、これは必要ありませんが、完全なカスタマイズのために利用可能です。
知っておくと良いこと:
以下のカスタムサーバーの例を見てみましょう:
const { createServer } = require('http')
const { parse } = require('url')
const next = require('next')
const dev = process.env.NODE_ENV !== 'production'
const hostname = 'localhost'
const port = 3000
// ミドルウェア使用時は`hostname`と`port`を以下に指定する必要があります
const app = next({ dev, hostname, port })
const handle = app.getRequestHandler()
app.prepare().then(() => {
createServer(async (req, res) => {
try {
// `url.parse`の第2引数に`true`を渡すことを忘れないでください。
// これによりURLのクエリ部分が解析されます。
const parsedUrl = parse(req.url, true)
const { pathname, query } = parsedUrl
if (pathname === '/a') {
await app.render(req, res, '/a', query)
} else if (pathname === '/b') {
await app.render(req, res, '/b', query)
} else {
await handle(req, res, parsedUrl)
}
} catch (err) {
console.error('リクエスト処理中にエラーが発生しました', req.url, err)
res.statusCode = 500
res.end('内部サーバーエラー')
}
})
.once('error', (err) => {
console.error(err)
process.exit(1)
})
.listen(port, () => {
console.log(`> http://${hostname}:${port} で準備完了`)
})
})
server.js
はbabelやwebpackを通りません。このファイルで使用する構文とソースが、実行中のNode.jsバージョンと互換性があることを確認してください。
カスタムサーバーを実行するには、package.json
のscripts
を次のように更新します:
{
"scripts": {
"dev": "node server.js",
"build": "next build",
"start": "NODE_ENV=production node server.js"
}
}
カスタムサーバーは、Next.jsアプリケーションとサーバーを接続するために以下のインポートを使用します:
const next = require('next')
const app = next({})
上記のnext
インポートは、以下のオプションを持つオブジェクトを受け取る関数です:
オプション | タイプ | 説明 |
---|---|---|
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サーバー |
返されたapp
は、必要に応じてNext.jsにリクエストを処理させるために使用できます。
ファイルシステムルーティングの無効化
デフォルトでは、Next
はpages
フォルダ内の各ファイルをファイル名に一致するパス名で提供します。カスタムサーバーを使用している場合、この動作により複数のパスから同じコンテンツが提供される可能性があり、SEOやUXに問題が生じる可能性があります。
この動作を無効にし、pages
内のファイルに基づくルーティングを防ぐには、next.config.js
を開き、useFileSystemPublicRoutes
設定を無効にします:
module.exports = {
useFileSystemPublicRoutes: false,
}
useFileSystemPublicRoutes
はSSRからのファイル名ルートを無効にしますが、クライアントサイドルーティングではこれらのパスにアクセスできる場合があります。このオプションを使用する場合は、プログラム的に不要なルートへのナビゲーションを防ぐ必要があります。
また、クライアントサイドルーターを設定して、ファイル名ルートへのクライアントサイドリダイレクトを禁止することもできます。詳細は
router.beforePopState
を参照してください。