Internationalization

Next.js Internationalization (i18n) 🌍

The Story: Your Website Learns Many Languages

Imagine you own a magical bookstore. Customers from all over the world visit your shop. Some speak English, others Spanish, some Japanese. Wouldn’t it be amazing if your books could automatically change their language based on who walks in?

That’s exactly what Next.js Internationalization does for your website!

🎭 The Big Picture: One Analogy to Rule Them All

Think of your Next.js app as a Smart Tour Guide at a world-famous museum.

• i18n Routing = The guide knows different walking paths for different languages
• Locale Detection = The guide listens to figure out which language you speak
• Language Switching = You can tap the guide’s shoulder and say “Switch to French!”

Let’s explore each one!

📍 Part 1: i18n Routing

What Is It?

i18n Routing means your website shows different URLs for different languages.

Without i18n:

mysite.com/about

With i18n:

mysite.com/en/about  ← English
mysite.com/es/about  ← Spanish
mysite.com/ja/about  ← Japanese

Why Does This Matter?

Just like different doors in a hotel lead to different rooms, different URL paths lead visitors to content in their language.

Setting It Up

In your next.config.js, you tell Next.js which languages you support:

// next.config.js
module.exports = {
  i18n: {
    locales: ['en', 'es', 'ja'],
    defaultLocale: 'en',
  },
}

What this means:

• locales = Languages you support (English, Spanish, Japanese)
• defaultLocale = The “home” language (English)

How Routing Works

graph TD
    A["User visits /about"] --> B{Which locale?}
    B -->|English| C["/en/about"]
    B -->|Spanish| D["/es/about"]
    B -->|Japanese| E["/ja/about"]

Accessing the Current Locale

Inside any page, you can check which language is active:

import { useRouter } from 'next/router'

function MyPage() {
  const router = useRouter()
  const { locale } = router

  return (
    <p>Current language: {locale}</p>
  )
}

🔍 Part 2: Locale Detection

What Is It?

Locale Detection is when your website guesses which language a visitor prefers—before they even ask!

How Does It Guess?

Like a clever detective, Next.js looks for clues:

1. Browser Settings - Your browser tells websites your preferred language
2. Accept-Language Header - A secret message sent with every web request
3. Cookies - If you visited before, Next.js remembers your choice

graph TD
    A["Visitor Arrives"] --> B["Check Cookie"]
    B -->|Found| C["Use Saved Language"]
    B -->|Not Found| D["Check Browser Header"]
    D --> E["Redirect to Detected Locale"]

Example: The Magic Redirect

A visitor from Spain opens mysite.com. Their browser says “I prefer Spanish!”

Next.js automatically sends them to mysite.com/es 🇪🇸

Enabling Detection

By default, Next.js does this automatically! But you can control it:

// next.config.js
module.exports = {
  i18n: {
    locales: ['en', 'es', 'ja'],
    defaultLocale: 'en',
    localeDetection: true, // on by default
  },
}

Set localeDetection: false if you want everyone to start at the default.

Reading Detection Info

import { useRouter } from 'next/router'

function Header() {
  const { locale, locales } = useRouter()

  console.log(locale)  // "es"
  console.log(locales) // ["en", "es", "ja"]
}

🔄 Part 3: Language Switching

What Is It?

Language Switching lets users change languages with a click. Like pressing a button to switch TV channels!

Building a Language Switcher

Here’s a simple dropdown that changes languages:

import { useRouter } from 'next/router'
import Link from 'next/link'

function LanguageSwitcher() {
  const router = useRouter()
  const { pathname, query, asPath } = router

  return (
    <div>
      <Link href={{ pathname, query }}
            as={asPath}
            locale="en">
        🇺🇸 English
      </Link>
      <Link href={{ pathname, query }}
            as={asPath}
            locale="es">
        🇪🇸 Español
      </Link>
      <Link href={{ pathname, query }}
            as={asPath}
            locale="ja">
        🇯🇵 日本語
      </Link>
    </div>
  )
}

How It Works

graph TD
    A["User on /en/products"] --> B["Clicks Spanish Flag"]
    B --> C["Next.js changes locale"]
    C --> D["User now on /es/products"]
    D --> E["Same page, new language!"]

Using router.push for Switching

You can also switch programmatically:

import { useRouter } from 'next/router'

function LanguageButton() {
  const router = useRouter()

  const switchToSpanish = () => {
    router.push(router.pathname, router.asPath, {
      locale: 'es'
    })
  }

  return (
    <button onClick={switchToSpanish}>
      Switch to Spanish
    </button>
  )
}

Remember the Choice (Cookie)

When users switch, Next.js sets a NEXT_LOCALE cookie. Next time they visit, they’ll see their chosen language!

🎯 Putting It All Together

Here’s how all three pieces connect:

graph TD
    A["Visitor Arrives"] --> B["Locale Detection"]
    B --> C["i18n Routing"]
    C --> D["Show Content in Detected Language"]
    D --> E["User Can Switch Languages"]
    E --> F["Cookie Saves Preference"]
    F --> G["Next Visit Remembers!"]

Complete Example

// next.config.js
module.exports = {
  i18n: {
    locales: ['en', 'es', 'ja'],
    defaultLocale: 'en',
    localeDetection: true,
  },
}

// pages/index.js
import { useRouter } from 'next/router'
import Link from 'next/link'

const messages = {
  en: { welcome: 'Welcome!' },
  es: { welcome: '¡Bienvenido!' },
  ja: { welcome: 'ようこそ！' },
}

export default function Home() {
  const { locale, locales } = useRouter()
  const t = messages[locale]

  return (
    <div>
      <h1>{t.welcome}</h1>

      {locales.map((loc) => (
        <Link key={loc} href="/" locale={loc}>
          {loc.toUpperCase()}
        </Link>
      ))}
    </div>
  )
}

🌟 Key Takeaways

🚀 You Did It!

You now understand how Next.js helps your website speak multiple languages:

1. ✅ Routes organize content by language
2. ✅ Detection welcomes visitors in their language
3. ✅ Switching gives users control

Your website is now a polyglot—it speaks many languages fluently!

Next time you build an app for users worldwide, you’ll know exactly how to make everyone feel at home. 🌍✨