Next.js 入門コース / レッスン 1
プロジェクト構成とルーティング
ファイルベースルーティング
App Router では app/ 配下のフォルダ構成がそのまま URL になります。各フォルダの page.tsx がそのパスのページ、layout.tsx が共通の枠です。
ディレクトリ構成
app/
├── layout.tsx # 全ページ共通レイアウト
├── page.tsx # /
├── courses/
│ ├── page.tsx # /courses
│ └── [slug]/
│ └── page.tsx # /courses/python など（動的ルート）
└── membership/
└── page.tsx # /membership
app/courses/[slug]/page.tsx
export default async function CoursePage({
params,
}: {
params: Promise<{ slug: string }>;
}) {
const { slug } = await params;
return <h1>コース: {slug}</h1>;
}
動的ルート
[slug] のような角かっこフォルダは動的ルートになり、URL の一部を params として受け取れます。本家サイトの /course/python のようなページはこの仕組みで 1 つのファイルから量産されています。
✅ 理解度チェック
App Router で /about ページを作るには？