Next.js의 Dynamic API 처리

Next.js 에서 다이나믹 API를 처리할 때, params를 비동기로 처리해야 한다. 이 부분에서 나는 정말 많은 빌드를 실패했다. 이 부분에서 많은 사람들이 빌드에 실패할 수 있을 것 같다. 

공식문서

링크는 밑의 링크를 참고하라.

https://nextjs.org/docs/messages/sync-dynamic-apis

Dynamic APIs are Asynchronous

---

내 코드

import { Suspense } from 'react';
import MovieInfo, { getMovie } from '../../../../../components/movie-info';
import MovieVideos from '../../../../../components/movie-videos';

interface IParams {
  params: Promise<{ id: string }>;
}

export async function generateMetadata({ params }: IParams) {
  const { id } = await params;
  const movie = await getMovie(id);
  return {
    title: movie.title,
  };
}

export default async function MovieDetailPage(props: IParams) {
  const { id } = await props.params;
  return (
    <div>
      <Suspense fallback={<h1>Loading movie info</h1>}>
        <MovieInfo id={id} />
      </Suspense>
      <Suspense fallback={<h1>Loading movie videos</h1>}>
        <MovieVideos id={id} />
      </Suspense>
    </div>
  );
}

export const runtime = 'edge';

예시로 나의 코드를 올려두었다.

잘 보면, interface를 선언한 이후, params를 선언, 이후 Promise를 작성할 때의 코드가 기존 Next.js의 버전과 살짝 다르다.

이후, params를 할당 할 때, id를 await로 비동기 처리를 한다. 따로 구조를 할당해서 가져오는 식이 아니다.

(비동기 처리 때문에 계속 빌드에 실패했다. ㅠㅠ)