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つのパラメータを取ります。
req：IncomingMessageインスタンスに似たHTTPリクエストオブジェクトres：ServerResponseインスタンスに似た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エラーを返します。