🚪 はじめに
Next.js 13以降で実装された App Router は、形式やルールが大きく変わりました！
この記事では、Next.jsのApp Routerでよく使われる「予約ファイル」の概要と、関連ディレクトリの役割を初学者向けにわかりやすく整理します。
👤 想定読者
- Next.js 13以降のApp Router構成を学びたい初学者の方
appディレクトリの構成に戸惑っている方middleware.tsやlayout.tsxなどの使い方が曖昧な方
📘 本記事でわかること
- App Router における「予約ファイル」の種類と役割
- 各ファイルの参考コードと使いどころ
/appや/middleware.tsなど、関連ディレクトリの役割- 最低限の構成例やよくある落とし穴の回避法
📁 予約ファイルとは？
Next.jsで特殊な定義がされたファイルのことを「予約ファイル」と言います。予約ファイルには特定の役割があり、Next.jsが自動でローディングします。
よく使われる予約ファイル一覧と役割
| ファイル名 | 主な用途 |
|---|---|
page.tsx | ページのコンテンツ本体（ルーティングのエントリーポイント） |
layout.tsx | ページ構成（ヘッダーや共通UI）の定義 |
loading.tsx | 遅延読み込み時に表示するローディングUI |
error.tsx | ページエラー発生時に表示されるコンポーネント |
not-found.tsx | 404ページ（ページが見つからない場合） |
参考コード付き詳細解説
page.tsx
export default function Page() {
return <h1>Home Page</h1>;
}
/app/page.tsx に配置すると / にアクセスしたときにこのコンポーネントが表示されます。
layout.tsx
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="ja">
<body>{children}</body>
</html>
);
}
全ページ共通で適用されるレイアウト。ページ遷移時にも再描画されません。
loading.tsx
export default function Loading() {
return <p>Loading...</p>;
}
特定のコンポーネントが**遅延読み込み（dynamic import）**されたときに表示されます。
error.tsx
'use client';
export default function Error({ error }: { error: Error }) {
return <p>エラーが発生しました: {error.message}</p>;
}
レンダリング中にエラーが発生した場合に表示される画面です。クライアントコンポーネントである必要があります。
not-found.tsx
export default function NotFound() {
return <h2>ページが見つかりませんでした</h2>;
}
存在しないルートにアクセスした際に表示されるページです。
🗂 ディレクトリ構成のポイント
/app
メインのルーティングを担当。ここに予約ファイル (page.tsx, layout.tsx など) を配置する。
/public
非生成アセット置き場。 画像（OGP画像やロゴ、アイコン等）を置く。 URLで直接参照される点が特徴。
https://example.com/your-image.png
/middleware.ts
全ページ返答前に実行されるスクリプト。 リダイレクトやアクセス管理などに利用する。
🧪 例：「最低限の構成」
こんな感じで、最低限の構成ができます。
/app
/page.tsx // ホームページ
/layout.tsx // 全体のレイアウト
/loading.tsx // ローディング時
/error.tsx // エラー時
/public
/logo.png // サイトロゴ
/middleware.ts // 全体ミドルウェア
💬 補足コメント
App Routerは文法や方式がシンプルな分、解釈力を要求される。
だから、最初に「予約ファイルの定義」と「役割」をきちんと折り込むことで、後の成長が大きく変わります！
📦 おわりに
この記事で、Next.js App Routerの最初の紹介ができるようにまとめました！
次回は、より実践的に「ページ内でのネストインポート」や「モジュールコンポーネント」についても解説していく予定です！
Share this post