🚀

【Next.js和訳】Advanced Features/Custom Server

4 min read

この記事について

株式会社 UnReact はプロジェクトの一環としてNext.js ドキュメントの和訳を行っています。

この記事は、Advanced Features/Custom Serverの記事を和訳したものです。

記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。

Custom Server

Examples

デフォルトでは、Next.js はnext startに独自のサーバーを搭載しています。既存のバックエンドがある場合でも、Next.js でそれを使用することができます(これはカスタムサーバーではありません)。Next.js のカスタムサーバーでは、100%プログラムでサーバーを起動し、カスタムのサーバーパターンを使用することができます。ほとんどの場合、この機能は必要ありませんが、完全なカスタマイズのために用意されています。

備考
Vercelにカスタムサーバーを導入することはできません

カスタムサーバーの使用を決定する前に、Next.js の統合されたルーターではアプリの要件を満たせない場合にのみ使用することを念頭に置いてください。カスタムサーバーを使用すると、サーバーレス関数自動静的最適化などの重要なパフォーマンス最適化機能が削除されます。

次のカスタムサーバーの例を見てみましょう。

server.js
const { createServer } = require('http')
const { parse } = require('url')
const next = require('next')
const dev = process.env.NODE_ENV !== 'production'
const app = next({ dev })
const handle = app.getRequestHandler()
app.prepare().then(() => {
  createServer((req, res) => {
    // また、`url.parse`の第二引数には必ず`true`を渡してください。
    // これは、URLのクエリ部分を解析するように指示しています。
    const parsedUrl = parse(req.url, true)
    const { pathname, query } = parsedUrl
    if (pathname === '/a') {
      app.render(req, res, '/a', query)
    } else if (pathname === '/b') {
      app.render(req, res, '/b', query)
    } else {
      handle(req, res, parsedUrl)
    }
  }).listen(3000, (err) => {
    if (err) throw err
    console.log('> Ready on http://localhost:3000')
  })
})

server.jsは babel や webpack を経由しません。このファイルが必要とする構文やソースが、現在実行している node のバージョンと互換性があることを確認してください。

そして、カスタムサーバーを動かすためには、package.jsonscriptsを以下のように更新する必要があります。

"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 import は、以下のオプションを持つオブジェクトを受け取る関数です。

  • dev: Boolean - Next.js を dev モードで起動するかどうかを指定します。デフォルトはfalseです。
  • dir: String - Next.js のプロジェクトの場所。デフォルトは '.' です。
  • quiet: Boolean - サーバー情報を含むエラーメッセージを非表示にします。デフォルトは false です。
  • conf: object - next.config.jsで使用するのと同じオブジェクトです。デフォルトは {} です。

返されたappを使って、Next.js に必要なリクエストを処理させることができます。

ファイルシステムのルーティングを無効にする

デフォルトでは、Nextpagesフォルダ内の各ファイルを、ファイル名と一致するパス名で提供します。プロジェクトでカスタムサーバーを使用している場合、この動作によって同じコンテンツが複数のパスから提供されることになり、SEO や UX に問題が生じる可能性があります。

この動作を無効にして、page内のファイルに基づくルーティングを行わないようにするには、next.config.jsを開き、useFileSystemPublicRoutesの設定を無効にします。

module.exports = {
  useFileSystemPublicRoutes: false,
}

useFileSystemPublicRoutesは、SSR からのファイル名ルートを無効にすることに注意してください。クライアントサイドのルーティングは、これらのパスにアクセスすることができます。このオプションを使用する際には、プログラム的に必要のないルートへの移動を防ぐ必要があります。

また、クライアント側のルーターを設定して、クライアント側からのファイル名ルートへのリダイレクトを禁止することもできます。これについては、router.beforePopStateを参照してください。

Discussion

ログインするとコメントできます