nextjs
CHAPTER 27 / 34
읽기 약 2분
FUNCTION
Next.js 실전: 다국어 i18n
핵심 개념
Next.js에서 다국어를 구현합니다. middleware로 언어를 감지하고 [lang] 동적 라우트로 언어별 페이지를 제공합니다.
코드 분석
I18N
// app/[lang]/page.tsx
const dict = {
ko: { title: '코드를 해부하라' },
en: { title: 'Demolish the Code' },
ja: { title: 'コードを破壊せよ' },
}
export default function Page({
params: { lang }
}: {
params: { lang: 'ko' | 'en' | 'ja' }
}) {
return <h1>{dict[lang].title}</h1>
}AI 프롬프트
🤖 AI에게 잘 물어보는 법 — 모델·전략별 프롬프트
Claude
무료: Sonnet 4.6 / Pro $20/mo: Opus 4.6
이 Next.js 'Next.js 실전: 다국어 i18n' 코드에서 서버/클라이언트 경계·use client 누락·캐시 무효화 버그를 찾아서 수정해줘.
ChatGPT
무료: GPT-5.5 / Plus $20/mo: GPT-5.5 Pro
'Next.js 실전: 다국어 i18n'를 활용한 실전 페이지를 App Router + TypeScript + Server Actions로 만들어줘.
Gemini
무료: 2.5 Flash / Pro $19.99/mo: 3.1 Pro
이 Next.js 'Next.js 실전: 다국어 i18n' 사용 패턴이 빌드 크기와 LCP/INP/CLS에 미치는 영향을 분석하고 최적화 방안을 알려줘.
Grok
무료: Grok 4.1 / SuperGrok $30/mo
Next.js 'Next.js 실전: 다국어 i18n' vs Remix/Astro/SvelteKit의 동일 기능 구현을 2026년 기준으로 솔직하게 비교해줘.
⭐ 이것만 기억하세요
Next.js 실전: 다국어 i18n는 이 3가지만 확실히 잡으세요
1.텍스트를 하드코딩하면 다국어 지원 시 모든 컴포넌트를 언어별로 복제해야 합니다
2.locale 기반 라우팅([lang]/ 세그먼트) + 번역 파일(JSON) + 서버에서 로케일 감지로 다국어를 구현합니다
3.다음 챕터에서 Stripe를 연동한 결제 시스템을 구현합니다
공유하기
진행도 27 / 34