Understanding Internationalization (i18n) in Next.js

Internationalization, often abbreviated as i18n, is the process of designing and developing software applications that can be adapted to different languages and regions. Next.js, a popular React framework, provides built-in support for internationalization, making it easy to create multilingual web applications. In this article, we'll explore how Next.js supports internationalization (i18n) and provide detailed explanations with code examples.

How Next.js Supports Internationalization (i18n)

Next.js offers comprehensive support for internationalization through its built-in i18n features. These features enable developers to create websites that can be translated into multiple languages, handle language detection, and provide localized content based on the user's preferred language. Let's delve into the key aspects of Next.js internationalization and how they work.

Built-In i18n Configuration

Next.js allows developers to define the locales their application supports and set the default locale in the next.config.js file. This configuration enables automatic locale detection and routing.

Example Configuration:

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

In this configuration:

• locales specifies the list of supported locales.
• defaultLocale sets the default language.
• localeDetection enables automatic detection of the user's locale based on their browser settings.

Automatic Route Generation

Next.js automatically generates routes for different language versions of your website based on the configured locales. This means that you can define separate pages for each language, and Next.js will handle routing based on the user's preferred language.

Example:

// pages/index.js
import { useRouter } from "next/router";

const HomePage = () => {
  const router = useRouter();
  const { locale } = router;

  return (
    <div>
      <h1>{locale === "en" ? "Welcome" : "Bienvenido"}</h1>
      <p>
        {locale === "en"
          ? "This is the English version."
          : "Esta es la versión en español."}
      </p>
    </div>
  );
};

export default HomePage;

Integration with Translation Libraries ( Dynamic Language Switching )

While Next.js handles the routing and detection, it can be seamlessly integrated with translation libraries like next-i18next, react-intl, or react-i18next for managing translations.

Example with next-i18next:

// i18n.js

// components/LanguageSwitcher.js
import { useRouter } from "next/router";

const LanguageSwitcher = () => {
  const router = useRouter();
  const { locale, locales } = router;

  const handleChangeLanguage = (newLocale) => {
    router.push(router.pathname, router.asPath, { locale: newLocale });
  };

  return (
    <div>
      {locales.map((lang) => (
        <button
          key={lang}
          onClick={() => handleChangeLanguage(lang)}
          disabled={lang === locale}
        >
          {lang}
        </button>
      ))}
    </div>
  );
};

export default LanguageSwitcher;

Dynamic Routing Based on Locale

Next.js automatically creates locale-specific routes based on the configuration. For example, if your default locale is English and you have a /about page, Next.js will also create /fr/about for French, /de/about for German, and so on.

Locale-Specific Static and Dynamic Pages

Next.js allows you to localize both static and dynamic content, including text, images, dates, and numbers. This ensures that all aspects of your website can be translated into different languages to provide a seamless user experience.

Example:

// pages/[locale]/index.js
import { useRouter } from "next/router";

const HomePage = () => {
  const { locale } = useRouter();
  return <div>Welcome to our website in {locale}!</div>;
};

export async function getStaticProps({ params }) {
  const locale = params.locale;
  // Fetch locale-specific data
  return {
    props: {
      // ...your locale-specific data
    },
  };
}

export default HomePage;

Localized Routing Hooks

Next.js provides hooks like useRouter which offer methods to handle locale changes and route localization. This can be used to programmatically change the locale.

Example:

import { useRouter } from "next/router";

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

Automatic Redirection Based on Locale

Next.js can automatically redirect users to their preferred locale based on their browser settings or language preferences. This is managed through the localeDetection setting in the next.config.js file.

SEO-Friendly URLs and Metadata

Next.js generates SEO-friendly URLs and metadata for each language version of your website, making it easier for search engines to index and rank your content in different languages.

Pluggable API for Customization

Next.js provides a pluggable API for customization, allowing you to extend and customize its internationalization features according to your specific requirements. This flexibility enables you to integrate with external translation services, handle complex language-related logic, and implement custom routing strategies.

Benefits of Internationalization (i18n) in Next.js

Internationalization (i18n) is the process of designing and preparing your application to support multiple languages and cultural contexts without requiring engineering changes to the source code. It provides a multitude of benefits, ranging from improved user experience and increased global reach to SEO advantages and higher conversion rates. Integrating i18n into your Next.js application is a strategic move that prepares your business for success in the global market. Implementing i18n in a Next.js application offers several significant benefits:

Global Reach

• Expanded User Base: By supporting multiple languages, you can make your application accessible to users worldwide, thus expanding your potential user base.
• Cultural Adaptation: i18n allows you to adapt your application to different cultural norms and preferences, enhancing user experience.

Improved User Experience

• Localized Content: Users prefer interacting with applications in their native language. i18n enables you to deliver content that is tailored to the user's language and locale, improving their overall experience.
• Enhanced Usability: Localizing your application enhances its usability by making it more intuitive and easier to navigate for non-native speakers.

SEO Benefits

• Localized SEO: By offering content in multiple languages, you can improve your search engine rankings in different regions. Search engines favor content that matches the user's language preferences.
• Increased Visibility: Localized content increases your visibility in search engine results, driving more organic traffic to your site from various regions.

Competitive Advantage

• Market Penetration: Supporting multiple languages can give you a competitive edge in markets where competitors may not offer localized versions of their applications.
• Customer Trust: Providing content in users' native languages builds trust and loyalty, as users feel the application is designed with their needs in mind.

Regulatory Compliance

• Meeting Legal Requirements: In some regions, offering content in the local language is a legal requirement. i18n helps ensure compliance with such regulations, avoiding legal issues and fines.
• Accessibility Standards: Localizing content can also help meet various accessibility standards, making your application more inclusive.

Business Growth

• Increased Engagement: Localized content leads to higher user engagement, as users are more likely to interact with content they understand and find relevant.
• Higher Conversion Rates: By providing a localized user experience, you can increase conversion rates for global users, leading to higher sales and revenue.

Flexibility and Scalability

• Future-Proofing: Implementing i18n prepares your application for future growth into new markets without requiring significant redevelopment.
• Scalable Architecture: A well-implemented i18n system allows you to easily add new languages and locales as your business expands.

Here's a detailed example of how to implement Internationalization (i18n) in a Next.js project. This will cover the setup, configuration, and usage of internationalized routes.

Example on Internationalization (i18n) in Next.Js Projects

Step 1: Install Dependencies

First, install the next-translate package which simplifies the i18n setup in Next.js.

npm install next-translate

Step 2: Configure next-translate

Create a i18n.json configuration file in the root of your project:

{
  "locales": ["en", "es", "fr"],
  "defaultLocale": "en",
  "pages": {
    "*": ["common"],
    "/about": ["about"]
  }
}

Step 3: Create Translation Files

Create a locales directory with subdirectories for each language. Inside each language directory, create JSON files for the translations.

For example:

locales
├── en
│   ├── common.json
│   └── about.json
├── es
│   ├── common.json
│   └── about.json
└── fr
    ├── common.json
    └── about.json

• locales/en/common.json:

  {
    "welcome": "Welcome to our website",
    "about_us": "About Us"
  }
  

• locales/es/common.json:

  {
    "welcome": "Bienvenido a nuestro sitio web",
    "about_us": "Sobre nosotros"
  }
  

• locales/fr/common.json:

  {
    "welcome": "Bienvenue sur notre site Web",
    "about_us": "À propos de nous"
  }
  

Step 4: Modify next.config.js

Update next.config.js to use next-translate:

const nextTranslate = require("next-translate");

module.exports = nextTranslate({
  // Any other Next.js configuration options can go here
});

Step 5: Use Translations in Components

Use the useTranslation hook from next-translate to access translations in your components.

• pages/index.js:

  import useTranslation from "next-translate/useTranslation";
  
  export default function Home() {
    const { t } = useTranslation("common");
  
    return (
      <div>
        <h1>{t("welcome")}</h1>
      </div>
    );
  }
  

• pages/about.js:

  import useTranslation from "next-translate/useTranslation";
  
  export default function About() {
    const { t } = useTranslation("about");
  
    return (
      <div>
        <h1>{t("about_us")}</h1>
      </div>
    );
  }
  

Step 6: Adding Locale Switcher

You can add a simple locale switcher to change the language.

• components/LocaleSwitcher.js:

  import Link from "next/link";
  import { useRouter } from "next/router";
  
  export default function LocaleSwitcher() {
    const router = useRouter();
    const { locales, locale: activeLocale } = router;
  
    return (
      <div>
        {locales.map((locale) => (
          <span key={locale} style={{ marginRight: 10 }}>
            <Link href={router.asPath} locale={locale}>
              <a
                style={{
                  textDecoration:
                    activeLocale === locale ? "underline" : "none",
                }}
              >
                {locale}
              </a>
            </Link>
          </span>
        ))}
      </div>
    );
  }
  

• Use Locale Switcher in pages/index.js:

  import LocaleSwitcher from "../components/LocaleSwitcher";
  
  export default function Home() {
    const { t } = useTranslation("common");
  
    return (
      <div>
        <h1>{t("welcome")}</h1>
        <LocaleSwitcher />
      </div>
    );
  }
  

Step 7: Testing

Start your Next.js application:

npm run dev

Navigate to your application and use the locale switcher to change languages. You should see the text update based on the selected language.

By following these steps, you can successfully implement Internationalization (i18n) in your Next.js project using next-translate. This approach allows you to easily manage translations and support multiple languages in your application.

Nextjs FAQ

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

import { useRouter } from "next/router";

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

// i18n.js
const NextI18Next = require("next-i18next").default;

module.exports = new NextI18Next({
  defaultLanguage: "en",
  otherLanguages: ["fr", "de"],
});

// pages/_app.js
import { appWithTranslation } from "../i18n";

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

export default appWithTranslation(MyApp);

// pages/index.js
import { useTranslation } from "react-i18next";

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

export default Home;

// public/locales/en/common.json
{
  "welcome": "Welcome"
}

// public/locales/en/home.json
{
  "title": "Home Page"
}

// pages/home.js
import { useTranslation } from "react-i18next";
import { serverSideTranslations } from "next-i18next/serverSideTranslations";

const Home = () => {
  const { t } = useTranslation("home");
  return <h1>{t("title")}</h1>;
};

export async function getServerSideProps({ locale }) {
  return {
    props: {
      ...(await serverSideTranslations(locale, ["common", "home"])),
    },
  };
}

export default Home;

// lib/cms.js
import { createClient } from "contentful";

const client = createClient({
  space: process.env.CONTENTFUL_SPACE_ID,
  accessToken: process.env.CONTENTFUL_ACCESS_TOKEN,
});

export async function fetchTranslations(locale) {
  const entries = await client.getEntries({
    content_type: "translations",
    locale,
  });
  return entries.items[0].fields;
}

// pages/about.js
import { fetchTranslations } from "../lib/cms";

const About = ({ translations }) => {
  return <h1>{translations.aboutTitle}</h1>;
};

export async function getServerSideProps({ locale }) {
  const translations = await fetchTranslations(locale);
  return {
    props: {
      translations,
    },
  };
}

export default About;

Conclusion

Next.js provides powerful built-in support for internationalization (i18n), allowing developers to create multilingual web applications with ease. By leveraging Next.js's automatic route generation, dynamic language switching, localization of content, SEO-friendly URLs, and customizable API, you can build websites that cater to users from different language backgrounds. With the provided code examples and explanations, you can confidently implement internationalization in your Next.js projects and deliver a seamless and localized user experience.