---
createdAt: 2025-05-20
updatedAt: 2025-06-29
title: Next.js에서 i18n과 함께하는 정적 렌더링과 동적 렌더링
description: Next.js에서 i18n과 함께 정적 렌더링과 동적 렌더링을 사용하는 방법을 알아보세요.
keywords:
  - 정적
  - 동적
  - 렌더링
  - i18n
  - next.js
  - next-intl
  - intlayer
  - 프레임워크
  - 미들웨어
  - 구성
slugs:
  - frequent-questions
  - static-rendering
---

# Next.js에서 i18n과 함께하는 정적 렌더링과 동적 렌더링

## **next-intl**의 문제점

- **무슨 일이 발생하나요?**
  i18n 라우팅된 앱(`/en/…`, `/fr/…`)에서 `useTranslations`, `getTranslations` 또는 다른 next-intl 헬퍼를 *서버 컴포넌트 내부*에서 사용할 때, Next.js는 전체 경로를 **동적**으로 표시합니다. ([Next Intl][1])

- **왜 그런가요?**
  next-intl은 요청 전용 헤더(`x-next-intl-locale`)에서 현재 로케일을 `headers()`를 통해 조회합니다. `headers()`는 **동적 API**이기 때문에, 이를 사용하는 모든 컴포넌트는 정적 최적화를 잃게 됩니다. ([Next Intl][1], [Next.js][2])

- **공식 해결책 (보일러플레이트)**
  1. 지원하는 모든 로케일에 대해 `generateStaticParams`를 내보냅니다.
  2. `useTranslations`를 호출하기 _전에_ **모든** 레이아웃/페이지에서 `setRequestLocale(locale)`을 호출합니다. ([Next Intl][1])
     이렇게 하면 헤더 의존성은 제거되지만, 유지해야 할 추가 코드가 생기고 프로덕션에서 불안정한 API를 사용하게 됩니다.

## **intlayer**가 문제를 회피하는 방법

**설계 선택**

1. **경로 매개변수만 사용** – 로케일은 Next.js가 이미 모든 페이지에 전달하는 `[locale]` URL 세그먼트에서 가져옵니다.
2. **컴파일 타임 번들** – 번역은 일반 ES 모듈로 가져와서 트리 쉐이킹되고 빌드 시점에 포함됩니다.
3. **동적 API 없음** – `useT()`는 `headers()`나 `cookies()`가 아닌 React 컨텍스트에서 읽습니다.
4. **추가 설정 불필요** – 페이지가 `app/[locale]/` 아래에 있으면 Next.js가 로케일별로 하나의 HTML 파일을 자동으로 사전 렌더링합니다.
