Next.js Integration

Learn how to integrate i18next with Next.js applications for internationalization.

Integrate i18next with your Next.js application (v14.0.0+) to support multiple languages using Lengrise-managed translations.

Prerequisites

  • Next.js application (v14.0.0+)
  • Node.js (v16.0.0+)
  • Package manager (npm,yarn,npm)
  • Translations downloaded from Lengrise

Pull Translation Files

First, you must pull your translation files from Lengrise API. These files will contain all the translated text for your application.

  1. Go to the Installation Guide and follow the steps to download your translations
  2. Place the downloaded JSON files in your project as shown in the project structure below
  3. Ensure that each language has its own JSON file named with the language code (e.g., en.json, es.json)

Integration Setup

After downloading your translation files, install the necessary i18next packages:

npm install i18next react-i18next i18next-http-backend i18next-browser-languagedetector --save

Integration Options

Choose your Next.js router configuration below:

App Router Setup

This section covers setting up i18next with the modern App Router in Next.js 13 and above.

Project Structure

next.config.jsadd
package.jsonadd
appadd
layout.tsxadd
page.tsxadd
componentsadd
I18nProvider.tsxadd
LanguageSwitcher.tsxadd
publicadd
localesadd
en.jsonadd
es.jsonadd

Configuration Steps

1. Configure Next.js for i18next

First, update your next.config.js to handle the localization:

/** @type {import('next').NextConfig} */
const nextConfig = {
  // App Router configuration
  // No special i18n config needed in Next.js config for App Router
  reactStrictMode: true,
}

module.exports = nextConfig

2. Create an I18nProvider component

Create a file at app/components/I18nProvider.tsx:

// app/components/I18nProvider.tsx
'use client';

import i18next from 'i18next';
import { I18nextProvider, initReactI18next } from 'react-i18next';
import Backend from 'i18next-http-backend';
import LanguageDetector from 'i18next-browser-languagedetector';
import { ReactNode, useEffect, useState } from 'react';

// Initialize i18next on the client side only
i18next
  .use(Backend)
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    fallbackLng: 'en',
    debug: process.env.NODE_ENV === 'development',
    backend: {
      loadPath: '/locales/{{lng}}.json',
    },
    interpolation: {
      escapeValue: false,
    },
  });

export default function I18nProvider({
  children,
}: {
  children: ReactNode;
}) {
  const [mounted, setMounted] = useState(false);

  useEffect(() => {
    setMounted(true);
  }, []);

  if (!mounted) return null; // Prevent hydration issues

  return (
    <I18nextProvider i18n={i18next}>
      {children}
    </I18nextProvider>
  );
}

3. Add the provider to your root layout

Modify your app/layout.tsx file to include the I18nProvider:

// app/layout.tsx
import I18nProvider from './components/I18nProvider';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <I18nProvider>
          {children}
        </I18nProvider>
      </body>
    </html>
  );
}

Using Translations

Basic Usage

Use the useTranslation hook in a Client Component:

'use client';

import React from "react";
import { useTranslation } from "react-i18next";

export default function Welcome() {
  const { t } = useTranslation();
  return <h1>{t("welcome.title")}</h1>;
}

Creating a Language Switcher

Add a component to switch between languages:

'use client';

import React from "react";
import { useTranslation } from "react-i18next";

export default function LanguageSwitcher() {
  const { i18n } = useTranslation();

  return (
    <div>
      <button onClick={() => i18n.changeLanguage("en")}>English</button>
      <button onClick={() => i18n.changeLanguage("es")}>Español</button>
    </div>
  );
}

Client Components:

Remember that with App Router, components using i18next hooks must be Client Components. Add the 'use client' directive at the top of your component files.

Resources

For more detailed information, check out these resources: