How to Build a Bilingual Portfolio with React and i18next: A Step-by-Step Guide

Hello Byte Space Nepal Family,

I recently did something pretty cool with my portfolio website; I made it bilingual! English and Nepali. And honestly? Adding multi-language support was way easier than I thought it would be. Let me tell you the whole story.

Why I bother with a Bilingual Portfolio?

You know what hit me one day? My portfolio was only in English. Sure, that’s fine for international clients and recruiters. But what about my family? My neighbors? The local tech community in Kathmandu?

My mom wanted to see what I’d built, but she kept asking me to translate everything. My cousin, who’s learning to code, found it easier to understand technical concepts in Nepali. That’s when it clicked; why not make my portfolio accessible to everyone?

Plus, let’s be real; having a multilingual portfolio makes you stand out. Not many developers in Nepal or India do this, and it shows you care about inclusivity and user experience (UX).

The “Oh No” Moment 😅

My first thought was: “Do I need to create two separate websites? Copy-paste everything? Maintain two codebases?”

Spoiler alert: Nope! That would be a maintenance nightmare.

I started Googling (as we all do), and that’s when I discovered i18next – a JavaScript library that handles translations like a boss. It works beautifully with React, which is what I was using.

The Game Plan: Setting Up React-i18next

Here’s how I approached the implementation:

1. Keep It Simple (KISS)

I decided to use just two dependencies:

1. i18next – The core translation engine.
2. react-i18next – React bindings to make it work smoothly.

2. Organize Your Locales

I created a clean folder structure to keep my JSON translation files organized:

src/
├── i18n.ts                    # Configuration file
├── locales/
│   ├── en/
│   │   └── translation.json   # English text
│   └── ne/
│       └── translation.json   # Nepali text

3. Writing Natural Translations

My English file was standard, but for the Nepali version, I didn’t just use Google Translate. Pro tip: Don’t be a robot. Write like a human.

1. “Projects” translated as “परियोजनाहरू” (Sounds like a textbook).
2. “मेरा कामहरू” (My Works) – Sounds way more personal and engaging!

The Implementation (Step-by-Step)

Step 1: Install the Packages

npm install i18next react-i18next

Step 2: Configure i18n.ts

This file is the brain of your translation setup. I even added a localStorage check so the site remembers your language choice!

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import en from './locales/en/translation.json';
import ne from './locales/ne/translation.json';

i18n
  .use(initReactI18next)
  .init({
    resources: {
      en: { translation: en },
      ne: { translation: ne },
    },
    lng: localStorage.getItem('language') || 'en', // Remembers user choice
    fallbackLng: 'en',
  });

export default i18n;

Step 3: Use the ‘t’ Hook in Components

Using the translations in your React components is super clean.

import { useTranslation } from 'react-i18next';

const Hero = () => {
  const { t } = useTranslation();
  return <h1>{t('hero.greet')}</h1>;
};

Challenges I Faced (And How I Solved Them)

1. Challenge: Translating Arrays If your bio has multiple paragraphs in an array, use { returnObjects: true } in the t function to map through them.
2. Challenge: Devanagari Font Rendering Nepali text can look “boxy” or weird on some browsers. I fixed this by using the ‘Noto Sans Devanagari’ Google Font in my CSS.
3. Challenge: TypeScript Errors TypeScript loves to complain about JSON shapes. I used simple type assertions (as string[]) to keep the compiler happy.

Key Learnings

1. Start Small: Translate the navbar first, then move to the bigger sections.
2. Think Like a Writer: Your goal is to convey the same feeling, not just the same words.
3. Performance is Great: Two small JSON files won’t slow down your site. Don’t let “bundle size” scares stop you.

The Result?

Now my portfolio speaks both English and Nepali. My mom can finally understand what I do (sort of ). Local recruiters in Nepal appreciate the extra effort, and I leveled up my frontend development skills!

Now, Go make your website speak multiple languages! If you get stuck or need help with Nepali translations, drop a comment below.

One Day, One Topic, Infinite Growth

#WebDev #ReactJS #i18next #Portfolio #NepalTech #Javascript #Internationalization