NEXT.JSのPage RouterとApp RouterのAPIの実装方法の違い

Page Router (pages/api)

// pages/api/repo.ts
import type { NextApiRequest, NextApiResponse } from 'next'
import { fetchRepoData } from '@/utils/api'

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  if (req.method !== 'GET') {
    return res.status(405).json({ message: 'Method not allowed' })
  }

  try {
    const repoUrl = req.query.url as string
    const data = await fetchRepoData(repoUrl)
    res.status(200).json(data)
  } catch (error) {
    res.status(500).json({ message: 'Error fetching repo data' })
  }
}

App Router (app/api)

// app/api/repo/route.ts
import { NextResponse } from 'next/server'
import { fetchRepoData } from '@/utils/api'

export async function GET(request: Request) {
  try {
    const { searchParams } = new URL(request.url)
    const repoUrl = searchParams.get('url')
    
    if (!repoUrl) {
      return NextResponse.json(
        { message: 'Repository URL is required' },
        { status: 400 }
      )
    }

    const data = await fetchRepoData(repoUrl)
    return NextResponse.json(data)
  } catch (error) {
    return NextResponse.json(
      { message: 'Error fetching repo data' },
      { status: 500 }
    )
  }
}

主な違いは以下の通りです

1. ファイル構造

   • Page Router: /pages/api/ ディレクトリ内にAPIルートを配置
   • App Router: /app/api/ ディレクトリ内に route.ts ファイルとして配置

2. リクエスト/レスポンスの扱い

   • Page Router: NextApiRequest と NextApiResponse オブジェクトを使用
   • App Router: Web標準の Request オブジェクトと NextResponse を使用

3. HTTPメソッドの定義

   • Page Router: 単一のハンドラー関数内でメソッドを分岐
   • App Router: HTTPメソッドごとに別々の関数をエクスポート（GET, POST, PUT, DELETE等）

4. クエリパラメータの取得

   • Page Router: req.query から直接取得
   • App Router: URL オブジェクトの searchParams を使用

5. レスポンスの返し方

   • Page Router: res.status().json() メソッドを使用
   • App Router: NextResponse.json() を使用

これらのAPIエンドポイントは、以下のように呼び出すことができます

// クライアントサイドでの呼び出し
const response = await fetch('/api/repo?url=https://github.com/user/repo')
const data = await response.json()