Internationalization (i18n) Support

[mericcintosun]

Priority: Low
Category: Feature
Description: Multi-language support is missing. Integration with next-intl or react-i18next could be added.
Recommended Improvements:
i18n library integration
Translation files
Language switcher component
RTL support (if needed)

[bad-antics]

Here's a complete internationalization setup using next-intl:

1. Install Dependencies:

npm install next-intl

2. Project Structure:

├── messages/
│   ├── en.json
│   ├── tr.json          # Turkish
│   └── de.json          # German (or any other)
├── i18n/
│   ├── config.ts
│   ├── request.ts
│   └── routing.ts
├── middleware.ts
└── app/
    └── [locale]/
        ├── layout.tsx
        └── page.tsx

3. Translation Files (messages/en.json):

{
  "common": {
    "loading": "Loading...",
    "error": "An error occurred",
    "save": "Save",
    "cancel": "Cancel",
    "delete": "Delete",
    "edit": "Edit",
    "search": "Search",
    "noResults": "No results found"
  },
  "nav": {
    "home": "Home",
    "dashboard": "Dashboard",
    "settings": "Settings",
    "logout": "Logout"
  },
  "auth": {
    "login": "Login",
    "register": "Register",
    "email": "Email",
    "password": "Password",
    "forgotPassword": "Forgot password?",
    "loginSuccess": "Successfully logged in",
    "loginError": "Invalid email or password"
  },
  "dashboard": {
    "title": "Dashboard",
    "welcome": "Welcome back, {name}!",
    "stats": {
      "totalRisks": "Total Risks",
      "activeRisks": "Active Risks",
      "resolvedRisks": "Resolved Risks"
    }
  },
  "risks": {
    "title": "Risk Management",
    "create": "Create Risk",
    "severity": {
      "low": "Low",
      "medium": "Medium",
      "high": "High",
      "critical": "Critical"
    },
    "status": {
      "open": "Open",
      "inProgress": "In Progress",
      "resolved": "Resolved"
    }
  }
}

4. Turkish Translation (messages/tr.json):

{
  "common": {
    "loading": "Yükleniyor...",
    "error": "Bir hata oluştu",
    "save": "Kaydet",
    "cancel": "İptal",
    "delete": "Sil",
    "edit": "Düzenle",
    "search": "Ara",
    "noResults": "Sonuç bulunamadı"
  },
  "nav": {
    "home": "Ana Sayfa",
    "dashboard": "Kontrol Paneli",
    "settings": "Ayarlar",
    "logout": "Çıkış Yap"
  },
  "auth": {
    "login": "Giriş Yap",
    "register": "Kayıt Ol",
    "email": "E-posta",
    "password": "Şifre",
    "forgotPassword": "Şifremi unuttum?",
    "loginSuccess": "Başarıyla giriş yapıldı",
    "loginError": "Geçersiz e-posta veya şifre"
  },
  "dashboard": {
    "title": "Kontrol Paneli",
    "welcome": "Tekrar hoş geldin, {name}!",
    "stats": {
      "totalRisks": "Toplam Risk",
      "activeRisks": "Aktif Riskler",
      "resolvedRisks": "Çözülen Riskler"
    }
  },
  "risks": {
    "title": "Risk Yönetimi",
    "create": "Risk Oluştur",
    "severity": {
      "low": "Düşük",
      "medium": "Orta",
      "high": "Yüksek",
      "critical": "Kritik"
    },
    "status": {
      "open": "Açık",
      "inProgress": "Devam Ediyor",
      "resolved": "Çözüldü"
    }
  }
}

5. Configuration (i18n/config.ts):

export type Locale = 'en' | 'tr' | 'de';

export const locales: Locale[] = ['en', 'tr', 'de'];
export const defaultLocale: Locale = 'en';

export const localeNames: Record<Locale, string> = {
  en: 'English',
  tr: 'Türkçe',
  de: 'Deutsch'
};

// Optional: For RTL languages
export const rtlLocales: Locale[] = [];

export function isRtl(locale: Locale): boolean {
  return rtlLocales.includes(locale);
}

6. Request Configuration (i18n/request.ts):

import { getRequestConfig } from 'next-intl/server';
import { Locale, locales } from './config';

export default getRequestConfig(async ({ locale }) => {
  // Validate that the incoming locale is valid
  if (!locales.includes(locale as Locale)) {
    throw new Error(`Invalid locale: ${locale}`);
  }

  return {
    messages: (await import(`../messages/${locale}.json`)).default
  };
});

7. Routing Configuration (i18n/routing.ts):

import { defineRouting } from 'next-intl/routing';
import { createSharedPathnamesNavigation } from 'next-intl/navigation';
import { locales, defaultLocale } from './config';

export const routing = defineRouting({
  locales,
  defaultLocale,
  localePrefix: 'as-needed' // Only show prefix for non-default locales
});

// Export typed navigation components
export const { Link, redirect, usePathname, useRouter } = 
  createSharedPathnamesNavigation(routing);

8. Middleware (middleware.ts):

import createMiddleware from 'next-intl/middleware';
import { routing } from './i18n/routing';

export default createMiddleware(routing);

export const config = {
  // Match all pathnames except API routes, static files, etc.
  matcher: ['/', '/(tr|en|de)/:path*', '/((?!api|_next|_vercel|.*\\..*).*)']
};

9. Root Layout (app/[locale]/layout.tsx):

import { NextIntlClientProvider } from 'next-intl';
import { getMessages, getTranslations } from 'next-intl/server';
import { notFound } from 'next/navigation';
import { locales, isRtl, Locale } from '@/i18n/config';

interface Props {
  children: React.ReactNode;
  params: { locale: string };
}

export function generateStaticParams() {
  return locales.map((locale) => ({ locale }));
}

export async function generateMetadata({ params: { locale } }: Props) {
  const t = await getTranslations({ locale, namespace: 'common' });
  return {
    title: 'RiskOn',
  };
}

export default async function LocaleLayout({ children, params: { locale } }: Props) {
  // Validate locale
  if (!locales.includes(locale as Locale)) {
    notFound();
  }

  const messages = await getMessages();
  const dir = isRtl(locale as Locale) ? 'rtl' : 'ltr';

  return (
    <html lang={locale} dir={dir}>
      <body>
        <NextIntlClientProvider messages={messages}>
          {children}
        </NextIntlClientProvider>
      </body>
    </html>
  );
}

10. Language Switcher Component (components/LanguageSwitcher.tsx):

'use client';

import { useLocale } from 'next-intl';
import { usePathname, useRouter } from '@/i18n/routing';
import { locales, localeNames, Locale } from '@/i18n/config';

export function LanguageSwitcher() {
  const locale = useLocale() as Locale;
  const router = useRouter();
  const pathname = usePathname();

  const handleChange = (newLocale: Locale) => {
    router.replace(pathname, { locale: newLocale });
  };

  return (
    <div className="relative">
      <select
        value={locale}
        onChange={(e) => handleChange(e.target.value as Locale)}
        className="appearance-none bg-white border border-gray-300 rounded-md px-3 py-2 pr-8 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
      >
        {locales.map((loc) => (
          <option key={loc} value={loc}>
            {localeNames[loc]}
          </option>
        ))}
      </select>
      <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2">
        <svg className="h-4 w-4 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
        </svg>
      </div>
    </div>
  );
}

// Alternative: Flag-based switcher
export function LanguageSwitcherFlags() {
  const locale = useLocale() as Locale;
  const router = useRouter();
  const pathname = usePathname();

  const flags: Record<Locale, string> = {
    en: '🇬🇧',
    tr: '🇹🇷',
    de: '🇩🇪'
  };

  return (
    <div className="flex gap-2">
      {locales.map((loc) => (
        <button
          key={loc}
          onClick={() => router.replace(pathname, { locale: loc })}
          className={`text-2xl p-1 rounded transition-opacity ${
            locale === loc ? 'opacity-100 ring-2 ring-blue-500' : 'opacity-50 hover:opacity-75'
          }`}
          title={localeNames[loc]}
        >
          {flags[loc]}
        </button>
      ))}
    </div>
  );
}

11. Using Translations in Components:

// Server Component
import { getTranslations } from 'next-intl/server';

export default async function Dashboard() {
  const t = await getTranslations('dashboard');
  
  return (
    <div>
      <h1>{t('title')}</h1>
      <p>{t('welcome', { name: 'John' })}</p>
    </div>
  );
}

// Client Component
'use client';

import { useTranslations } from 'next-intl';

export function RiskCard({ risk }) {
  const t = useTranslations('risks');
  
  return (
    <div className="card">
      <span className="badge">
        {t(`severity.${risk.severity}`)}
      </span>
      <span className="status">
        {t(`status.${risk.status}`)}
      </span>
    </div>
  );
}

12. next.config.js:

const createNextIntlPlugin = require('next-intl/plugin');

const withNextIntl = createNextIntlPlugin('./i18n/request.ts');

/** @type {import('next').NextConfig} */
const nextConfig = {};

module.exports = withNextIntl(nextConfig);

Complete i18n setup with language switcher and Turkish support! 🌍

[rohan911438]

GM ,
could you please Assign me this Issue.
would not let you down