🔗

Next.jsのApp RouterでURLに含まれるパラメータを取得する

2023/12/07に公開

Next.js

App Router

tech

はじめに

App Routerで簡単なAPIを作る時にURLのパラメータを取得する情報が混在していて詰まったのでまとめておく。
なお、APIのルーティングのハンドリングについてはPage Routerの場合はAPI Routesという機能として提供されていたけど、App Routerの場合はRoute Handlersという機能として提供されているので、読むドキュメントを間違えないように。間違えていたので詰まった。斜め読みは良くないですね。

Route handlersの公式ドキュメント

URLに含まれるパラメータを取得する方法は二つある

これも正しい情報に辿りつきにくいポイントでした。
具体的には

Dynamic Routes Segment
URL Query Parameter

です。
それぞれ解説します。

Dynamic Routes Segment

api/[id]/userや、api/users/[slug] の形でアクセスされる
ディレクトリの名前を[id]としてある場合に使える

この場合は下記のコードのように、ハンドラの関数の引数でparamsオブジェクトを受け取れるようにします。

api/users/[id]/route.ts

//** find user by id */
export async function GET(
  req: NextRequest,
  { params }: { params: { id: string } },
) {
  const id = params.id;
  if (!id) {
    return new NextResponse("User ID is required", { status: 400 });
  }
  const user = await prisma.user.findUnique({
      where: { id: Number(id) },
  });
}

URL Query Parameters

/api/search?query=hello の形でアクセスされる

api/search/route.ts

import { type NextRequest } from 'next/server'

// Requestオブジェクトを拡張してあるNextRequestオブジェクトとして受け取るとパース機能がついてくる
export function GET(request: NextRequest) {
  const searchParams = request.nextUrl.searchParams
  const query = searchParams.get('query') // => "hello"
}

終わりに

設計時点で決まったパラメータを受け取りたい場合はDynamic Routes Segmentを、複雑な組み合わせを使いたい場合はURL Query Parametersを使うと良いのかもしれませんね。新しい機能を使う時はドキュメントを斜め読みしないことです。