next.jsのルーティングはindex.jsを使うと綺麗にまとまる

1 min読了の目安(約600字TECH技術記事

next.jsの動的ルーティングを利用すると、下記のようになってしまうことがよくあった

.
├── users
│   └── [id].js // 詳細ページの用途
└── users.js    // listページの用途

一つぐらいなら気にならないが、要素が増えてくると下記のようになってきてなかなか管理しづらくなってくる

.
├── items
│   └── [id].js
├── tags
│   └── [name].js
├── users
│   └── [id].js
├── items.js
├── tags.js
└── users.js

と、実はindex.jsが使えるということに気付いた

.
├── items
│   ├── [id].js
│   └── index.js
├── tags
│   ├── [name].js
│   └── index.js
└── users
    ├── [id].js
    └── index.js

これでスッキリする