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