Next.jsでpages配下のurlに紐づくファイルをindex.page.tsxにする方法

アプリが大規模になってくると、ファイルがかなり多くなってくるので、urlにひもづくファイルを一目で見分けたいときなんかに使える。

実装方法

とはいってもやることは簡単。

next.config.js

/** @type {import('next').NextConfig} */
module.exports = {
  swcMinify: true,
  reactStrictMode: true,
  //pageExtensionsを追加
  pageExtensions: ['page.tsx', 'page.ts'],
};

あとは

_app.tsx → _app.page.tsx
index.tsx → indexs.page.tsx

などするだけ。

簡単な修正のだが、割と便利だと思う。