Next.js ver13：App Routerのディレクトリ構成とベストプラクティス

はじめに

Next.js ver13が登場し、新たなルーティング方式であるApp Routerが導入されました。この記事では、App Routerのディレクトリ構成に焦点を当て、どのように設計すれば効率的なのかを解説します。

前提条件

• Next.jsに基本的な知識がある方向けです。

免責事項

• この記事では、app/ディレクトリ以下の配置方法についてのみ説明します。
• コンポーネントの分け方については別の記事で取り扱います。

Next.js ver12までのPages Router

Next.jsは、react-router-domの複雑さを解消するために、ファイルシステムベースのルーティングを採用しています。ver12までは、pages/ディレクトリ以下のファイルが自動でルートとして認識されました。

基本的な構造（Pages Router）

src/
  pages/
    - index.tsx  // "/"
    - about.tsx  // "/about"
    work/
      - index.tsx  // "/work"
      - [id].tsx  // "/work/1"

Next.js ver13のApp Router

ver13では、新たにApp Routerが正式に採用されました。この新しい方式にはいくつかの特徴があります。

主な変更点

1. app/ディレクトリ以下に作成する必要があります。
2. ファイル名でのルーティングが不可で、[ディレクトリ]/page.tsx形式でルーティングします。
3. app/ディレクトリ以下にルーティングに関係ないファイル（コンポーネントなど）も置けます。
4. layout.tsxなど、特定の役割を果たすファイルが追加されました。

基本的な構造（App Router）

src/
  app/
    - page.tsx
    - layout.tsx
    about/
      - page.tsx
      - layout.tsx
    work/
      - page.tsx

ディレクトリ構成のベストプラクティス

案1：app/ディレクトリをルーティング専用にする

src/
  components/
  app/
    - page.tsx
    - layout.tsx
    work/
      - page.tsx
      - layout.tsx
    about/
      - page.tsx

案2：app/ディレクトリにルーティング以外のファイルも格納する

src/
  app/
    - page.tsx
    - layout.tsx
    components/
    (pages)
      work/
        - page.tsx
        - layout.tsx
      about/
        - page.tsx

案1 vs 案2

• 案1は、src/ディレクトリの直下にcomponents/やapp/など複数のディレクトリが存在し、見通しがよい。
• 案2は、src/ディレクトリの直下にapp/しか存在しないため、src/ディレクトリを切る意味が少ない。

結論

• src/ディレクトリを使用する場合は、案1が見通しがよく推奨されます。
• app/ディレクトリは、ルーティングだけでなく、他のコード（コンポーネント等）も一緒に置くことができます。
• 最終的には、プロジェクトの要件とチームの方針によって選ぶべきです。

参考文献

あわせて読みたい

Introduction | Next.js Welcome to the Next.js Documentation.