Next.js: API 라우트에서 '동적 서버 사용' 오류 해결하기
KUKJIN LEE • 1개월 전 작성
문제
[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를 구조화하는 방법을 고려해야 합니다.