💡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])

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 ☕️.