Learn How to Internationalize your NextJS App with Next-Translate

Dive into Nextjs's internationalized routing

Are you planning to add multi-language support for your website?

In this article, we'll guide you through the steps to translate website content using Next.js 12 internationalization and next-i18next.

What is Next.js Internationalization?

A built-in feature of Next.js Internationalization enables you to develop a website with content in various languages. The routing and rendering of several language versions of your website are handled automatically by Next.js. The user's preferred language can be determined using Next.js, which can then offer the appropriate content.

Why next-i18next?

You may quickly add internationalization (i18n) to your website by applying the next-i18next package in a Next.js project. This means that you can offer translations of the information on your website into several languages, making it accessible to a broader audience.

Folder Structure

├── public
│   ├── locales
│   │   ├── en
│   │   │   ├── common.json
│   │   │   └── blog.json
│   │   └── fr
│   │       ├── common.json
│   │       └── blog.json
├── pages
│   ├── _app.tsx
│   └── index.tsx
├── next.config.js
└── next-i18next.config.js

Get Started

Navigate to your project directory in the terminal run the following command:

npm install next-i18next

Adding Translation Support

You need to create a translation file to add translation support to your Next.js application. These files will contain the translated strings for different languages (next-i18next uses json)
Create a new folder named public/locales/ and create a separate folder for each locale. For example, create en/blog.json, and fr/blog.json for English, and French translations, respectively.

public/locales
├── en
│   ├── common.json
│   └── blog.json
└── fr
    ├── common.json
    └── blog.json

common.json is the default json file that next-i18next will look into if no existing translation file.

Here's an example of what a translation file might look like:

//locale/en/blog.json
{
  "welcome": "Welcome to my blog!"
}

//locale/fr/blog.json
{
  "welcome": "Bienvenue sur mon blog!"
}

⚠️The keys must match both json files for the translation to work. The example above both use "welcome" as key

Configure next-i18next

Next, configure next-i18next to work with the translation files. Create a next-i18next.config.js file in the root of your project and add the following configuration:

// next-i18next.config.js
module.exports = {
  i18n: {
    defaultLocale: "en", //default locale
    locales: ["en", "fr"] // list of supported locales
  },
};

Now import i18n in next.config.js file in the root of your project

/** @type {import('next').NextConfig} */
const { i18n } = require("./next-i18next.config");
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  i18n,
};

module.exports = nextConfig;

Wrap Your Next.js App with appWithTranslation

Now in _app inside pages folder:

import '../styles/globals.css'
import { appWithTranslation } from 'next-i18next'

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

export default appWithTranslation(MyApp)

This wraps your Next.js application with the necessary context and translation functionality provided by next-i18next. This enables translation support throughout your application.

ServerSideTranslations

This is an async function that you need to include on your page-level components via either getStaticProps or getServerSideProps. (depending on the use case)

//pages/index

import { serverSideTranslations } from "next-i18next/serverSideTranslations";

import { useTranslation } from 'next-i18next'

function Home() {

  const { t } = useTranslation('blog')

return (

    <div>

      <h1>{t('welcome')}</h1>

    </div>

  )

}

//getServeSideProps wors too

export const getStaticProps = async ({ locale }) => {

  return {

    props: {

      ...(await serverSideTranslations(locale, ["blog"])),

    },

  };

};

Conclusion

That's it! You've now learned how to translate website content using Next.js internationalization and next-i18next.

Happy coding!