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 객체와 별도로 제공된다.