この記事は、Next.jsのApp RouterでREST APIを作る時のTypeScript型定義に関するTipsを紹介する、「Next.js Advent Calendar 2024」6日目の記事です。

App RouterでREST APIを作成する

/:line/:dayTypeのような、パスパラメータを受け取るAPIを作る場合を想像しましょう。Page Routerなどで開発されたことがある方は、このような型定義を作られるかと思います。

export async function GET(
  request: NextRequest,
  context: { params: { line: string; dayType: string; } }
): Promise<NextResponse> {
  try {
    const {
        line,
        dayType,
    } = context.params;

しかしこの型定義ですと、v15以降ではビルドエラーが発生します。

Failed to compile.

src/app/api/trains/[line]/[dayType]/route.ts
Type error: Route "src/app/api/trains/[line]/[dayType]/route.ts" has an invalid "GET" export:
  Type "{ params: { line: string; dayType: string; }; }" is not a valid type for the function's second argument.

context.paramsはPromiseになっている

ビルドエラーが起きない書き方はこちらです。パスパラメータのオブジェクト型がPromiseになっています。それに伴い、値を取得する際もconst { line } = context.paramsからconst { line } = await context.paramsと変わっています。

export async function GET(
  request: NextRequest,
  context: { params: Promise<{ line: string; dayType: string; }> }
): Promise<NextResponse> {
  try {
    const {
        line,
        dayType,
    } = await context.params;

まとめ

一度違いを理解してしまえばなんということはないのですが、Page RouterやRemixに慣れているとちょっと戸惑うかなと思います。自分もおそらく何回かこのミスをやらかす予感がしているため、こうやって覚書として記録します。