【Next.js】詳細ページに遷移した後にリロードすると404になった時の対処方法

概要

next/link・next/routerを利用した詳細ページへの遷移時に遷移は成功するが、ページを更新したり別タブで開こうとすると404が発生する事象に遭遇した。
解決まで少し沼ったので解決方法をまとめておく

環境

• Next.js v12.1.6

対処方法

trailingSlashを有効にすることで以下の問題が解決したことで404になる事象が解決したようです。

https://stackoverflow.com/questions/54815348/nextjs-page-goes-to-404-on-refresh

As Is

/pages/hoge/index.tsxがhoge.htmlで書き出される

To Be

/pages/hoge/index.tsxが/hoge/index.htmlで書き出される

next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
    // https://github.com/vercel/next.js/discussions/10522#discussioncomment-28307
    trailingSlash: true, // 追加!
    typescript: {}
};

module.exports = nextConfig;