[Next.js] Pages Routerでコロケーションを意識したディレクトリを実現する

2024/03/30

3 min read

概要

Next.jsでPages Routerを利用している環境でコロケーションを意識したディレクトリ構造を実現したい。

コロケーションとは

原則
コロケーションの概念はこの基本的な原則に集約されます:
可能な限り関連性が高いものの近くにコードを置いてください。
こうも言えます: “一緒に変化するものは、合理的な範囲で近くに置くべきです。“と。（ Dan Abramov氏がかつて私にこのような話をしました。）
引用元: コロケーション

Next.jsのPages Routerでいえば、src/pages/tagsというルーティングがある場合、このtagsだけに関連するコードは関心として近くに置いておくべきということである。

環境

Next.js - 14.1.4

pageExtensionsが利用できるバージョンであれば問題ない（v5あたりで導入）。

方法

Next.jsのPages Routerはpagesディレクトリへ置かれたファイルに応じてルーティングが行われる。そのためルーティングに関係のないファイルは基本的に置くことができない。
ただ、以下のようにpageExtensionsにpage.tsxを設定することでルーティング対象の拡張子をpage.tsxに限定できる。それによって、ただの.tsファイルはルーティング対象外となる。

// next.config.js
module.exports = {
  pageExtensions: ['page.tsx'],
};

上記の設定したうえで、ルーティングに関係のないファイルはそのまま（.tsx|ts）、ルーティング対象のファイルは.page.tsxとすることでコロケーションを意識したディレクトリ構造を実現できる。下記の例では、_layoutsや_componentsなどのディレクトリを作成し、その中に関係するコンポーネントを配置している。

.
├── 404.page.tsx
├── _app.page.tsx
├── _document.page.tsx
├── index.page.tsx
├── _components
├── _layouts
│   ├── AppLayout.tsx
│   ├── ArchivePageLayout.tsx
│   ├── SinglePageLayout.tsx
│   └── TopPageLayout.tsx
├── _libs
│   ├── getPopularPost.ts
│   └── index.ts
├── about
│   └── index.page.tsx
├── archive
│   ├── _components
│   │   └── index.ts
│   ├── _libs
│   │   ├── getStaticPropsArchive.ts
│   │   └── index.ts
│   └── index.page.tsx
└── tags
    ├── _libs
    │   ├── getStaticPathsTagDetail.ts
    │   ├── getStaticPropsTagDetail.ts
    │   └── index.ts
    ├── [slug].page.tsx
    └── index.page.tsx