Next.js 정적 내보내기 이해하기

Next.js는 완전히 정적인 웹사이트를 생성하는 강력한 방법을 제공합니다. next.config.js에 output: 'export'를 설정하거나(export const dynamic = 'error'로 강제 실행), 모든 페이지가 빌드 시 미리 렌더링되도록 보장합니다.

왜 정적 내보내기인가?

1. 성능: 정적 HTML 파일이 즉시 로드됩니다.
2. 보안: 런타임에 데이터베이스나 서버 논리가 노출되지 않습니다.
3. 호스팅: 어디에나 배포할 수 있습니다(Cloudflare Pages, GitHub Pages, Vercel, S3).

구성 예시

다음은 정적으로 내보낸 페이지를 구성하는 방법입니다.

// app/page.tsx
export const dynamic = 'error';

export default function Home() {
  return <h1>Hello, Static World!</h1>;
}

dynamic = 'error' 설정에 유의하십시오. 트리의 어떤 구성 요소라도 요청 시 데이터(예: 검색 매개변수 또는 쿠키)를 읽으려고 시도하면 동적 렌더링으로 폴백하는 대신 빌드가 즉시 실패합니다. 이는 성능 보장을 유지하는 데 매우 중요합니다.