💡Aha!

Next.js API routes에서 params, query 받아오기

기존 Pages Router의 경우 API Routes의 request 객체에서 모든 정보에 접근할 수 있었다. 하지만 App Router에서는 Web API 표준을 따르게 되어, 기존에 request 객체에서 접근 가능했던 요소들도 Web API 표준에 따라 가져오게 되어, 글을 작성한다.

Query string (URL 뒤에 붙는 ?id=)

Pages router:

export default function handler(
  req: NextApiRequest,
  res: NextApiResponse<ResponseData>
) {
	const { id } = req.query;
}

App router:

import { type NextRequest } from 'next/server'

export function GET(request: NextRequest) {
  const searchParams = request.nextUrl.searchParams
  const id = searchParams.get('id') // /?id=
}

Web API 표준 타입인 Request에는 Next.js에서 제공하는 nextUrl 같은 일부 편의 객체들이 존재하지 않아, NextRequest를 사용해주었다. NextRequest에 대해 더 알고 싶다면 문서 참고.

Dynamic routes에 사용되는 params (/routes/[id])

Routing: Dynamic Routes
Dynamic Routes can be used to programmatically generate route segments from dynamic data.
Routing: Dynamic Routes
https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes
Routing: Dynamic Routes

Pages router:

export default function handler(
  req: NextApiRequest,
  res: NextApiResponse<ResponseData>
) {
	const { id } = req.query;
}

특이하게, request.query 객체를 Query string과 공유해서 사용한다. 개발 시 Dynamic params 이름과 Query string 이름을 같게 하면 안될 듯 싶다.

App router:

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

Request 객체와 별도로 제공된다.

2024 Dohyun Jung.
Made with ☕️.