Next.js（動的サイト）をNetlifyにデプロイする

Next.jsアプリをNetlifyにデプロイしようとしたら、結構手こずった。

Reactアプリをデプロイする時にも、react-router-domを使っているなら_redirectsを設定する必要があるみたいなお約束があったので、このあたりは苦戦するだろうなと予想はついていた。

案の定、静的ページは表示されるけど、動的ページは「404」を突きつけられることになった。

デプロイ時に加える必要がある処理を書き留めていく。

netlify.tomlの設定

[build]
  command = "npm run build"

[[plugins]]
  package = "@netlify/plugin-nextjs"
[[plugins]]
  package = "netlify-plugin-cache-nextjs"

Netlify.tomlを設定しておくと、GUI上の設定を上書きしてくれる。

next.config.jsに追記

/** @type {import('next').NextConfig} */
module.exports = {
・・・
  target: 'serverless', // 追記
}

普通にデプロイするだけだと、ルートページは表示されるけど、pages/xxx/[id].tsxのような動的なページは表示してくれない。