How to create a multi-language support web application by using Typescript with Next JS?

Question

I want to create a Production level web application with Typescript, Nextjs & as backend Nodejs MongoDB separately(client folder, server folder). And language is a must requirement in this application. Admin wants to input in English and for further use, it may be switch to another language like Bangla preferably. Is it possible with next-i18next? If possible then what is the folder structure and setup will be ??? Share your opinions which will be very helpful for me. Thank you...

score 1 · Answer 1 · answered Mar 14 '22 at 07:06

You need to specify the locales supported by declaring them in your next.config.js, as follows

module.exports = {
    i18n: {
      locales: ["en-US", "bn-BD"],
      defaultLocale: "en-US",
    }, 
}

Now, if you had a pages/blog.js file, then the following URLs would be available:

/blog

/es-ES/blog

/bn-BD/blog

The first one corresponds to the default locale, which does not have a prefix. While the other two are the localized version of the same page. You can find more details about how internalized routing works in Next.js here.

Now, let’s take a look at the index.js page of the multi-language international blog demo example:

import Link from 'next/link';
import { useRouter } from 'next/router';
import styles from '../styles/Home.module.css';
import blogPosts from './assets/posts.json';
import BlogCard from './components/BlogCard';

function Home() {
  const { locale, locales, asPath } = useRouter();
  return (
    <div className={styles.container}>
      <main className={styles.main}>
        <div className={styles.navbar}>
          {locales.map((l, i) => {
            return (
              <span key={i} className={l === locale ? styles.selected : ''}>
                <Link href={asPath} locale={l}>
                  {l}
                </Link>
              </span>
            );
          })}
        </div>
        <div>
          <h1>My Multi-Language Blog</h1>
          <div>
            {blogPosts.posts
              .filter(p => p.locale === locale)
              .map((blogPost, i) => {
                return <BlogCard key={i} blogPost={blogPost} />;
              })}
          </div>
        </div>
      </main>
    </div>
  );
}
export default Home;

As you can see, all info about Next.js i18n is retrieved through the useRouter() hook.

In the first section, the configured locales are used to create a menu to select the language and navigate between the localized version of the home page. Then, the blog posts referring to the selected language are shown. These are retrieved from the posts.json file. As you are going to learn, putting your content in an external .json file is a common approach, although having some pitfalls.

This is what such a file looks like:

{
  "posts": [
    {
      "locale": "en-US",
      "title": "Sample Title For the First Blog Post in English",
      "description": "This is the first blog post in English published on the blog",
      "image": "https://source.unsplash.com/GnvurwJsKaY/1600x900"
    },
    {
      "locale": "bn-BD",
      "title": "বাংলায় ডামি টাইটেল প্রথম ব্লগের জন্য",
      "description": "এটা প্রথম ব্লগ যেটা বাংলায় প্রকাশিত হবে."
    }
  ]
}

We are almost done...

For more info you can watch this demo and this github repository.

If you wanna learn more then you should checkout this blog too.

How to create a multi-language support web application by using Typescript with Next JS?

1 Answers1