この章では、Next.jsのAPI Routesについて学びます。API Routesを使用すると、Next.jsアプリケーション内に簡単にAPIエンドポイントを作成できます。サーバーレス関数として動作するため、サーバーのセットアップや管理が不要で、スケーラビリティにも優れています。API Routesの概要、簡単なAPIの作成方法、クライアントからAPIを呼び出す方法を理解し、Next.jsでフルスタックアプリケーションを構築する第一歩を踏み出しましょう。

1. API Routesの概要

API Routesは、Next.jsアプリケーション内にAPIエンドポイントを作成するための機能です。pages/apiディレクトリ内にファイルを作成するだけで、簡単にAPIを作成できます。

サーバーレス関数の作成

API Routesは、サーバーレス関数として動作します。サーバーレス関数とは、サーバーのセットアップや管理が不要な関数のことです。リクエストに応じて自動的にスケールするため、スケーラビリティにも優れています。

APIエンドポイントの作成

API Routesを使って作成したAPIエンドポイントは、/api/*というパスでアクセスできます。例えば、pages/api/hello.tsというファイルを作成すると、/api/helloというAPIエンドポイントが作成されます。

2. 簡単なAPIを作成する

まずは、簡単なAPIを作成してみましょう。pages/apiディレクトリ内にhello.tsというファイルを作成し、以下のコードを記述します。

// pages/api/hello.ts

import type { NextApiRequest, NextApiResponse } from 'next';

type Data = {
  message: string;
};

export default function handler(
  req: NextApiRequest,
  res: NextApiResponse<Data>
) {
  res.status(200).json({ message: 'Hello from Next.js API Routes!' });
}

このコードは、/api/helloというAPIエンドポイントを作成し、{ message: 'Hello from Next.js API Routes!' }というJSONレスポンスを返します。

NextApiRequestとNextApiResponseは、それぞれリクエストとレスポンスを表す型です。handler関数は、リクエストを受け取ってレスポンスを返す、API Routesのメインとなる関数です。

res.status(200)は、HTTPステータスコードを200（OK）に設定します。res.json()は、JSONレスポンスを返します。

リクエストとレスポンスの処理

API Routesでは、reqオブジェクトを使ってリクエストの情報を取得できます。例えば、req.methodでHTTPメソッド（GET、POSTなど）、req.queryでクエリパラメータ、req.bodyでリクエストボディを取得できます。

// pages/api/greet.ts

import type { NextApiRequest, NextApiResponse } from 'next';

type Data = {
  greeting: string;
};

export default function handler(
  req: NextApiRequest,
  res: NextApiResponse<Data>
) {
  if (req.method === 'GET') {
    const { name = 'Guest' } = req.query;
    res.status(200).json({ greeting: `Hello, ${name}!` });
  } else {
    res.status(405).end(); // Method Not Allowed
  }
}

このAPIは、/api/greetにGETリクエストを送信すると、{ greeting: 'Hello, Guest!' }というレスポンスを返します。nameクエリパラメータを指定すると、{ greeting: 'Hello, [name]!' }というレスポンスを返します。

GET以外のリクエストが送信された場合は、res.status(405).end()で405（Method Not Allowed）エラーを返します。

データの取得と送信

API Routesを使って、データベースや外部APIからデータを取得したり、データを送信したりすることもできます。

例として、JSONPlaceholder APIからユーザーデータを取得して返すAPIを作成してみましょう。

// pages/api/users.ts

import type { NextApiRequest, NextApiResponse } from 'next';

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

type Data = {
  users: User[];
};

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse<Data>
) {
  const response = await fetch('https://jsonplaceholder.typicode.com/users');
  const users: User[] = await response.json();

  res.status(200).json({ users });
}

このAPIは、/api/usersにGETリクエストを送信すると、JSONPlaceholder APIから取得したユーザーデータの配列を返します。

3. クライアントからAPIを呼び出す

作成したAPIは、クライアントサイド（ページのコンポーネントなど）から呼び出すことができます。

fetchを使用したAPIリクエスト

fetch関数を使って、API Routesで作成したAPIにリクエストを送信してみましょう。

// pages/index.tsx

import { useState, useEffect } from 'react';

interface User {
  id: number;
  name: string;
  email: string;
}

const HomePage = () => {
  const [users, setUsers] = useState<User[]>([]);

  useEffect(() => {
    const fetchUsers = async () => {
      const res = await fetch('/api/users');
      const data = await res.json();
      setUsers(data.users);
    };

    fetchUsers();
  }, []);

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

export default HomePage;

このコードは、useEffectフックを使って、コンポーネントのマウント時に/api/users APIからユーザーデータを取得し、usersステートに設定しています。取得したユーザーデータは、リストとして表示されます。

データの取得と表示

上記の例では、fetch関数を使ってAPIからデータを取得し、useStateフックを使って状態を管理し、取得したデータを表示しています。

APIからデータを取得して表示する処理は、Next.jsアプリケーションでよく使われるパターンです。