Next.js13で基本的なAPI実装における12系からの変更点

Next.jsが13になってApp Routerが採用されてからAPIの実装にも処理の変化がいくつかあります。
基本的なNext.jsでのAPIの実装する上でバージョン12から変更になった処理を見ていきます。

ルーティング

App Routerが採用されてルーティングはroute.tsを作成するルールに変わりました。
これまではファイル名やindex.tsの2つのパターンを選択することもができましたが、route.tsだけになって統一感が出ました。

Next.js13以降。

app/api/users/route.ts
app/api/users[id]/route.ts

Next.js12まで。

pages/api/users/index.ts // or pages/api/users.ts
pages/api/users/[id]/index.ts // or pages/api/users/[id].ts

リクエストメソッド

Next.js13に変更されてメソッドに関わらず関数が1つという状態から脱却しました。
これまではreq.methodで処理を分けるしかありませんでしたが、Next.js 13からはメソッドごとに関数を定義できるようになりました。

Next.js13以降。

export default async function GET() {}
export default async function POST() {}

Next.js12まで。

export default function handler(req, res) {
  if (req.method === 'GET') {
    // GET Method
  }

  if (req.method === 'POST') {
    // POST Method
  }
}

params

URLのパラメーターにアクセスする方法はNext.js 13になっても大きな変化はありません。 これまでは第2引数がresponseとして定義されていたものが、responseという扱いではなくなりました。
ですが、params自体へのアクセス方法はオブジェクト直下にあることを踏まえると使い心地は変わりません。

Next.js13以降。

import { NextRequest } from 'next/server'

export async function GET(req: NextRequest, { params: { id: string } }) {
  const id = params.id
}

Next.js12まで。

export default function handler(req, res) {
  const id = req.params.id
}

リクエストボディ

Next.js 13になってリクエストボディーからbodyを取得することに変化はないものの、扱いが少し変わりました。
async function内でawaitを使ってreq.json()でbodyが取得できるようになりました。

これまではrequestオブジェクト直下にbodyがあったことを踏まえると、使い心地は大きく変化ないとも言えますがjson()がawaitである点は注意する必要があります。

Next.js13以降。

export default async function POST(req) {
  const body = await req.json()
}

Next.js12まで。

export default function handler(req, res) {
  const body = req.body
}

Headers

認証機能を実装する上でよく使うことにもあるヘッダー情報ですが、Next.js13では取得方法に変化がありました。

next/headersからheaders関数を読み込呼びだすことで、getを使い任意のヘッダー情報を取得できるようになっています。

Next.js13以降。

import { headers } from 'next/headers'

export default function GET() {
  const headerList = headers()
  const authorization = headerList.get('Authorization')
}

Next.js12以降。

export default function handler(req, res) {
  const headers = req.headers
  const authorization = headers['Authorization']
}

レスポンスとステータスコード

APIを実装する上で必須なのがレスポンスの返却です。
Next.js13になってレスポンス方法が変わりました。

これまではresponseオブジェクトに繋げてステータスコードやデータを指定できましたが、next/serverから読み込んだNextResponseを使用する方法になっています。

これまでの繋げて書くスタイルよりもオプション的にステータスコードを指定できたほうがスッキリわかりやすいように感じました。

Next.js13以降。

import NextResponse from 'next/server'

NextResponse.json(null, { status: 500 })

Next.js12まで。

export default function handler(req, res) {
  res.status(200).json(null)
}

APIの実装でもNext.js13は変化が多い

Next.js13はApp Routerの導入、React Server Components(RSC)の導入などフロント側の変更点が伝えられることは多いです。 ですがAPIの実装においても結構変化がありました。

今回Next.js13でAPIを実装するにあたり、12系からの変化で戸惑ったところを紹介しました。

紹介した部分はAPI実装においては基本的な機能であるため、この記事がこれからNext.js13でAPI実装をする人のためになれば幸いです。