🦹

Next.jsのSSGのルーティングでリロードすると404

2023/04/09に公開

ハマり内容

next build したSSGサイトを生成したルーティングでハマったのでメモ.

/pages/index.ts
/pages/about.ts

みたいなファイルがあって、下記のようにリンクを書くとき、

<Link href="/about">about</Link>

リンクを押してのindex.ts -> about.tsへの遷移は成功する

しかし、リロードすると http://localhost:8001/about は404になってしまう.

outで出力されたdirectoryの構造をみると下記のようになっていた

out
|- index.html
|- about.html

これをそのままhostingすると /about => /about/index.html にルーティングするので404になる

trailingSlash: true をオプション有効にすると、 /about/index.htmlが生成されてうまく行った

next.config.js

const nextConfig = {
  output: "out",
  trailingSlash: true,
}

module.exports = nextConfig;