Next.js App Router の実践テクニック

Next.js は、React ベースのフレームワークで、サーバーサイドレンダリングや静的サイト生成を簡単に実現できることで人気があります。特に、Next.js の App Router は、シームレスなページ遷移やデータフェッチングを可能にする強力な機能です。本記事では、初心者から中級者のエンジニアを対象に、App Router の実践的なテクニックを詳しく解説します。

1. App Router の基本設定

基本的なルーティング

Next.js では、pages ディレクトリ内に配置されたファイルが自動的にルーティングされます。以下に基本的なディレクトリ構造の例を示します。

/pages
  ├── index.js        // ホームページ
  ├── about.js        // About ページ
  └── blog
      └── [id].js     // 動的ルーティング (ブログ記事ページ)

• index.js はホームページ (/ に対応)。
• about.js は About ページ (/about に対応)。
• blog/[id].js は動的ルーティングを利用して、ブログの記事 (/blog/1, /blog/2, など) に対応します。

動的ルーティングの活用

動的ルーティングを使うことで、URL パラメータを受け取ることができます。たとえば、ブログ記事の ID に応じたページを作成したい場合、次のように設定します。

// pages/blog/[id].js
import { useRouter } from 'next/router';

function BlogPost() {
  const router = useRouter();
  const { id } = router.query; // URL パラメータから ID を取得

  return <div>Blog Post ID: {id}</div>;
}

export default BlogPost;

2. データフェッチングの最適化

getStaticProps と getServerSideProps

Next.js では、getStaticProps と getServerSideProps を使用してデータをフェッチすることができます。

• getStaticProps: ビルド時にデータを取得し、静的に生成されたページを提供します。高速で、主に変更が少ないデータに適しています。

  // pages/index.js
  export async function getStaticProps() {
    const res = await fetch('https://api.example.com/data');
    const data = await res.json();
  
    return {
      props: { data }, // ページコンポーネントに渡される
    };
  }
  

• getServerSideProps: リクエストごとにデータを取得し、サーバーサイドでレンダリングします。リアルタイム性が必要なデータに適しています。

  // pages/index.js
  export async function getServerSideProps() {
    const res = await fetch('https://api.example.com/data');
    const data = await res.json();
  
    return {
      props: { data },
    };
  }
  

3. API Routes の利用法

Next.js の API Routes を使用することで、サーバーレス API エンドポイントを簡単に作成することができます。例えば、ユーザー情報を取得する API を作成する場合は以下のようにします。

// pages/api/user.js
export default function handler(req, res) {
  const { query } = req;
  const userId = query.id;

  // 例: ダミーデータを返す
  res.status(200).json({ id: userId, name: 'John Doe' });
}

この API は /api/user?id=123 のようにアクセス可能です。

まとめ

Next.js の App Router を活用することで、効率的でスケーラブルなアプリケーションを構築することができます。基本的なルーティングからデータフェッチング、API Routes の使用法まで、さまざまなテクニックを理解することで、開発の幅が広がります。これらのテクニックを実際のプロジェクトで活用し、より良いユーザー体験を提供しましょう。