Next.jsのAPI Routes

API Routesの使い方

Next.jsのAPI Routesは、APIエンドポイントを簡単に作成できる機能です。

API Routesを使用すると、サーバーサイドの処理をNext.jsアプリケーション内で直接行うことができ、Node.jsの環境でリクエストを処理し、レスポンスを返すことができます。

API Routesはpages/apiディレクトリ内にファイルを作成することで実装します。

これにより、特別なサーバー設定なしでAPIを簡単に構築できます。

シンプルなAPIの作成方法

pages/apiディレクトリ内にJavaScriptまたはTypeScriptファイルを作成し、そのファイル内でリクエストとレスポンスの処理を行います。

//pages/api/hello.ts

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

export default function handler(
  req: NextApiRequest,
	res: NextApiResponse
) {
res.status(200).json({ message: 'Hello, world!' });
}json({ message: 'Hello, world!' });
}

/api/helloというエンドポイントが定義され、GETリクエストを受け取ると、{"message": "Hello, world!"}というJSONレスポンスが返されます。

外部APIとの連携

外部APIとの連携を行う場合は、API Routes内で外部APIへのリクエストを行い、その結果をクライアントに返すことができます。

// pages/api/user.ts

import type { NextApiRequest, NextApiResponse } from 'next';
import fetch from 'node-fetch';

export default async function handler(
   req: NextApiRequest,
	 res: NextApiResponse
) {
const externalApiUrl = 'https://api.example.com/user';

try {
    const response = await fetch(externalApiUrl);
    const data = await response.json();
    res.status(200).json(data);
} catch (error) {
    res.status(500).json({ message: 'Error fetching data' });
  }
 }

/api/userというエンドポイントが外部のAPIからデータを取得し、そのデータをクライアントに返します。

まとめ

Next.jsのAPI Routesは、アプリケーション内で簡単にAPIを作成できる強力な機能です。

シンプルなAPIエンドポイントの作成や、外部APIとの連携を通じて、サーバーサイドでのデータ処理やAPIリクエストの処理を行うことができます。

これにより、フロントエンドとサーバーサイドの処理を同一のコードベースで管理し、効率的な開発が可能となります。