︙

Custom Server

Examples

default で、Next.js はnext startと共に独自の server を含んでいます。既存のバックエンドがある場合でも、Next.js(これはカスタム server ではありません)と共にそれを使用することができます。カスタム Next.jsserver を使うと、カスタム server パターンを使用するために server を 100％プログラムで開始することができます。ほとんどの場合、これは必要ないでしょう - ただし、完全なカスタマイズのために利用可能です。

Good to know:

カスタム server を使用する前に、統合 router の Next.js があなたの app 要件を満たせない場合にのみ使用すべきであることを覚えておいてください。カスタム server は、serverless functions や Automatic Static Optimization のような重要なパフォーマンス最適化を削除します。

カスタムの server はVercel 上にデプロイできません。

次のカスタムの server の例を見てみてください：

server.js

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
// when using middleware `hostname` and `port` must be provided below
const app = next({ dev, hostname, port })
const handle = app.getRequestHandler()

app.prepare().then(() => {
  createServer(async (req, res) => {
    try {
      // Be sure to pass `true` as the second argument to `url.parse`.
      // This tells it to parse the query portion of the 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('Error occurred handling', req.url, err)
      res.statusCode = 500
      res.end('internal server error')
    }
  })
    .once('error', (err) => {
      console.error(err)
      process.exit(1)
    })
    .listen(port, () => {
      console.log(`> Ready on http://${hostname}:${port}`)
    })
})

server.jsは babel や webpack を経由しません。このファイルが必要とする syntax やソースが、実行中の nodeversion と互換性があることを確認してください。

カスタムの server を実行するには、package.jsonのscriptsを以下のように更新する必要があります。

package.json

{
  "scripts": {
    "dev": "node server.js",
    "build": "next build",
    "start": "NODE_ENV=production node server.js"
  }
}

カスタムの server は、以下の import を使用して server を Next.js アプリケーションに接続します:

const next = require("next");
const app = next({});

上記の next import は、以下の options を持つ object を受け取る機能です：

オプション	Type	Description
`Object`	object	next.`conf`ig.jsで使用するのと同じ object。default は`{}`です
`customServer`	`Boolean`	(オプショナル) server が Next.js によって作成されたときは false に設定します
`dev`	`Boolean`	(オプション) Next.js を dev モードで起動するかどうか。default は`false`
`dir`	`String`	(オプション) Next.js プロジェクトの場所。default は `'.'`
`quiet`	`Boolean`	(任意) error メッセージに含まれる server 情報を非表示にします。default は`false`です。
`hostname`	`String`	(オプション)' server 'が動作している' hostname '
`port`	`Number`	(任意) server が動作している port
`httpServer`	`node:http#Server`	(オプション) Next.js が動作している HTTP Server

返された app は、必要に応じて Next.js にリクエストを処理させるために使用できます。

Disabling file-system routing

default で、Nextはpagesフォルダ内の各ファイルをファイル名に一致する pathname の下で提供します。プロジェクトがカスタム server を使用している場合、この動作は同じコンテンツが複数の paths から提供される可能性があり、 SEO や UX に問題をもたらす可能性があります。

この動作を無効にし、pages内のファイルに基づいたルーティングを防ぐには、next.config.jsを開き、useFileSystemPublicRoutes config を無効にします：

next.config.js

module.exports = {
  useFileSystemPublicRoutes: false,
}

useFileSystemPublicRoutesが SSR からのファイル名 routes を無効化することに注意してください。クライアントサイドのルーティングはまだそれらの paths にアクセスすることができます。このオプションを使用する場合、プログラムにより routes に移動しないように警戒する必要があります。

また、クライアント側の router を設定して、クライアント側の redirects をファイル名のルートに対して禁止することもできます。その方法については、router.beforePopStateを参照してください。