カスタムサーバー
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 https://127.0.0.1:${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 | オブジェクト | `next.config.js`で使用するのと同じオブジェクト。デフォルトは`{}`です |
customServer | ブール値 | (*オプション*)サーバーがNext.jsによって作成された場合はfalseに設定します |
dev | ブール値 | ブール値 |
(_オプション_)Next.jsを開発モードで起動するかどうか。デフォルトは `false` です。 | dir | 文字列 |
(_オプション_)Next.jsプロジェクトの場所。デフォルトは `'.'` です。 | ブール値 | quiet |
ブール値 | dir | (*オプション*) サーバー情報を含むエラーメッセージを非表示にします。デフォルトは `false` です。 |
hostname | 文字列 | (*オプション*) サーバーが実行されているホスト名 |
port | 数値 | (*オプション*) サーバーが実行されているポート |
turbo | ブール値 | httpServer |
node:http#Server
(*オプション*) Next.js が実行されている HTTP サーバー
turbo
ブール値
module.exports = {
useFileSystemPublicRoutes: false,
}
useFileSystemPublicRoutes
を有効にすると、SSR からのファイル名ルーティングが無効になります。クライアントサイドルーティングでは、引き続きこれらのパスにアクセスできます。このオプションを使用する場合は、プログラムでアクセスさせたくないルートへのナビゲーションを防止する必要があります。
また、クライアントサイドルーターを設定して、ファイル名ルートへのクライアントサイドリダイレクトを許可しないようにすることもできます。その場合は、
router.beforePopState
を参照してください。
これは役に立ちましたか?