Translating Your Next.js Apps

Internationalization

People's accessibility to the web has been a concern of many developers and companies.

Internationalization is the process of designing/developing our application to work well with users from different languages and regions.

To understand the importance of Internationalization, around 989 million people from China have access to the internet. Meanwhile, Less than 1% of China's population can speak English.

In this post, we'll look at how we can easily translate our Next.js application into different languages.

Project Setup

For this project, we'll use the following libraries:

• Next.js
• next-i18next

npx create-next-app intl --ts

This will setup a new Next.js project which will use TypeScript and Yarn for installing packages.

Note: If you just want to use regular JavaScript, remove the --ts option

Now that we have our project, let's start the development server

yarn dev
// ...
ready — started server on 0.0.0.0:3000, url: http://localhost:3000

Our development server should now be running on localhost

Translating Our App

Now that we have the basics setup and ready to go, we can begin translating our application.

Let's install the next-i18next library.

yarn add next-i18next

Let's open our pages/index.tsx file.

At the top, we can setup and use the useTranslation() hook provided by the package.

import { useTranslation } from 'next-i18next'

and inside our Home component:

const { t } = useTranslation('common')

Since we're using Next.js, we'll also need to setup our application a bit differently.

At the top of the file, import the serverSideTranslations component:

import { serverSideTranslations } from 'next-i18next/serverSideTranslations'

Now, below the Home component, we need to use getStaticProps to setup our translations.

export const getStaticProps = async ({ locale }) => ({
  props: {
    ...(await serverSideTranslations(locale, ['common'])),
  },
})

Now, let's open our pages/_app.tsx file and make sure we export it with translations.

import '../styles/globals.css'
import type { AppProps } from 'next/app'

import { appWithTranslation } from 'next-i18next'

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

export default appWithTranslation(MyApp)

Let's now start to configure our translations with Next.js

At the root of the file, create a new file named next-i18next.config.js

Inside it, paste the following content. Replace the languages in the locale array with the language you wish to translate your app into.

My mother tongue is Hindi, so I'll be using it in this example to ensure accurate translations.

module.exports = {
  i18n: {
    defaultLocale: 'en',
    locales: ['en', 'hn'],
  },
}

Now, open your next.config.js file. If it's not created already, create it.

Since I'm using TypeScript, it already created the file with some pre-configured settings.

const { i18n } = require('./next-i18next.config')

/** @type {import('next').NextConfig} */
module.exports = {
  reactStrictMode: true,
  i18n,
}

Next, we'll need to setup the lines we want to be translated.

Open up pages/index.tsx

Let's take a look at the header which says "Welcome to Next.js!"

<h1 className={styles.title}>
  Welcome to <a href='https://nextjs.org'>Next.js!</a>
</h1>

Let's replace this with the following code

<h1 className={styles.title}>{t('header')}</h1>

Now, if you save it, you'll see instead of "Welcome to Next.js!" it shows "header", and that's because we haven't setup our translation yet.

Create a new file in the directory public/locales/en/common.json

{
  "header": "Welcome to Next.js!"
}

Now, when we reload the page, we should see it say "Welcome to Next.js!"

Now to translate it in our secondary language, let's create another new file in public/locales/hn/common.json

The closest translation to "Welcome to Next.js!" in Hindi is "Next.js में आपका स्वागत है!" (Using English words for English names).

{
  "header": "Next.js में आपका स्वागत है!"
}

Now, when we open up localhost:3000/hn, we should see our app translated in Hindi.

Conclusion

Web internationalization can be crucial depending upon your target demographic. Popular websites such as Stripe offer their interface in languages such as German, French, Dutch, Indonesian, Sweedish, Spanish, and even Thai to target international audiences and creators. Even YouTube supports over 80 different languages, empowering users to create content regardless of the language they speak.

I hope this article helped you add translations onto your site. There are several different approaches available, but I found this to be the most effective one.

That's all for today, until next time 👋