Next.js: API 라우트에서 '동적 서버 사용' 오류 해결하기

문제

[Error]: Dynamic server usage: Page couldn't be rendered statically because it used `request.url`. See more info here: https://nextjs.org/docs/messages/dynamic-server-error

Next.js가 정적으로 생성하려고 시도하는 API 라우트에서 request.url에 접근하려고 할 때 발생합니다.

 

원인

Next.js는 성능 향상을 위해 가능한 많은 콘텐츠를 정적으로 생성하려고 합니다. 그러나 API 라우트에서 request.url을 사용하면 URL이 런타임에만 알 수 있기 때문에 이 정적 생성이 불가능해집니다.

 

해결 방법

이 문제를 해결하기 위한 두 가지 주요 접근 방식이 있습니다.

 

1. 동적 렌더링 강제하기

API 라우트가 동적이어야 하고 정적으로 생성될 수 없는 경우, Next.js에게 항상 동적으로 렌더링하도록 지시할 수 있습니다.

export const dynamic = 'force-dynamic'

export async function GET(request) {
  // 기존 코드
}

Next.js가 라우트를 항상 동적으로 렌더링하여 정적 생성 시도를 피할 수 있습니다.

 

2. request.nextUrl 사용하기

Next.js 13은 동적 서버 사용 오류를 트리거하지 않고 안전하게 사용할 수 있는 파싱된 URL 객체인 request.nextUrl을 제공합니다.

 

※ 동적 렌더링을 강제하는 것이 이 문제를 해결할 수 있지만, 애플리케이션의 성능에 영향을 줄 수 있습니다. 가능한 정적 생성을 허용하도록 API를 구조화하는 방법을 고려해야 합니다.