できない.dev

App Router

別名: アップルーター / app ディレクトリ / app directory

Next.js の app/ ディレクトリを使うルーティング方式。
フォルダ構成がそのまま URL になり、既定が Server Component であること、layout / loading などの特別なファイル名で挙動を組み立てる点が特徴。

#nextjs#app-router#routing#server-component#react

公開:

定義

App Router は、Next.js が app/ ディレクトリで提供するファイルシステムベースのルーティング方式です。
フォルダの階層がそのまま URL のセグメントになり、そのフォルダに置いた page.tsx がページとして描画されます。
React Server Components を前提に設計されており、app/ 配下のコンポーネントは指定しない限りサーバー側で実行されます。

詳細

ルートを構成するのは決まった名前のファイルです。page がページ本体、layout が複数ページで共有する外枠、loading が Suspense のフォールバック、error がエラー境界、route が Route Handler（新しいタブで開く） を表します。
フォルダを作っただけでは公開されず、page が無いセグメントは URL として存在しません。

app/
  layout.tsx        ← 全ページ共通の外枠
  page.tsx          ← /
  blog/
    page.tsx        ← /blog
    [slug]/
      page.tsx      ← /blog/:slug

ブラウザの API やイベントハンドラを使うファイルの先頭には "use client" を書き、クライアント側で動かす境界を明示します。
従来の pages/ ディレクトリ方式（Pages Router）とは同一プロジェクト内で共存できますが、同じ URL を両方で定義することはできません。

よくある誤解

  • app/ にファイルを置けば公開される: 公開されるのは page を持つセグメントだけです。components/ のような同居フォルダは URL になりません。
  • "use client" を書くとサーバーで動かなくなる: そのファイル以下がクライアント境界になるだけで、初期 HTML はサーバーで描画されます。

関連

既定の実行単位は Server Component、クライアント境界の指定は "use client" を参照してください。
404 が解消できない症状は App Router で page.tsx を置いても 404 にまとめています。