As a Next.js developer, you’re likely no stranger to the challenges of internationalization (i18n) and localization (L10n). With the rise of global audiences, it’s more important than ever to ensure your website is accessible and engaging for users from diverse linguistic and cultural backgrounds. In this article, we’ll explore how to use next-i18next in Next.js v14, specifically with the App Router convention, to unlock seamless i18n and L10n capabilities.

What is next-i18next?

next-i18next is a popular library built on top of the i18next ecosystem, designed specifically for Next.js projects. It provides a simple, yet powerful, way to manage translations, formatting, and pluralization across your application. By leveraging next-i18next, you can easily switch between languages, automate language detection, and even integrate with popular translation management systems.

Why Use App Router Convention?

In Next.js v14, the App Router convention is the recommended approach for building server-side rendered (SSR) applications. This convention allows for a more scalable and maintainable architecture, making it an ideal choice for large-scale projects. By combining next-i18next with the App Router convention, you can create a robust, i18n-enabled application that’s optimized for performance and user experience.

Setting Up next-i18next with App Router Convention

Before we dive into the implementation details, make sure you have the following dependencies installed in your project:

• next-i18next: yarn add next-i18next or npm install next-i18next
• i18next: yarn add i18next or npm install i18next

Step 1: Create an i18next configuration file

Create a new file named `i18n.js` in the root of your project with the following content:

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

i18n
  .use(initReactI18next) // passes i18n down to react-i18next
  .init({
    ns: ['common'],
    defaultNS: 'common',
    fallbackLng: 'en',
    debug: process.env.NODE_ENV === 'development',
    interpolation: {
      escapeValue: false, // not needed for react as it does this automatically
    },
    react: {
      useSuspense: false, //   <---- this is the important part!
    },
  });

Step 2: Add i18n to your App Router

In your `app/
router.js` file, add the following code to initialize the i18n instance:

import {createRouter, createWebHashHistory} from 'next/router';
import i18n from '../i18n';

const router = createRouter({
  //... other configurations ...
  async getStaticPaths() {
    await i18n.init();
    //... other configurations ...
  },
});

Step 3: Configure Language Detection and Routing

In `app/
router.js`, add the following code to enable language detection and routing:

import {createRouter, createWebHashHistory} from 'next/router';
import i18n from '../i18n';

const router = createRouter({
  //... other configurations ...
  async getStaticPaths() {
    await i18n.init();
    // Language detection and routing
    const languageCodes = ['en', 'fr', 'es'];
    const localePaths = languageCodes.map((code) => ({ params: { locale: code } }));

    return [...localePaths];
  },
});

Step 4: Add Language Switching Component

Create a new component, e.g., `LanguageSwitcher.js`, to handle language switching:

import { useTranslation } from 'next-i18next';

const LanguageSwitcher = () => {
  const { t, i18n } = useTranslation();

  const handleLangChange = (lang) => {
    i18n.changeLanguage(lang);
  };

  return (
    

       handleLangChange(e.target.value)}>
        English
        French
        Spanish
      
    
  );
};

Step 5: Integrate with Translation Files

Create a new folder `public/locales` to store your translation files. For example, create `en.json` and `fr.json` files with the following content:

// en.json
{
  "hello": "Hello, World!",
  "welcome": "Welcome to our website!"
}

// fr.json
{
  "hello": "Bonjour, monde!",
  "welcome": "Bienvenue sur notre site web!"
}

Step 6: Use next-i18next in Your Pages

In your page components, import and use the `useTranslation` hook to access translated content:

import { useTranslation } from 'next-i18next';

const HomePage = () => {
  const { t } = useTranslation();

  return (
    

      
      
{t('welcome')}
    
  );
};

Troubleshooting and Best Practices

To ensure a smooth i18n experience, keep the following tips in mind:

• Avoid hardcoded language codes: Use a centralized language detection system to determine the user's preferred language.
• Keep translation files organized: Structure your translation files in a logical and scalable manner, e.g., separate files for each language and namespace.
• Use meaningfull namespace keys: Choose namespace keys that reflect the context and meaning of the translated content, e.g., `common` for general translations and `admin` for administrative content.
• Test and review translations: Regularly test and review your translations to ensure accuracy and cultural relevance.

Conclusion

In this article, we've covered the essential steps to get started with next-i18next in Next.js v14 using the App Router convention. By following these guidelines, you'll be well on your way to creating a robust, i18n-enabled application that caters to diverse linguistic and cultural needs. Remember to keep your translation files organized, use meaningful namespace keys, and test your translations regularly to ensure a seamless user experience.

Keyword	Definition
i18n	Internationalization, the process of designing and developing software to accommodate multiple languages and regions.
L10n	Localization, the process of adapting software to a specific language and region, including translations, formatting, and cultural considerations.
App Router Convention	A recommended architecture for building server-side rendered (SSR) applications in Next.js, providing a more scalable and maintainable approach.
next-i18next	A library built on top of the i18next ecosystem, designed specifically for Next.js projects, providing a simple and powerful way to manage translations, formatting, and pluralization.

Now that you've mastered the basics of next-i18next with App Router convention, take your i18n skills to the next level by exploring advanced topics, such as:

• Using i18next with other Next.js features, like getStaticProps and getServerSideProps
• Implementing pluralization and formatting with i18next
• Integrating next-i18next with popular translation management systems

Stay tuned for more in-depth guides and tutorials on i18n and L10n in Next.js!

Frequently Asked Question

Get ready to take your Next.js V14 project to the next level with next-i18next! Here are the answers to your burning questions about using next-i18next in App Router convention.