跳到主要内容

Next.js Internationalization (i18n)

i18n = support multiple languages/locales

What is i18n?​

"Internationalization = multi-language support"

i18n (internationalization) enables applications to support multiple languages and locales.

"i18n is the process of designing applications to support multiple languages and locales, making them accessible to global audiences."

Next.js i18n Setup​

next.config.js configuration

// next.config.js
module.exports = {
  i18n: {
    locales: ["en", "fr", "es"],
    defaultLocale: "en",
  },
};

"Next.js i18n is configured in next.config.js with locales array and default locale."

Locale Detection​

Automatic or manual

Next.js can:

  • Detect locale from Accept-Language header
  • Use subdomain (fr.example.com)
  • Use path prefix (/fr/about)
  • Manual selection

"Next.js detects locale automatically from headers or uses subdomain/path-based routing for different locales."

Translation Files​

JSON files per locale

locales/
  en.json
  fr.json
  es.json
// en.json
{
  "welcome": "Welcome",
  "hello": "Hello, {name}"
}

"Translation files (JSON) store translations for each locale, typically organized by locale code."

Using Translations​

useTranslation hook

import { useTranslation } from "next-i18next";

function Component() {
  const { t } = useTranslation();
  return <h1>{t("welcome")}</h1>;
}

"Use translation hooks like useTranslation to access translated strings in components."

Dynamic Routes​

Locale in URL path

// /fr/about (French)
// /en/about (English)

export async function getStaticPaths() {
  return {
    paths: [
      { params: { slug: "about" }, locale: "en" },
      { params: { slug: "about" }, locale: "fr" },
    ],
  };
}

"Next.js includes locale in URL paths, enabling locale-specific static generation."

Language Switching​

useRouter for locale change

import { useRouter } from "next/router";

function LanguageSwitcher() {
  const router = useRouter();

  const changeLanguage = (locale) => {
    router.push(router.pathname, router.asPath, { locale });
  };

  return <button onClick={() => changeLanguage("fr")}>Français</button>;
}

"Use Next.js router to switch locales, maintaining current path while changing language."

Best Practices​

✅ Use locale-specific routing ✅ Store translations in JSON files ✅ Handle pluralization ✅ Format dates/numbers by locale ✅ Test all locales ✅ Provide language switcher ❌ Don't hardcode strings ❌ Don't forget RTL languages

9️⃣ Common Libraries​

next-i18next · next-intl

  • next-i18next: Popular i18n library
  • next-intl: Modern alternative
  • Built-in Next.js i18n: Basic support

"Popular i18n libraries for Next.js include next-i18next and next-intl, or use built-in i18n support."

SEO Considerations​

hreflang tags for search engines

<link rel="alternate" hreflang="en" href="/en/page" />
<link rel="alternate" hreflang="fr" href="/fr/page" />

"Use hreflang tags to help search engines understand language versions of pages."

"Next.js i18n supports multiple languages through next.config.js configuration with locales. It detects locale from headers or uses path/subdomain routing. Translation files (JSON) store translations per locale. Use translation hooks to access strings. Router enables language switching. Include hreflang tags for SEO."

🧠 Ultra-Short Cheat Sheet​

Multi-language support
next.config.js configuration
Locale detection
Translation files (JSON)
useTranslation hook
Locale in URLs
Language switching
hreflang for SEO