CodeX
Published in

CodeX

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.jsconst { 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.jsconst 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

--

--

--

Everything connected with Tech & Code. Follow to join our 900K+ monthly readers

Recommended from Medium

Optimizations by Angular

Coding Challenge (React): Decremental Timer

Introduction of Idx-Auto-Tester

Next with Styled Components

VulnHub- NODE Walkthrough

CAROUSEL WITH HTML, CSS AND JAVASCRIPT

Most famous JavaScript Interview Questions

Step by Step Guide for Building a Checkout Form in React

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Yingqi Chen

Yingqi Chen

Software engineer and a blockchain noob. Excited about the new world!!LinkedIn:https://www.linkedin.com/in/yingqi-chen/

More from Medium

Prismic.io with Next.js and GraphQL. Dynamic routes

Creating a Textarea with dynamic height using React and Typescript

How to Add TypeScript to a Node.js App

Overmind, the state management library you don’t know (yet) (but should)