Supporting Multiple Languages With NextJS

Introduction

Hello! Recently I added multiple languages to my site, so I will show you how to do it in this short tutorial. 😎

Setting up the project

First we need to actually set up the project, run the following command:

yarn create next-app

Give your app a random name, Typescript is up to you if you want to use it or not, the rest of the options leave as default.

Next install the required dependencies for the project:

yarn add tailwindcss

yarn add -D autoprefixer postcss

Next set up the following config files to the following:

First is "postcss.config.js"

module.exports = { 
  plugins: {
    tailwindcss: {}, 
    autoprefixer: {}
  }
};

Second is "next.config.js"

/** @type {import('next').NextConfig} */
const nextConfig = { 
  reactStrictMode: true,
  i18n: {
    locales: ["en-US", "ja-JP"],
    defaultLocale: "en-US"
  }
}

module.exports = nextConfig

Here is you've notice we set the default locale to US English and give the site two locales one being English and the other being Japanese.

Finally add the following one line to pages/_app.js:

import 'tailwindcss/tailwind.css';

Creating the Translation file

Next we need to create the actual translation files. Create a new directory public/assets/translations and create a new file with the following contents:

{
  "home": [
    {   
      "locale": "en-US",
      "title": "This is a simple site",
      "body": "This site demonstrates how to use translations"
    },  
    {   
      "locale": "ja-JP",
      "title": "これはシンプルなサイトです",
      "body": "このサイトは翻訳の使い方の例です"
    }   
  ]
}

Feel free to add more translations if you know multiple languages. ☺️

Implementing the Translations

Now we have created a simple translation file, we can now use it in our application.

Open up pages/index.js and enter the following:

import { useRouter } from 'next/router';

import homeTranslations from './../public/assets/translations/home.json'

export default function Home() {
  const { locale } = useRouter()

  const homeItems = homeTranslations.home.filter(item => item.locale === locale)

  return (
    <div className="mt-8 p-8 rounded overflow-hidden shadow-lg content-center justify-center">
      <div className="px-6 py-4">
        <h1 className="text-center font-bold text-xl mb-2">{ homeItems[0].title }</h1>
        <p className="text-gray-600 text-base text-center">{ homeItems[0].body }</p>
      </div>
    </div>
  )
}

Here we use tailwindcss to create a very simple looking card. We use "useRouter" from next/router to get the pages locale. If the url is http://localhost:3000 it will show the default locale which in our case is English. If it's http://localhost:3000/ja-JP the language will be set to Japanese and again if it's https://localhost:3000/en-US the language will be set to English.

This is done be filtering the translation languages based on the URLs locale.

We can then use the filtered items to set the content. 😆

If you set the url to http://localhost:3000 or http://localhost:3000/en-US you should see the following:

English Example

If you set the url to http://localhost:3000/ja-JP you should see the following: (you may need Japanese fonts...)

Japanese Example

Conclusion

Here I have shown how to implement multiple languages using Nextjs, feel free to add more translations or change the examples. 🙂

You can find the repository for this tutorial here: https://github.com/ethand91/nextjs-translation

Like me work? Any support is appreciated. :)