📻
Next.js App Routerってなに？初心者が導入してみて分かったこと【導入〜使い方】
記事を書いた背景
Next.js を使ったサービス開発に従事することになりました。
これまでもなんとなくで使っていましたが、今回はしっかりと学び直しつつ、その勉強ログとして記事にまとめています。
※ 間違っている箇所があれば、ぜひコメントで教えてください！
📌 この記事でわかること
- Next.js 13以降で登場した App Router の概要
- Pages Routerとの違い
- App Routerの導入方法
- App Routerの基本構成とファイルの役割
- 公式リファレンスまとめ
🚀 App Routerとは？
Next.js 13で新たに導入されたルーティングの仕組みで、app/ ディレクトリを使って柔軟なページ構成が可能になります。
App Router is a new routing mechanism built on top of React Server Components.
App Router は、従来の Pages Router（pages/ ディレクトリ）を置き換えるものではなく、併存可能な新しい選択肢です。
私はこれまでやったことあったのはこっちのやり方だけだったのでここだけでも新鮮でした。
pages/ディレクトリ
📖 公式リファレンス
🔀 Pages Routerとの違い
| 項目 | Pages Router | App Router |
|---|---|---|
| ディレクトリ | pages/ |
app/ |
| レイアウト共有 |
_app.tsx, _document.tsx
|
layout.tsx |
| データ取得 |
getServerSideProps 等 |
fetch / use / Server Component 内で直接取得 |
| 動的ルーティング | [slug].tsx |
[slug]/page.tsx |
| SSR/SSG | 明示的（getStaticProps等） | 暗黙的（fetchの使い方で制御） |
| React Server Components | 非対応 | 対応 |
🛠 App Routerの導入方法
1. Next.js 13以上のインストール
npx create-next-app@latest your-app-name
プロジェクト作成時に「App Routerを使うか？」と聞かれるので Yes を選択してください。
既存プロジェクトでは、pages/ と app/ の併存が可能ですが、同一ルートに存在する場合は app/ が優先されます。
📂 ディレクトリ構成と主なファイルの役割
App Router では、ディレクトリとファイル名によってルーティングや表示が制御されます。
/app
├─ layout.tsx ← 全体の共通レイアウト
├─ page.tsx ← トップページ（/）
└─ about/
├─ page.tsx ← /about ページ
└─ layout.tsx ← /about 用レイアウト
主なファイルの役割
| ファイル名 | 説明 |
|---|---|
page.tsx |
各ルートのページ本体（URLに対応） |
layout.tsx |
共有レイアウト。子にも継承される |
loading.tsx |
読み込み中のUI。非同期対応のルートに表示される |
error.tsx |
エラー発生時に表示されるUI（要 'use client'） |
not-found.tsx |
404用のカスタムUI |
template.tsx |
layout.tsx に似ているが状態を共有せず毎回再レンダリング |
✨ layout.tsx の例
// app/layout.tsx
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="ja">
<body>{children}</body>
</html>
);
}
-
<html>や<body>を定義でき、アプリ全体の構造制御がしやすい - ネストされたレイアウトにより、柔軟なレイアウト構成が可能
⏳ loading.tsx の使い方
// app/dashboard/loading.tsx
export default function Loading() {
return <p>読み込み中です...</p>;
}
- 非同期処理を含む
page.tsxやlayout.tsxに対応 - Skeleton UI でUX向上
- Server ComponentでもOK（'use client' 不要）
❌ error.tsx でエラーUIを出す
// app/dashboard/error.tsx
'use client';
import { useEffect } from 'react';
export default function Error({ error, reset }: { error: Error; reset: () => void }) {
useEffect(() => {
console.error(error);
}, [error]);
return (
<div>
<h2>エラーが発生しました</h2>
<button onClick={() => reset()}>再試行</button>
</div>
);
}
-
'use client'をつけてクライアントコンポーネントとして動作 -
reset()で再レンダリングが可能
Discussion
末尾の「参考リンク」のリンクが切れてますよ
ありがとうございます！差し替えさせていただきました。
おかしいと思って確認してみましたが、当記事の「その他の補助ファイル」の中に書かれている
という規約は、実在しません。
間違いなら恐縮ですが、生成 AI のハルシネーションっぽい感じがします。裏取りはされましたか？
ご指摘ありがとうございます。
確認しているつもりではあるのですが根拠がないので該当箇所に関連するところは削除しました。
申し訳ございません。
いえいえ、
色々指図するのは少し差し出がましいですが、
みたいなことをすると、有益になるかもしれません。
手前味噌になりますが僕を含め、公式ドキュメントを読む労力を減らすのに有用な、情報をうまく噛み砕いた記事を発信している人がいます。そういった人をみつけて、彼らの記事を利用するのも良いと思います。