Multi Lingual App with NextJS, i18next & Myelin AI

Step 1: Create NextJS Project

We will run this command to start a new next js project

npx create-next-app@latest

Step 2: Add chadcn

Next, lets add chadcn into our project. Myelin is heavily inspired from chadcn and uses a lot of its primities as a building blocks to create custom components such as language-switcher

npx shadcn@latest init

Step 3: Add locales

Next, lets add locales into our application. We are going to create a single namespaced locale called common.json inside locales/en directory. Myelin supports both namespaced and non-namespaced locales. But I highly encourage you to stick to namespaced locales.

{
    "title": "Welcome to the app"
}

Step 4: Add i18next boilerplate code

Next lets add the i18n-next and friends into our app. We can use the following command to do so:

npx myelin.dev@latest add i18next

Running this will do the following:

Install core i18next library and additional modules for language detection, backend chaining, and resource transformation.

Implement various utility functions and components in the libs/i18n-next directory, including cookie management, language detection, configuration, providers, and custom hooks for translation functionality.

Step 5: Wrap layout.tsx

We are going to wrap layout component with I18NextHtmlProvider

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <I18NextHtmlProvider>
      ...
    </I18NextHtmlProvider>
  );
}

Step 6: Generate types

Before we can start using the translations, let's generate types. This will help us with type completion when using the useTranslation hook. We can run npx myelin.dev@latest upsert and select i18next.d.ts. This is going to generate a custom types under types directory.

npx myelin.dev@latest upsert i18next.d.ts

Step 7: Use the translations

With custom types generated, we can use the custom useTranslation hook like so:

"use client";

import { Button } from "@/components/ui/button";
import { useTranslation } from "@/libs/i18n-next/use-translation";

export const Banner = () => {
  const { t } = useTranslation(["banner", "common"]);
  return (
    <section className="flex flex-col justify-center items-center mt-32">
      <h1 className="text-5xl font-bold">{t("title")}</h1>

      <p className="mt-4 text-xl font-mono">{t("description")}</p>

      <Button className="rounded-full mt-4">{t("cta")}</Button>
    </section>
  );
};

You'll notice type completion when typing namespaces. This is before we generated types in previous step.

We are done with frontend section. Now the fun part, multi lingual translations with Myelin AI.

intro

Alright, now we have the frontend, we are ready to start our translation infra pipeline with myelin.

Myelin is an open source local first translation infrastructure, that makes it super easy to manage, sync and run multi language translations. First step in using is is to initialize it.

npx myelin.dev@latest

You will be asked to provide source translation, target translations and AI service provider of your choice. If you want you can even add custom ai provider. To keep things simple we are going to select openai.

You will also need to get your api keys and saved it in .env file

Translate

Now we are ready to run the translation pipeline. We can do that with the following command

npx myelin.dev@latest translate

When you run this command, Myelin loads your source JSON files (e.g., locales/en/common.json), identifies any new or updated translation strings, produces translations for your specified target languages, and creates or updates the relevant target language JSON namespaced files (e.g., locales/fr/common.json, locales/es/common.json, locales/zh/common.json).

To check if it is actually working, we can import language-switcher component.

Note: language-switcher is built on top of the following chadcn components: dropdown-menu and button. To install them, please use this script:

npx shadcn@latest add dropdown-menu button