SEの部屋

Next.jsでAPI Routesを使用方法と注意点

Next.jsにおけるAPI Routesの使用

Next.jsでは、API Routesを使用して独自のAPIエンドポイントを作成することが可能です。これにより、Next.jsアプリケーション内から直接HTTPリクエスト(GET、POST、PUT、DELETEなど)を処理できます。TypeScriptを使用する場合、まず型定義を適切に設定することが大切です。

API Routeの作成

API Routeを作成するためには、まずpages/apiディレクトリ内に.tsまたは.tsxファイルを作成します。ファイル名とパスがそのままURLのエンドポイントとして使用されます。
例えば、pages/api/hello.tsというファイルを作成すれば、そのエンドポイントは/api/helloとなります。

API Routeのハンドラ関数

API Routeファイル内には、リクエストを処理するハンドラ関数をエクスポートします。この関数は、以下の2つのパラメータを取ります。

  1. reqIncomingMessageインスタンスに似たHTTPリクエストオブジェクト
  2. resServerResponseインスタンスに似たHTTPレスポンスオブジェクト

これらのオブジェクトは、NextApiRequestおよびNextApiResponseという型を持つので、TypeScriptで適切に型定義できます。
以下に、API Routeを作成する基本的なコードスニペットを示します。

import type { NextApiRequest, NextApiResponse } from 'next'

export default function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  res.status(200).json({ name: 'John Doe' })
}

上記のコードは、GETリクエストが/api/helloに対して行われると、ステータスコード200と共にJSONレスポンスを返します。

リクエストメソッドの処理

req.methodを使用することで、異なるHTTPメソッドを処理することができます。以下に、GETとPOSTメソッドをそれぞれ処理する例を示します。

import type { NextApiRequest, NextApiResponse } from 'next'


export default function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  if (req.method === 'GET') {
    res.status(200).json({ name: 'John Doe' })
  } else if (req.method === 'POST') {
    // リクエストボディからデータを取得
    const { name } = req.body
    res.status(200).json({ yourName: name })
  } else {
    // その他のHTTPメソッドに対する処理
    res.setHeader('Allow', ['GET', 'POST'])
    res.status(405).end(`Method ${req.method} Not Allowed`)
  }
}

上記のコードでは、GETリクエストとPOSTリクエストを別々に処理し、それ以外のメソッドに対しては405エラーを返します。