CODEX

Add a Translation Feature to Your Next.JS App Part 3: Add language-specific URL in next-i18next package

What you can do after reading this article

This article is going to talk about how you can add a language-specific URL in your next.js app. For example, myblog.com/en will lead you to the English version of the website while myblog.com/zh will lead you to the Chinese version, etc.

Basic set up reference

First, to set up the feature, I already explain some in my previous articles:

1. Add a translation feature to your Next.js App Part 1: Set up the next-i18next package
2. Add a Translation Feature to Your Next.JS App Part 2: Manually Switch Languages

So after you follow those tutorials, I assume that your app is able to grab different scripts from corresponding languages scripts and have a button to be able to change the language for you in the app already.

Also, I built a repo to demonstrate this so feel free to visit there and play with that.

TL;DR: HOW?

To implement this language-specific URL feature, we need to use localSubpath option, which is a key/value pair that we passed to the NextI18Next instance when it is initiated. You can find more here in the documentation.

Basically, you just need to do three easy steps:

1. Create a next.config.js to set up localSubpath

Just create a file called next.config.js in the root directory(same directory as you put i18n.js), and put the following codes:

#next.config.js
const { nextI18NextRewrites } = require('next-i18next/rewrites')
const localeSubpaths = {
    zh: "zh", // or whichever other languages you are looking for
    en: "en"
}
module.exports = {
  rewrites: async () => nextI18NextRewrites(localeSubpaths),
  publicRuntimeConfig: {
    localeSubpaths,
  },
}

2. Modify the i18n.js to access localSubpath

// i18n.js
const NextI18Next = require('next-i18next').default
//New added!!
const { localeSubpaths } = require('next/config').default().publicRuntimeConfig
const path = require('path')
module.exports = new NextI18Next({
  defaultLanguage:'en',
  otherLanguages: ['zh'],
// New added!!
  localeSubpaths,
  localePath: path.resolve('./public/static/locales')
})

3. Use Link from NextI18Next instance, not from next

If your app has more than one internal link(that is very likely!), then you might want to do one more small set up too. When you have a link in your code, instead of using the link from next, use the Link from the i18 instance we created in another file.

So use Link like this:

import { withTranslation, i18n, Link } from "../i18n"
...
<Link href="/second-page">
   <p>{t('secondFile:second')}</p>
</Link>

Why? Because when you use the one in NextI18Next instance, when you are redirected to /second-page, the URL will become /en/second-page or whatever language the user is using right now, such as /zh/second-page,isn’t that so cool?

End

That’s all for this series! Thanks for reading!

Resources:

1. next-i18next package
2. My example repo
3. Add a translation feature to your Next.js App Part 1: Set up the next-i18next package
4. Add a Translation Feature to Your Next.JS App Part 2: Manually Switch Languages