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

はじめに
1. 前提条件
2. 免責事項
Next.js ver12までのPages Router
1. 基本的な構造（Pages Router）
Next.js ver13のApp Router
1. 主な変更点
2. 基本的な構造（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が正式に採用されました。この新しい方式にはいくつかの特徴があります。

主な変更点

app/ディレクトリ以下に作成する必要があります。
ファイル名でのルーティングが不可で、[ディレクトリ]/page.tsx形式でルーティングします。
app/ディレクトリ以下にルーティングに関係ないファイル（コンポーネントなど）も置けます。
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/ディレクトリは、ルーティングだけでなく、他のコード（コンポーネント等）も一緒に置くことができます。
最終的には、プロジェクトの要件とチームの方針によって選ぶべきです。

参考文献

Docs | Next.js

Welcome to the Next.js Documentation.