eslint-plugin-import-access は App Router で使うと便利
2024/02/29 Next.js 13, 14 LT会 発表資料 概要
この発表の対象者
この発表の目的
提案に対しての議論（コメント書いてね！）
軽い内容なので気軽に聞いてね
outline
1. eslint-plugin-import-access とは
2. App Routerのディレクトリ構成
3. eslint-plugin-import-access は app router で使うと便利
4. おまけ（Tips）
1. eslint-plugin-import-access とは
2. App Routerのディレクトリ構成
3. eslint-plugin-import-access は app router で使うと便利
App Router は route のセグメントごとに page, layout, component をコロケーションしていく
code:txt
app/
(unauthenticated)/
_components/
index.ts
.... # 未認証でしか使わないコンポーネント
signin/
_components/
index.ts
.... # ログイン画面でしか使わないコンポーネント
page.tsx
signup/
page.tsx
rescue/
....
(authenticated)/
.... # 認証済みでしか使わないコンポーネント
feature-a/
_components/
index.ts
.... # セグメント「feature-a」でしか使わないコンポーネント
page.tsx
ページ固有のコンポーネントや関数をページと同階層における
「ページ固有」=他のページから使ってほしくない！
app/ 内で他の階層からのimportを制御したい！
→ eslint-plugin-import-access があるじゃん！
4. おまけ
eslint-plugin-import-access によって「同じ階層のファイル」であることに意味が生まれるので、そうでないファイルからは絶対importにして区別する
もっとimportを縛りたいときに
repositoryへのimport元を制限したいときとか…
ESLintをいい感じに設定して開発者体験爆上げしてこうぜ！！！