← Next.js コース
1. App Router — フォルダがそのままURLになる
Next.js の App Router では、app ディレクトリの中のフォルダ構成がそのまま URL になります。app フォルダ直下が「/」、app/about フォルダが「/about」、app/blog/news フォルダが「/blog/news」に対応します。ルーティングの設定ファイルは一切書きません。
実務での利点は、フォルダを見ればサイトの構造が分かることです。「このページのコードはどこ?」と迷ったら、URL のパスをそのまま app ディレクトリでたどれば見つかります。
覚えることは「URL の区切り = フォルダの区切り」という対応だけです。フォルダを実際のページにする方法は次のレッスンで学びます。
サンプルコード(フレームワーク環境が必要なため表示のみ)
// フォルダ構成がそのまま URL の構造になる
//
// app/
// ├── about/ → /about
// ├── blog/ → /blog
// │ └── news/ → /blog/news
// └── contact/ → /contact
//
// 設定ファイルは不要。
// フォルダを作ること自体がルーティングの定義になる。