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?

How install and select localisation library?
How I create each common.js file
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

Blog