Next.jsは、モダンなWebアプリケーションの開発において高い人気を誇るReactフレームワークです。バージョン13以降、Next.jsはApp Routerを導入し、ページ構造やデータフェッチ、レイアウトの定義方法に革新をもたらしました。本記事では、Next.jsのApp Routerについて、基本的な概念や使い方を解説します。
[目次を開く]
App Routerとは？
App Routerは、従来のpages/ディレクトリに代わる新しいルーティング方法です。app/ディレクトリを使い、Reactのコンポーネントとファイルシステムベースのルーティングをさらに進化させたものです。
主な特徴
- ファイルシステムベースのルーティング
app/ディレクトリ内の構造がそのままURLに対応。 - サーバーコンポーネントのサポートデフォルトでReactのサーバーコンポーネントが有効。
- レイアウトの定義ページ全体や一部で再利用可能なレイアウトを簡単に設定可能。
- 柔軟なデータフェッチデータの取得をサーバー側、クライアント側どちらでも処理可能。
基本構造
ディレクトリ構成の例
以下は、典型的なapp/ディレクトリ構造です。
app/
├── layout.js // アプリ全体のレイアウト
├── page.js // ルートパスのページ
├── dashboard/ // サブパス
│ ├── layout.js // dashboard専用のレイアウト
│ ├── page.js // /dashboardのページ
│ └── settings/ // ネストされたサブパス
│ └── page.js // /dashboard/settingsのページ
└── styles/ // スタイルシートなど基本コンポーネント
1. layout.js
layout.jsは特定のページやサブディレクトリで共通のUIを定義するためのファイルです。
export default function Layout({ children }) {
return (
<html>
<body>
<header>
<h1>My App</h1>
</header>
<main>{children}</main>
</body>
</html>
);
}ポイント
- 子コンポーネントは
{children}として受け取る。 - HTMLやヘッダーなどの共通部分を一度で定義できる。
2. page.js
page.jsは、各URLに対応するページを定義します。
export default function HomePage() {
return (
<div>
<h2>Welcome to My App</h2>
<p>This is the home page.</p>
</div>
);
}ポイント
-
page.jsは、そのディレクトリのルートURLに対応。 - サーバーコンポーネントとしてデフォルトで動作。
3. head.js
ページ固有のメタ情報を定義する場合、head.jsを利用します。
javascript
コードをコピーする
export default function Head() {
return (
<>
<title>My App</title>
<meta name="description" content="An example app using Next.js App Router" />
</>
);
}
ポイント
-
<head>タグの内容をカスタマイズ可能。 - SEOやOGタグの設定に便利。
データフェッチの方法
App Routerでは、データフェッチの方法が柔軟になり、サーバーコンポーネントとクライアントコンポーネントを組み合わせて利用します。
サーバーコンポーネントでデータを取得
以下は、getData関数を使った例です。
async function getData() {
const res = await fetch('https://api.example.com/data');
if (!res.ok) throw new Error('Failed to fetch data');
return res.json();
}
export default async function Page() {
const data = await getData();
return (
<div>
<h1>Data from API</h1>
<pre>{JSON.stringify(data, null, 2)}</pre>
</div>
);
}クライアントコンポーネントで動的なデータ取得
クライアント側で動的にデータを取得する場合は、useEffectを使います。
'use client';
import { useEffect, useState } from 'react';
export default function ClientComponent() {
const [data, setData] = useState(null);
useEffect(() => {
async function fetchData() {
const res = await fetch('/api/example');
const json = await res.json();
setData(json);
}
fetchData();
}, []);
return <pre>{JSON.stringify(data, null, 2)}</pre>;
}ルーティングの仕組み
ダイナミックルーティング
[param]を使うことで、動的なURLを定義できます。
export default function BlogPost({ params }) {
return <h1>Post ID: {params.id}</h1>;
} URL /blog/123 にアクセスすると、params.idは123になります。
ネストされたルート
サブディレクトリを使うことで、ネストされたルートを簡単に作成できます。
// app/dashboard/layout.js
export default function DashboardLayout({ children }) {
return (
<div>
<nav>Dashboard Navigation</nav>
{children}
</div>
);
}App Routerのメリット
- 直感的な構造
ディレクトリ構造がそのままルートに反映されるため、理解しやすい。
- サーバーコンポーネントの活用
デフォルトでサーバーコンポーネントを利用することで、パフォーマンスが向上。
- 再利用可能なレイアウト
レイアウトを簡単に定義でき、コードの重複を削減。
- データフェッチの柔軟性
サーバーサイド、クライアントサイドのどちらでもデータフェッチが可能。
まとめ
Next.jsのApp Routerは、ページ構造やデータ管理の新しい標準を提供し、開発者が効率的に作業できるよう設計されています。シンプルなレイアウトから複雑なアプリケーションまで、App Routerを活用することで柔軟で拡張性の高いWebアプリを構築できます。
これからNext.jsを学ぶ方は、ぜひApp Routerを活用して、次世代のWebアプリ開発に挑戦してみましょう！
