App Routerでブログのページ構造を組み立てる

このブログはNext.jsのApp Routerで作っています。ドキュメントを読むだけではピンと来なかった部分が、実際にページを組み立てると腑に落ちたので、このサイトの実際の構造を例に整理しておきます。

フォルダがそのままURLになる

App Routerでは、app/配下のフォルダ構成がそのままURLになります。このサイトの構造は次のとおりです。

app/
  layout.tsx        … 全ページ共通の枠（ヘッダー・フッター）
  page.tsx          … トップページ（/）
  blog/
    page.tsx        … 記事一覧（/blog）
    [slug]/
      page.tsx      … 記事詳細（/blog/記事のslug）
  projects/page.tsx … 制作物（/projects）
  about/page.tsx    … プロフィール（/about）
  not-found.tsx     … 404ページ

layout.tsxにヘッダーとフッターを置いておくと、すべてのページに共通して適用されます。ページ側は<main>の中身だけを書けばよく、共通部分の重複がなくなります。

動的ルートと静的生成

記事詳細の[slug]は動的ルートです。ただしこのサイトは静的書き出し（output: "export"）で運用するため、ビルド時にすべての記事ページをHTMLとして生成する必要があります。それを担うのがgenerateStaticParamsです。

export async function generateStaticParams() {
  const articles = await getAllArticles();
  return articles.map((article) => ({ slug: article.slug }));
}

Markdownの記事ファイルを列挙してslugの一覧を返すと、Next.jsがその分だけ/blog/◯◯/のHTMLをビルド時に作ってくれます。存在しないslugへのアクセスはnotFound()で404ページに送ります。

使ってみての感想

「フォルダ＝URL」「レイアウトの入れ子」という2つのルールを押さえると、ページの追加がとても機械的にできるようになりました。次はMarkdownから記事データを読み込む部分の仕組みを書く予定です。