Next.js root ディレクトリをシンプルにしたい。

Next.js でプロジェクトを作ると root ディレクトリに routing をするための /pages が作られるのでコンポーネントなどのファイルを作ろうとすると root にディレクトリが増えてしまっていって見通しがあまりよろしくないので、react のプロジェクトのように /src ないにまとめていい感じにしたかったメモ

Next.js + TypeScript + ESLint + Preiiterでプロジェクトを作った状態

こんな感じのディレクトリ構成になってる

/
 |- /.vscode
 |- /node_modules
 |- /pages
 |- /public
 |- /styles
 |- .gitignore
 |- .eslintrc.js
 |- .prettierrc.json
 |- next.config.js
 |- package-lock.json
 |- package.json
 |- README.md
 |- tsconfig.json

`/src` 内にアプリ関係のファイルを移動させる

tsconfig.json の compilerOptions.baseUrl オプションでルートになるディレクトリが指定できる

{
  "compilerOptions": {
    "baseUrl": "src",
  }
}

これで /src ディレクトリがルートになるので、/pages ディレクトリなどをこの中に移動させてOKになる。
👇 ディレクトリ構成を変更

/
 |- /.vscode
 |- /node_modules
 |- /public
 |- /src
 |   |- /pages
 |   |- /styles
 |- .gitignore
 |- .eslintrc.js
 |- .prettierrc.json
 |- next.config.js
 |- package-lock.json
 |- package.json
 |- README.md
 |- tsconfig.json

この状態で npm run dev をして localhost:3000 で問題なく Next のアプリが起動すれば OK。
これで /components とかアプリに使うファイルを置くディレクトリを /src 内にまとめることができました ₍ ᐢ. ̫ .ᐢ ₎ ﾔｯﾀｾﾞ

コンポーネントの import を楽にする (path alias の設定)

React, Next のアプリを作っているとディレクトリのネストや下層コンポーネントから上位のコンポーネントのインポートで相対パスを書くのが自動補完があるとは言え ../../../ みたいなのはあまり見通しがよろしくないです。
tsconfig の compilerOptions.paths オプションを使うとディレクトリへのパスのエイリアス (?) が作成できるみたいなので、色んなコンポーネントから呼び出すようなディレクトリを登録して import の見通しを良くしたいと思います。

tsconfig.json

{
  "compilerOptions": {
    "baseUrl": "src",
+   "paths": {
+     "~/components/*": ["components/*"],
+     "~/styles/*": ["styles/*"],
+     "~/public/*": ["../public/*"]
+   },
  }
}

⚠ compilerOptions.paths は baseUrl を root にしてそこからの相対パスで指定する
これで import XXX from '~/components/XXX' で /src/components/XXX, import from '~/public/XXX' で /src/XXX を何処からでも import できるようになりました！ utility や Atom に該当するようなファイルを置くディレクトリをここで指定しておくといい感じになりそうです。

Next ちょっとづつスタァライトしてきた感あるな (環境作ってばかりだけど)

[参考]