🦹

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

に公開
Next.js
tech

ハマり内容

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

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

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

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

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

http://localhost:8001/ -> http://localhost:8001/about

しかし、リロードすると 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;
directory
out
|- index.html
|- about
   |- index.html

これで / -> /about -> /about/ に遷移して、リロードしてもうまく動くようになった.

Discussion