Next.jsでexportするときにURLの最後にスラッシュが付くようにする 💻

f:id:kimizuka:20210103011013j:plain

Next.jsで

/pages/about/index.tsx（もしくは /pages/about/index.js）をexportすると about.html になりますが、 /about/index.html にするためにはどうすればいいのかを探ってました。

結論を先に書くと、

next.config.jsのtrailingSlashをtrueにすればOKです。

module.exports = {
  trailingSlash: true
};

しっかりと公式ドキュメントに書いてありました。

nextjs.org

これがわかるまでは、わざわざダイナミックルーティングをつかって、/pages/about/[id].tsxを用意し、

export default function AboutPage() {
  return <div />
}

export async function getStaticProps({ params }) {
  return {
    props: {}
  };
}

export async function getStaticPaths() {
  return {
    paths: [{
      params: { id: 'index' }
    }],
    fallback: false,
  };
}