DEV Community

ANKUSH CHOUDHARY JOHAL
ANKUSH CHOUDHARY JOHAL

Posted on • Originally published at johal.in

How to Build a Next.js 17 App with i18n Using next-i18next 15.0

#build #nextjs #i18n #using

How to Build a Next.js 17 App with i18n Using next-i18next 15.0

Prerequisites

  • Node.js 20.4+ installed (required for Next.js 17)
  • Basic knowledge of React and Next.js
  • Familiarity with terminal commands

Step 1: Initialize a New Next.js 17 Project

First, create a new Next.js 17 app using the official create-next-app CLI. Run the following command in your terminal:

npx create-next-app@17 my-i18n-app
cd my-i18n-app
Enter fullscreen mode Exit fullscreen mode

When prompted, select the default options (TypeScript, Tailwind CSS optional, App Router enabled – next-i18next 15.0 fully supports the App Router).

Step 2: Install next-i18next 15.0 and Dependencies

Install the required i18n packages. next-i18next 15.0 requires i18next and react-i18next as peer dependencies:

npm install next-i18next@15.0 i18next react-i18next
Enter fullscreen mode Exit fullscreen mode

Step 3: Configure next-i18next

Create a next-i18next.config.js file in the root of your project. This file defines your supported locales, default locale, and translation file paths:

/** @type {import('next-i18next').UserConfig} */
module.exports = {
  i18n: {
    defaultLocale: 'en',
    locales: ['en', 'es', 'fr'], // Add your supported locales here
  },
  localePath: './public/locales', // Path to translation JSON files
};
Enter fullscreen mode Exit fullscreen mode

Step 4: Add Translation Files

Create translation JSON files under public/locales/[locale]/common.json. For example:

public/locales/en/common.json:

{
  "title": "Welcome to My i18n App",
  "description": "Built with Next.js 17 and next-i18next 15.0",
  "switch_locale": "Switch Locale"
}
Enter fullscreen mode Exit fullscreen mode

public/locales/es/common.json:

{
  "title": "Bienvenido a Mi App i18n",
  "description": "Construido con Next.js 17 y next-i18next 15.0",
  "switch_locale": "Cambiar Idioma"
}
Enter fullscreen mode Exit fullscreen mode

public/locales/fr/common.json:

{
  "title": "Bienvenue sur Mon App i18n",
  "description": "Construit avec Next.js 17 et next-i18next 15.0",
  "switch_locale": "Changer de Langue"
}
Enter fullscreen mode Exit fullscreen mode

Step 5: Set Up the App Router for i18n

Next.js 17 uses the App Router by default. Wrap your root layout with the appWithTranslation HOC from next-i18next. Modify app/layout.tsx:

import type { Metadata } from 'next';
import { appWithTranslation } from 'next-i18next';
import './globals.css';

export const metadata: Metadata = {
  title: 'Next.js 17 i18n App',
  description: 'Built with next-i18next 15.0',
};

function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (


        {children}


  );
}

export default appWithTranslation(RootLayout);
Enter fullscreen mode Exit fullscreen mode

Step 6: Use Translations in Components

Use the useTranslation hook from react-i18next to access translations in your components. Update app/page.tsx:

import { useTranslation } from 'next-i18next';

export default function Home() {
  const { t } = useTranslation('common');

  return (

      {t('title')}
      {t('description')}

  );
}
Enter fullscreen mode Exit fullscreen mode

Step 7: Add Locale Switching

Create a locale switcher component to let users toggle between supported languages. Create components/LocaleSwitcher.tsx:

'use client';

import { useRouter } from 'next/navigation';
import { useTranslation } from 'next-i18next';

const locales = ['en', 'es', 'fr'];

export default function LocaleSwitcher() {
  const router = useRouter();
  const { i18n } = useTranslation();

  const handleLocaleChange = (locale: string) => {
    i18n.changeLanguage(locale);
    router.refresh(); // Refresh to apply new locale
  };

  return (

      {locales.map((locale) => (
         handleLocaleChange(locale)}
          className={`px-4 py-2 rounded ${
            i18n.language === locale ? 'bg-blue-500 text-white' : 'bg-gray-200'
          }`}
        >
          {locale.toUpperCase()}

      ))}

  );
}
Enter fullscreen mode Exit fullscreen mode

Import the LocaleSwitcher into your app/page.tsx to display it.

Step 8: Configure Locale-Based Routing

Next.js 17 supports locale-based routing out of the box with next-i18next. To enable prefixed routes (e.g., /en/about, /es/about), update your next.config.js to include the i18n config:

const nextI18NextConfig = require('./next-i18next.config.js');

/** @type {import('next').NextConfig} */
const nextConfig = {
  i18n: nextI18NextConfig.i18n,
};

module.exports = nextConfig;
Enter fullscreen mode Exit fullscreen mode

Now, navigating to /es will render the Spanish version of your app, and /fr will render French.

Step 9: Test Your i18n Setup

Run the development server to test your app:

npm run dev
Enter fullscreen mode Exit fullscreen mode

Open http://localhost:3000 in your browser. You should see the English version by default. Use the locale switcher to toggle between languages, and verify that translations update correctly. Navigate to /es or /fr to test prefixed routes.

Conclusion

You've now successfully set up internationalization in a Next.js 17 app using next-i18next 15.0. This setup supports the App Router, client and server components, and locale-based routing. You can extend this by adding more locales, namespacing translations, or integrating with a CMS for dynamic translation management.

Top comments (0)