【Next.js】 App RouterとPages Router のディレクトリ構造

こんにちは。CREFILの甲斐です。

Next.jsではルーティングの手法が下記2つありますが、新しいApp Routerについて知らないことも多いので少しまとめてみます。

• Pages Router

• App Router

従来の Pages Router

Pages Router を開発時に採用した場合、「pages」 というフォルダにファイルを置くと、そのファイルが自動的にウェブページになります。

例：「pages/about.js 」というファイルを作ると、それが 「/about 」というURLにアクセスしたときに表示されるページになります。

// pages/about.js

export default function About() {
  return <h1>About Page</h1>;
}

Pages Router のディレクトリ構造

pages/     ・・・ページを配置するフォルダ
pages/index.js　・・・インデックスページ（「 / 」に対応）
pages/about.js ・・・About ページ ( 「/about 」に対応)

新しい App Router

新しく導入されたこちらの方法では、app というフォルダを使って、ページを作ったりレイアウトの設定を行います。

例：「app/about/page.js 」というファイルを作ると、それが「 /about 」というURLにアクセスしたときに表示されるページになります。

// app/about/page.js
export default function About() {
  return <h1>About Page</h1>;
}

App Router のみでのディレクトリ構造の例

app/     ・・・ページとレイアウトを配置するフォルダ
app/page.js　・・・インデックスページ（「 / 」に対応）
app/about/page.js ・・・About ページ ( 「/about 」に対応)

URLとしては、⁠page.js もしくは⁠route.js のみルーティング設定をすることが可能です。

page.js か route.js である必要がある

App Router と Pages Router 両方の活用

App Router を使う場合でも、Pages Router を併用することが可能です。

従来の pages ディレクトリ配下での管理を維持しながら、app ディレクトリで新しいルーティングの仕組みを取り入れることができます。

src の下に「app」と「pages」がある状態

Building Your Application: Routing | Next.js

App Router の動的ルーティング

Next.jsには動的に[ ]で囲んだ値をパラメータとして受け取れる設定がありますが、App Routerでも対応しています。

例：

 [slug] / page.js ・・・ここでは slug の値を動的に受け取ります

動的に受け取る方法は、他にも下記のような方法があります。

• [...folder]

• [[...folder]]

Routing: Dynamic Routes | Next.js

App Router の Route Group で URLマッピングを防ぐ

URLへのマッピングを防ぐには、グループ化したいディレクトリを（）で囲みます。

app/(dashboard)/home/page.js ・・・この場合URLは「/home」となります

最後に

App Router が加わったことで、Next.js でのディレクトリ構造はより自由度の高いものとなりました。
他にも今回触れていない機能がたくさんあるので、興味のある方は公式ドキュメントをご確認いただければ幸いです。

Docs | Next.js