[Frontend] Next.js 15 버전 params 에러

1. 개발 개요

cursor ai에 익숙해지기 위해 사이드 프로젝트의 일환으로 블로그를 만들던 중 Next.js로 프론트엔드를 구성했는데 아래와 같은 에러를 보았다. 보아하니 블로그 상세 페이지 즉,  id를 params로 받아오는 곳의 타입 문제가 발생했는데 예전에 Next.js를 사용할 때와 동일한 코드와 로직이였는데 pwa 도입 후 테스트를 위해 build 하던 도중 발생한 에러였다. 

한 번도 본 적이 없던 에러라 구글링을 해보니 Next.js 15버전부터 params와 searchParams의 접근 방식이 바뀌었다고 한다.

Type error: Type '{ params: { id: string; }; }' does not satisfy the constraint 'PageProps'.
  Types of property 'params' are incompatible.
    Type '{ id: string; }' is missing the following properties from type 'Promise<any>': then, catch, finally, [Symbol.toStringTag]

  32 |
  33 | // Check the prop type of the entry function
> 34 | checkFields<Diff<PageProps, FirstArg<TEntry['default']>, 'default'>>()
     |                             ^
  35 |
  36 | // Check the arguments and return type of the generateMetadata function
  37 | if ('generateMetadata' in entry) {
   Linting and checking validity of types  . ELIFECYCLE  Command failed with exit code 1.

 

2. 기존 코드

export default async function BlogPost({ params }: { params: {id : string } }) {
  const post = getPost(params.id)
  ...
  }

 

기존에 params에 접근하기 위한 코드는 위와 같았다. params의 id 값을 받아와서 해당 게시글을 불러오는 구조인데 이와 같이 하니 위와 같은 에러 코드가 뜨는 것이다. 에러를 잘 보아하니  Promise<any>가 누락되었다는 점이다. 

 

3. Next.js 15 버전 이후 업데이트 사항

1) Next.js 15 버전 이후 params, searchParams 는 비동기 방식으로 변경이 되었다. 그동안은 동기 방식으로 접근했으나 15 버전 이후는 async / await 등을 통해 비동기 방식으로 가져와야 한다.

 

4. 업데이트 코드 

export default async function BlogPost({ params }: { params: Promise<{ id: string }> }) {
  const post = getPost((await params).id)
  ...
}

 

위와 같이 비동기 방식으로 가지고 오니 문제가 해결이 되었다.

리액트만 다루다 Next.js를 오랜만에 다루니 실수 했나 했던 문제였는데 새롭게 업데이트된 부분이여서 업데이트도 지속적으로 따라가야함을 배웠다.

 

출처 : https://velog.io/@hyewonny2327/nextjs15params

NEXT.JS 15 에서 Params 접근하기