Internationalization Support

Complete guide to internationalization (i18n) in your Founderflow Boilerplate. Learn how to set up multi-language support, manage translations, and create localized user experiences.

Overview

🌍

Multi-language Support

The boilerplate includes comprehensive internationalization support with next-intl, providing seamless multi-language experiences for English, Sinhala, and Japanese users.

✓

Multiple Languages

English, Sinhala (සිංහල), Japanese (日本語)

✓

Route-based Localization

URLs like /en/, /si/, /jp/ for different languages

✓

Automatic Detection

Detect user's preferred language from browser

✓

Dynamic Translations

JSON-based translation files for easy management

✓

Type Safety

TypeScript support for translation keys

✓

SEO Optimization

Proper meta tags and hreflang attributes

Setup & Configuration

Locale Configuration

Configure supported locales and default language:

lib/config/locales.ts

export const locales = {

values: ['en', 'si', 'jp'],

default: 'en',

dropdown: [

{ label: 'English', value: 'en' },

{ label: 'සිංහල', value: 'si' },

{ label: '日本語', value: 'jp' }

]

};

export type Locale = typeof locales.values[number];

Next.js Configuration

Configure next-intl in your Next.js application:

next.config.ts

import createNextIntlPlugin from 'next-intl/plugin';

const withNextIntl = createNextIntlPlugin();

const nextConfig = {

experimental: {

typedRoutes: true

}

};

export default withNextIntl(nextConfig);

Translation Files

English Translation

Example English translation file structure:

locales/en.json

{

"GuestHeader": {

"Home": "Home",

"Blog": "Blog",

"SignIn": "Sign In",

"SignUp": "Sign Up"

"Hero": {

"Title": "Create Professional Invoices",

"Subtitle": "Streamline your billing process with our powerful invoice management system",

"GetStarted": "Get Started"

"Features": {

"Title": "Powerful Features",

"Subtitle": "Everything you need to manage your business"

}

Sinhala Translation

Example Sinhala translation file:

locales/si.json

{

"GuestHeader": {

"Home": "මුල් පිටුව",

"Blog": "බ්ලොග්",

"SignIn": "පුරන්න",

"SignUp": "ලියාපදිංචි වන්න"

"Hero": {

"Title": "වෘත්තීය ඉන්වොයිස් නිර්මාණය කරන්න",

"Subtitle": "අපගේ බලවත් ඉන්වොයිස් කළමනාකරණ පද්ධතිය සමඟ ඔබේ බිල් කිරීමේ ක්‍රියාවලිය සුවිශේෂී කරන්න",

"GetStarted": "ආරම්භ කරන්න"

}

Usage in Components

Using Translations

Use translations in your React components:

components/Hero.tsx

import { useTranslations } from 'next-intl';

export default function Hero() {

const t = useTranslations('Hero');

return (

{t('Title')}

</h1>

{t('Subtitle')}

</p>

{t('GetStarted')}

</button>

</section>

);

}

Language Switcher

Create a language switcher component:

components/LanguageSwitcher.tsx

'use client';

import { useLocale, useRouter, usePathname } from 'next/navigation';

import { locales } from '@/lib/config/locales';

export default function LanguageSwitcher() {

const locale = useLocale();

const router = useRouter();

const pathname = usePathname();

const switchLanguage = (newLocale: string) => {

const newPath = pathname.replace(`/{locale}`, `/{newLocale}`);

router.push(newPath);

};

return (

<select value={locale} onChange={(e) => switchLanguage(e.target.value)}>

{locales.dropdown.map((option) => (

{option.label}

</option>

))}

</select>

);

}

Next Steps

Now that you understand internationalization, explore these related areas:

Customization Guide

Learn how to customize your multi-language setup.

Deployment Guide

Deploy your internationalized application.