Next.jsでのAPIルートの作成: 独自のAPIを簡単に構築

Next.js フロントエンド
  1. APIルートとは
  2. Next.jsでのAPIルートの作成方法
  3. パラメータやクエリを活用したAPIルート設定
  4. 非同期処理でのAPIルート利用
  5. セキュリティ対策としてのCORS設定
  6. 最後に

1. APIルートとは

APIルートとは、Webアプリケーションで外部システムと情報を共有するためのエンドポイントのことです。Next.jsでは、APIルートを作成することで独自のAPIを簡単に構築できる機能が備わっています。これにより、フロントエンドとバックエンドのやり取りが簡素化されます。

2. Next.jsでのAPIルートの作成方法

Next.jsにはAPIルートを作成するための専用ディレクトリpages/apiが用意されています。ここに関数をエクスポートするファイルを設置すれば、自動でAPIルートとして扱われます。

// pages/api/hello.js
export default function handler(req, res) {
  res.status(200).json({ text: 'Hello' });
}

上記の例では、/api/helloにアクセスすることで、JSONレスポンスを返すAPIルートが作成されます。

3. パラメータやクエリを活用したAPIルート設定

APIルートでは、URLパラメーターやクエリを活用することができます。

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

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

上記の例では、/api/user/1のようなURLでアクセスすると、{ "id": "1" }のようなJSONレスポンスが返ります。

4. 非同期処理でのAPIルート利用

APIルートでは、非同期処理を行うことも可能です。例えば、外部APIとの通信やデータベース操作などです。

// pages/api/users.js
import axios from 'axios';

export default async function handler(req, res) {
  try {
    const response = await axios.get('https://jsonplaceholder.typicode.com/users');

    res.status(200).json(response.data);
  } catch (error) {
    res.status(500).json({ error: 'Internal Server Error' });
  }
}

5. セキュリティ対策としてのCORS設定

APIルートを適切に設定することで、他のオリジンからのアクセスを制限することができます。

// utils/cors.js 
import Cors from 'cors';
import initMiddleware from './init-middleware';

const cors = initMiddleware(
  Cors({
    methods: ['GET', 'POST', 'OPTIONS'],
    origin: 'https://example.com', // Or your desired domain
  })
);

export default cors;

// pages/api/user.js
import cors from '../../utils/cors';

export default async function handler(req, res) {
  await cors(req, res);

  res.status(200).json({ text: 'Hello from the APIRoute' });
}

これにより、指定されたオリジンからのアクセスのみを許可することができます。

6. 最後に

この記事では、Next.jsでのAPIルートの作成方法や活用方法について解説しました。独自のAPIを簡単に構築することができるNext.jsを活用して、効率的な開発を行いましょう。