---

name: i18n-setup
description: Full i18n system for Next.js applications

---

Multi-Language i18n Setup

Add 20+ languages to your Next.js app in minutes.

Architecture

middleware.ts          → Language detection + routing
lib/i18n.ts           → Translation keys + types
lib/i18n-utils.ts     → localePath(), getLang(), formatDate()
contexts/LangContext   → Client-side language state
app/[lang]/layout.tsx  → Lang validation + dir (RTL)

Features

• URL-based routing: /de/blog, /fr/pricing
• Default language without prefix: /blog (English)
• 301 redirect: /en/blog → /blog (canonical)
• RTL support for Arabic and Hebrew
• SEO: hreflang tags on all pages
• SEO: language-specific sitemap entries
• Currency formatting per locale
• Date/time localization
• Pluralization rules
• Lazy-loaded translation files

Translation Structure

type Translations = {
  nav: { home: string; blog: string; pricing: string };
  hero: { title: string; subtitle: string; cta: string };
  common: { loading: string; error: string; save: string };
  // ... 50+ keys
};

Supported Languages

EN, DE, FR, ES, IT, PT, NL, PL, RU, UK, CS, SK, RO, SV, FI, EL, TR, AR, HI, KO, ZH, JA

Quick Start

1. Copy the template files into your project
2. Add your translation keys
3. Wrap your app with LangProvider
4. Use t.key in components