국제화(i18n) — 다국어 사이트 구축
📋 실습 안내
✏️ CODE EDITOR (JSX)
▶ 실행 버튼을 눌러 코드를 테스트하세요.
👁️ 내 미리보기
내 코드 실행 결과
🎯 완성 미리보기
목표
위 에디터 코드를 수정해서 이 결과물과 똑같이 만들어보세요!
💡 TODO 주석을 채워서 위 결과물처럼 동작하게 만들어보세요
🤖 AI 선생님에게 질문하기
이번 강의 전용
▼
선생님이 답변 중이에요...
⚠️ 학습 관련 질문만 답변합니다. 관련 없는 질문은 자동으로 학습으로 유도됩니다.
Q1. Next.js App Router에서 다국어 라우팅을 구현하는 권장 방법은?
💡 App Router에서는 pages/[lang]/ 대신 app/[lang]/ 동적 세그먼트를 사용하고, middleware.ts에서 Accept-Language 헤더를 분석하여 자동 리다이렉션을 처리하는 것이 권장 방법입니다.
Q2. getDictionary 함수 파일 상단에 `import "server-only"`를 추가하는 이유는?
💡 server-only 패키지를 import하면 클라이언트 컴포넌트에서 해당 모듈을 import할 경우 빌드 에러가 발생합니다. 이를 통해 번역 파일(모든 언어 포함)이 클라이언트 번들에 포함되는 것을 방지할 수 있습니다.
Q3. 날짜를 로케일에 맞게 포맷하는 올바른 방법은?
💡 Intl.DateTimeFormat은 브라우저/Node.js 내장 API로 별도 라이브러리 없이 로케일에 맞는 날짜 포맷을 제공합니다. ko-KR은 "2024년 1월 15일", en-US는 "January 15, 2024"처럼 자동 변환됩니다.
Q4. SEO를 위해 다국어 페이지에 설정해야 하는 메타데이터는?
💡 hreflang 속성은 검색엔진에게 동일 콘텐츠의 언어별 대체 URL을 알려줍니다. alternates.languages에 { "ko-KR": "/ko", "en-US": "/en" }를 설정하면 Next.js가 자동으로 hreflang 링크 태그를 생성합니다.
Q5. 클라이언트 컴포넌트에서 번역을 사용하는 올바른 방법은?
💡 getDictionary는 server-only 함수이므로 클라이언트 컴포넌트에서 직접 사용할 수 없습니다. 부모 서버 컴포넌트에서 번역 객체를 가져와 prop으로 전달하거나, next-intl 같은 라이브러리를 사용하는 것이 올바른 방법입니다.
😅
아쉽네요!
점수: 0점 — 70점 이상이 되어야 통과합니다.