DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป

Cover image for Translating Your Next.js Apps
Harsh Singh
Harsh Singh

Posted on • Updated on

Translating Your Next.js Apps

๐ŸŒ Internationalisation & It's Importance

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

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

To understand the importance of Internationalisation, 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:

npx create-next-app intl --ts
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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'
Enter fullscreen mode Exit fullscreen mode

and inside our Home component:

const { t } = useTranslation('common')
Enter fullscreen mode Exit fullscreen mode

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'
Enter fullscreen mode Exit fullscreen mode

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

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

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)
Enter fullscreen mode Exit fullscreen mode

Awesome! 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'],
  },
}
Enter fullscreen mode Exit fullscreen mode

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
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Let's replace this with the following code

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

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!",
}
Enter fullscreen mode Exit fullscreen mode

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 เคฎเฅ‡เค‚ เค†เคชเค•เคพ เคธเฅเคตเคพเค—เคค เคนเฅˆ!"
}
Enter fullscreen mode Exit fullscreen mode

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

That's it for today. We took at look at how we can translate our Next.js apps in other languages with an example!

Top comments (0)

We want your help! Become a Tag Moderator.
Check out this survey and help us moderate our community by becoming a tag moderator here at DEV.