Learn How to Internationalize your NextJS App with Next-Translate
Tags: webdev, tutorial, productivity, typescript
Published: 2023-04-05 09:15:22

Dive into Nextjs's [internationalized routing](https://nextjs.org/docs/advanced-features/i18n-routing)

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

![demo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7rev97kxy9gfx618gjc7.gif)

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

```bash
├── 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:
```json
//locale/en/blog.json
{
  "welcome": "Welcome to my blog!"
}
```
```json
//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:
```jsx
// 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
```js
/** @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:
```jsx
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)

```jsx
//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!