ssr 환경에서 동적라우팅을 하여 params 정보를 받아오고 있었습니다
기존에는 잘 몰라서 'use client'로 useParams() 훅을 사용했는데 ssr 환경에서 사용해보고 싶어졌습니다
그런데 당시 밑에 에러를 주기 시작했어요
Error: Route "/stock/[stockId]" used params.stockId. params should be awaited before using its properties. Learn more: https://nextjs.org/docs/messages/sync-dynamic-apis
at StockPage (src/app/stock/[stockId]/page.tsx:8:26)Error: Route "/stock/[stockId]" used `params.stockId`. `params` should be awaited before using its properties.
즉,
params가 비동기(async) 객체로 바뀌었는데,
await를 사용하지 않아 발생한 문제였다
원인
Next.js의 최신 버전(App Router, 예: src/app/stock/[stockId]/page.tsx)에서는
라우트 파라미터(params)가 Promise로 전달돼요.
export default function StockPage({ params }: { params: { stockId: string } }) { console.log(params.stockId) ... }
수정 코드
export default async function StockPage({ params }: { params: Promise<{ stockId: string }> }) { const { stockId } = await params console.log(stockId) ... }
찾아보니
Next.js 14 이후부터 Dynamic Route Params가 서버 컴포넌트 렌더링을 위해
Promise로 전달되도록 개선되었기 때문이에요.
이는 라우트 간 비동기 데이터 페칭 최적화를 위한 변경이다
참고 자료: https://nextjs.org/docs/app/api-reference/file-conventions/page?utm_source=chatgpt.com
해결법
항목예전 방식새로운 방식
| params 타입 | { stockId: string } | Promise<{ stockId: string }> |
| 접근 방법 | params.stockId | (await params).stockId or const { stockId } = await params |