Building Next.js app in 7 different languages 🇫🇷 🇩🇪🇧🇷 with i18n. Open Source.
Tags: translations, opensource, react
Published: 2023-07-26 13:45:05

![Languages](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jbh1wlsl59vgepbm6yft.gif)

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


![Translations](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o25jssqvo10rsfay8cv4.gif)


## Resources I used to build it? 
Using ChatGPT 
Using next-i18next
https://github.com/i18next/next-i18next

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ak21yvgwvbm55upurmgi.png)


## 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**

```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**

```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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iyr0snwmu6rdctq90712.png)

![locales](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4u65l0fng7c2dfi8uf4e.png)

## Step 4. Add variables in each common.js file

After that I had all variables I asked chat

```js
{
  "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.
```tsx
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.

```tsx
<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

```tsx
<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

```tsx
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);

```

![NavBAr](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vbt3we2x2dgtepyb0kv3.png)


## 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 ⭐️ ](https://github.com/mfts/papermark)
 
![Stars](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tian4jdf4wgzr059u7kp.gif)


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