Building Next.js app in 7 different languages 🇫🇷 🇩🇪🇧🇷 with i18n. Open Source.

Localisation is one of the ways how to make your project open and accessible for more users.

So I decided to add different languages to my app.

Project I am working on

Post Generator - Linkedin Post Generator I wrote full story how I started it (Open Source)

You can fork it here https://github.com/shnai0/linkedin-post-generator

Resources I used to build it?

Using ChatGPT
Using next-i18next
https://github.com/i18next/next-i18next

What you will find in this article?

1. How install and select localisation library?

2. How I create each common.js file

3. Adding dropdown for languages

Step 1. Select library and install

There were two which ChatGpt recommend me. I selected i18next. No big clue why, but it works well with my pages directory.

I installed it here:

npm install i18next
npm install react-i18next

Step 2.Create next-18next.config.js and next.config.js

next-18next.config.js

module.exports = {
  debug: process.env.NODE_ENV === "development",
  i18n: {
    locales: ["en", "de", "pt", "es", "ch", "fr", "it"],
    defaultLocale: "en",
  },
  localePath:
    typeof window === "undefined"
      ? require("path").resolve("./public/locales")
      : "/locales",

  reloadOnPrerender: process.env.NODE_ENV === "development",
};

next.config.js

/** @type {import('next').NextConfig} */

const { i18n } = require("./next-i18next.config.js");
const nextConfig = {
  i18n,
  reactStrictMode: true,
};

module.exports = nextConfig;

Step 3. Create locales structure

Step 4. Add variables in each common.js file

After that I had all variables I asked chat

{
  "title": "Linkedin Post Generator 🚀",
  "posts_generated": "50.000 amazing posts generated 💫",
  "subtitle": "Generate high quality posts with AI like top LinkedIn creators. Time to go viral.",
  "inside_post": "Type or copy your post here",
  "submit_button": "Generate your post",
  "generated_post": "Your generated post",
  "post copied": "Post copied to clipboard",

  "prompts.story": "prompt",
  "prompts.crisp": "prompt",
  "prompts.list": "prompt",
  "prompts.unpopular_opinion": "prompt",

  "meta.viewport": "width=device-width, initial-scale=1",
  "meta.favicon": "👩‍💼",
  "meta.description": "Meta.",
  "meta.og.title": "LinkedIn Viral Post Generator with AI",
  "meta.og.type": "website",
  "meta.og.image": "https://postgenerator.app/cover.png",

  "vibes.story": "Story",
  "vibes.crisp": "Crisp",
  "vibes.list": "List",
  "vibes.unpopular_opinion": "Unpopular opinion",
  "vibes.case_study": "Case Study"

Step 4. Replace hard coded code in index

In your JavaScript/TypeScript code, you would then import the relevant locale file based on the user's chosen language.

First imports use translations.

import { useTranslation, Trans } from "next-i18next";

💡 Prompts, if your application using OpenAI can be also variables.

You would replace all the hard-coded text in your application with the respective keys from the locale files.

<button className="bg-blue-700 font-medium rounded-md w-full text-white px-4 py-2 hover:bg-blue-600 disabled:bg-blue-800">
  {loading && <LoadingDots color="white" style="large" />}
  {!loading && `Generate new post `}
</button>

Instead I use this- as I am adding variable

<button className="bg-blue-700 font-medium rounded-md w-full text-white px-4 py-2 hover:bg-blue-600 disabled:bg-blue-800">
  {loading && <LoadingDots color="white" style="large" />}
  {!loading && locale.submit_button }
</button>

Step 5. Create menu in NavBar to connect different languages

const languages = [
    { name: "English", flag: "🇬🇧", code: "en" },
    { name: "Deutsch", flag: "🇩🇪", code: "de" },
    { name: "Português", flag: "🇧🇷", code: "pt" },
    { name: "Français", flag: "🇫🇷", code: "fr" },
    { name: "Español", flag: "🇪🇸", code: "es" },
    { name: "中文", flag: "🇨🇳", code: "ch" },
    { name: "Italiano", flag: "🇮🇹", code: "it" },
    // add more languages as needed
  ];

  const currentLanguage =
    languages.find((language) => i18n.language === language.code) ||
    languages[0];

  console.log("currentlanguages", currentLanguage);

  const [isOpen, setIsOpen] = React.useState(false);
  const toggle = () => setIsOpen(!isOpen);

What am I doing now?

I am building different micro-tools for LinkedIn and actively develop Post generator https://www.postgenerator.app

If you like this article and would like to support me on my coding journey, here one of the open source project I am on.

Papermark.io - open source alternative to Docsend. Check it ⭐️

If you are building something in Open Source, share, I am curious to fork it 👀

Follow my journey, more micro-projects here https://linktr.ee/shnai

My Twitter https://twitter.com/shnai0

Comments

[Mateus Abelli]

I like i18n although I don't implement it too often in projects I enjoyed reading your process to add such feature.

I have a question, with this setup, is it possible to have next.js figure out the user's preferred language and automatically render the matching language?

[Iuliia Shnai]

Thanks Mateus!

It is actually a good questions. I actually have no idea. I did not build it or did not try. But understand what you mean.

I build just standard always users get on the English page.

[Mateus Abelli]

Oh that's cool, thanks for replying!

[Juan F Gonzalez]

Great stuff here! Love to see you building cool stuff with Next.js.

[Iuliia Shnai]

Thanks Juan. Are you building smth at the moment?

[Juan F Gonzalez]

Not anything code related atm. 😅
But building content for folks in SaaS.

[Iuliia Shnai]

That is great! Which type of content? For website or social?

[Juan F Gonzalez]

Mostly for websites. Blog content that can then be used for social media and to get more organic traffic. 😀

[Aydrian]

This is great. Where did you source all your translations? I'm also starting to build a lot using i18next.
I also created a i18next Backend Plugin for those who want to store their translations in a database using Prisma ORM.

[Iuliia Shnai]

Sourcing is all from ChatGPT:)

[Marc Seitz]

💪 Great job!

[Alim Dzhanibekov]

+

[Alim Dzhanibekov]

++

[Alim Dzhanibekov]

+++

[Mel♾️☁️]

Awesome job @shnai0 awesome job indeed!!

with this ... i am seeing that i really need to learn NextJS once i am done with python and done with JS. Wooow ... still got a roads to go.

[Iuliia Shnai]

Thanks Lionel!

It seems that it pretty simple language and very clear one.

I don’t know python:) maybe I should also look into it:)

[Leandro Duarte]

AWESOME!

[Iuliia Shnai]

Thanks Leandro 😊

[Gutem]

ch == Switzerland (derived from Confoederatio Helvetica)
cn == China

[Iuliia Shnai]

Omg

Thank you for noticing that Gutem. I was kind of confident it is like that. Need to push update for it.

[Ahmad Essam]

Nice work

[Iuliia Shnai]

Thank you Ahmad!

[TommyLeong]

Hello Iuliia. By any chance did you explore how i18n could pull latest translation content from an API? Not just on first launch, but on subsequent navigation or page refresh to always refer to latest translated content from backend.