63
loading...
Translating Your Next.js Apps
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.
For this project, we'll use the following libraries:
npx create-next-app intl --tsNote: 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:3000Our development server should now be running on localhost
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-i18nextLet'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)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'],
},
}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.jsonThe 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!
That's it for today. We took at look at how we can translate our Next.js apps in other languages with an example!
63