[Next.js] params 사용 시 에러 (React.use() 로 params unwrap 하세요)

A param property was accessed directly with `params.id`. `params` is now a Promise and should be unwrapped with `React.use()` before accessing properties of the underlying params object. In this version of Next.js direct access to param properties is still supported to facilitate migration but in a future version you will be required to unwrap `params` with `React.use()`.

최신 버전(15.1.6)의 Next.js를 사용하던 도중, 위와 같은 에러메세지가 떴다.
에러를 읽어보면 현재 버전에서는 params을 사용할 때, React.use()를 사용해서 params을 unwrap하라고 한다.

아마, next/navigation 라이브러리를 사용하게 된다면 useParams 훅으로 간단하게 에러가 없이 사용할 수 있을 것 같다.

• 해결 방법

  • import { use } from "react";를 임포트 해온 후, 컴포넌트 props 를 아래 타입으로 선언한 다음 구조분해할당을 통해 params 를 사용하면 된다.

    ({params,}: {params: Promise<{ id: string }>;})

• 기존 코드

  "use client";
  
  export default function DashboardPage({ params }: { params: { id: string } }) {
  
  return (
    <div>
      다이나믹라우트 : {params.id}
      <button type="submit" onClick={handleSubmit}>
        전송
      </button>
    </div>
  );
  }

• 바뀐 코드

  "use client";
  import { use } from "react";
  
  export default function DashboardPage({params,}: { params: Promise<{ id: string }>;}) {
  
  const { id } = use(params);
  
  return (
    <div>
      다이나믹라우트 : {id}
      <button type="submit" >
        전송
      </button>
    </div>
  );
  }
  

출처 : https://github.com/vercel/next.js/issues/71690