アルアカ - Arcadia Academia

Arcadia Academiaは「エンジニアリングを楽しむ」を合言葉に日本のデジタル競争力を高めることをミッションとするテックコミュニティです。

Next.js App Routerの基礎

Featured image of the post

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.id123になります。

ネストされたルート

サブディレクトリを使うことで、ネストされたルートを簡単に作成できます。

// app/dashboard/layout.js
export default function DashboardLayout({ children }) {
  return (
    <div>
      <nav>Dashboard Navigation</nav>
      {children}
    </div>
  );
}

App Routerのメリット

  1. 直感的な構造

    ディレクトリ構造がそのままルートに反映されるため、理解しやすい。

  2. サーバーコンポーネントの活用

    デフォルトでサーバーコンポーネントを利用することで、パフォーマンスが向上。

  3. 再利用可能なレイアウト

    レイアウトを簡単に定義でき、コードの重複を削減。

  4. データフェッチの柔軟性

    サーバーサイド、クライアントサイドのどちらでもデータフェッチが可能。


まとめ

Next.jsのApp Routerは、ページ構造やデータ管理の新しい標準を提供し、開発者が効率的に作業できるよう設計されています。シンプルなレイアウトから複雑なアプリケーションまで、App Routerを活用することで柔軟で拡張性の高いWebアプリを構築できます。

これからNext.jsを学ぶ方は、ぜひApp Routerを活用して、次世代のWebアプリ開発に挑戦してみましょう!

あなたを爆速で成長させるメンタリングプログラムはこちらから↓↓

RUNTEQ(ランテック) - 実践型Webエンジニア養成プログラミングスクールの入会