はじめに

Next.js の App Router は、React の Server Components を活用し、より効率的なデータ取得やサーバーサイド処理を実現する仕組みです。
本記事では、Next.js App Router に TypeScript を導入する方法と、実践的な型定義のポイントについて解説します。

1. Next.js App Router に TypeScript を導入する

新規プロジェクトで TypeScript を使用する

Next.js では、プロジェクト作成時に --typescript フラグを指定すると、TypeScript 環境が自動的にセットアップされます。

SH
npx create-next-app@latest my-app --typescript

または、すでに Next.js プロジェクトを作成済みの場合、以下のコマンドで TypeScript を追加できます。

SH
npm install --save-dev typescript @types/react @types/node

この状態で next dev を実行すると、Next.js が tsconfig.json を自動生成します。

SH
npx next dev

2. App Router における基本的な型定義

ページコンポーネントの型定義

Next.js の App Router では、各ページは app フォルダ内に配置され、デフォルトで Server Component になります。

TSX
// app/page.tsx
export default function Home() {
  return <h1>Welcome to Next.js with TypeScript!</h1>;
}

この場合、型定義は不要ですが、Props を受け取る場合は型を明示するとよいでしょう。

TSX
type Props = {
  message: string;
};

export default function Home({ message }: Props) {
  return <h1>{message}</h1>;
}

Server Component での型定義

Next.js App Router では fetch を使用してサーバーサイドでデータを取得できます。
その際、データの型を定義することが重要です。

TSX
// app/users/page.tsx
type User = {
  id: number;
  name: string;
  email: string;
};

async function getUsers(): Promise<User[]> {
  const res = await fetch("https://jsonplaceholder.typicode.com/users");
  if (!res.ok) throw new Error("Failed to fetch data");
  return res.json();
}

export default async function UsersPage() {
  const users = await getUsers();

  return (
    <div>
      <h1>Users</h1>
      <ul>
        {users.map((user) => (
          <li key={user.id}>
            {user.name} ({user.email})
          </li>
        ))}
      </ul>
    </div>
  );
}

Client Component での型定義

クライアント側での型定義も重要です。
useState や useEffect を使用する場合、適切に型を指定しましょう。

TSX
"use client";
import { useState, useEffect } from "react";

type User = {
  id: number;
  name: string;
  email: string;
};

export default function UsersList() {
  const [users, setUsers] = useState<User[]>([]);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then((res) => res.json())
      .then((data: User[]) => setUsers(data));
  }, []);

  return (
    <ul>
      {users.map((user) => (
        <li key={user.id}>
          {user.name} ({user.email})
        </li>
      ))}
    </ul>
  );
}

3. useParams と useSearchParams の型定義

App Router では、動的ルートのパラメータを取得するために useParams や useSearchParams を使用します。

useParams の型定義

動的ルート（app/users/[id]/page.tsx）の id を取得する例です。

TSX
"use client";
import { useParams } from "next/navigation";

type Params = {
  id: string;
};

export default function UserDetail() {
  const { id } = useParams<Params>();

  return <h1>User ID: {id}</h1>;
}

useSearchParams の型定義

クエリパラメータを取得する場合は useSearchParams を使います。

TSX
"use client";
import { useSearchParams } from "next/navigation";

export default function SearchPage() {
  const searchParams = useSearchParams();
  const query: string | null = searchParams.get("query");

  return <h1>Search Query: {query}</h1>;
}

4. API Routes の型定義

App Router では、app/api 内に API ルートを作成できます。
レスポンスの型を定義することで、型安全な API を実装できます。

TSX
// app/api/users/route.ts
import { NextResponse } from "next/server";

type User = {
  id: number;
  name: string;
  email: string;
};

export async function GET() {
  const users: User[] = [
    { id: 1, name: "Alice", email: "alice@example.com" },
    { id: 2, name: "Bob", email: "bob@example.com" },
  ];
  return NextResponse.json(users);
}

まとめ

Next.js App Router に TypeScript を導入する際の重要なポイントをまとめました。

1. --typescript フラグを使ってセットアップする
2. ページコンポーネントの Props に適切な型を定義する
3. Server Component / Client Component で型を活用する
4. useParams や useSearchParams の型を適切に指定する
5. API Routes でレスポンスの型を明確にする

TypeScript を活用することで、Next.js の App Router をより安全で効率的に活用できます。