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

2024-05-19 13:09에 생성2024-05-19 14:44에 수정

Query string (URL 뒤에 붙는 ?id=)Dynamic routes에 사용되는 params (/routes/[id])

기존 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.

https://nextjs.org/docs/app/building-your-application/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 객체와 별도로 제공된다.

안내

해당 글은 '도다 Aha!'에서 이전된 글입니다. 이전 글과 달라진 부분이 있을 수 있습니다.

태그

next.js

반응과 댓글 시스템은 Giscus에 의해 호스팅되며, 모든 대화는 GitHub에 저장됩니다.