feat(i18n): implement language switching and localization support
- Remove i18next configuration and dependencies - Add language switcher component - Integrate language change functionality with cookies - Update translations for English and Persian - Modify layout and page components to support dynamic language rendering - Refactor Tailwind CSS configuration for custom colors
This commit is contained in:
@@ -10,7 +10,7 @@ export default async function Home() {
|
||||
const data = await getData();
|
||||
|
||||
return (
|
||||
<main className="flex min-h-screen flex-col items-center justify-between p-24 text-gray-300">
|
||||
<main className="flex min-h-screen flex-col items-center justify-between p-24 text-bg-primary">
|
||||
ssss
|
||||
</main>
|
||||
);
|
||||
|
||||
+1
-1
@@ -59,7 +59,7 @@
|
||||
}
|
||||
|
||||
:root {
|
||||
--primary: #6366F1;
|
||||
--primary: #FA003F;
|
||||
--secondary: #A78BFA;
|
||||
--textColorLight: #FFFFFF;
|
||||
--textColorGray: #222222;
|
||||
|
||||
+8
-9
@@ -1,23 +1,22 @@
|
||||
import type { Metadata } from 'next';
|
||||
import './globals.css';
|
||||
import { I18nextProvider } from 'react-i18next';
|
||||
import i18n from '../config/i18n';
|
||||
import { cookies } from 'next/headers';
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: 'Create Next App',
|
||||
description: 'Generated by create next app',
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
export default async function RootLayout({
|
||||
children,
|
||||
}: {
|
||||
}: Readonly<{
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
}>) {
|
||||
const locale = (await cookies()).get('lang')?.value || 'en';
|
||||
|
||||
return (
|
||||
<html lang="en">
|
||||
<I18nextProvider i18n={i18n}>
|
||||
<body>{children}</body>
|
||||
</I18nextProvider>
|
||||
<html lang={locale} dir={locale === 'fa' ? 'rtl' : 'ltr'}>
|
||||
<body>{children}</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
|
||||
+9
-1
@@ -1,4 +1,6 @@
|
||||
// ... existing imports ...
|
||||
import ChangeLangButton from '@/components/layout/languageSwitcher';
|
||||
import { changeLanguage, t } from '@/locales/translates';
|
||||
|
||||
async function getData() {
|
||||
// Simulate a delay to show server-side data fetching
|
||||
@@ -6,12 +8,18 @@ async function getData() {
|
||||
return { message: 'This data was fetched on the server!' };
|
||||
}
|
||||
|
||||
const change = () => {
|
||||
changeLanguage('fa');
|
||||
};
|
||||
|
||||
export default async function Home() {
|
||||
const data = await getData();
|
||||
|
||||
return (
|
||||
<main className="flex min-h-screen flex-col items-center justify-between p-24 text-gray-300">
|
||||
ssss
|
||||
<span>{t('pages_home_title') as string}</span>
|
||||
|
||||
<ChangeLangButton />
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,13 +1,12 @@
|
||||
import { useTranslation } from 'react-i18next';
|
||||
const { t } = useTranslation('routes');
|
||||
import { t, translates } from '@/locales/translates';
|
||||
|
||||
export default {
|
||||
home: {
|
||||
title: t('home'),
|
||||
title: t('pages_home_title'),
|
||||
route: () => '/',
|
||||
},
|
||||
about: {
|
||||
title: t('about'),
|
||||
title: t('pages_about_title'),
|
||||
route: () => '/about',
|
||||
},
|
||||
};
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
'use client';
|
||||
import React, { ButtonHTMLAttributes, ReactNode } from 'react';
|
||||
|
||||
interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
||||
|
||||
@@ -0,0 +1,17 @@
|
||||
'use client';
|
||||
import { changeLanguage, TLocales } from '@/locales/translates';
|
||||
import Button from '../Button';
|
||||
|
||||
export default function ChangeLangButton() {
|
||||
const changeLang = (lang: TLocales) => {
|
||||
changeLanguage(lang);
|
||||
window.location.reload(); // Reload to get new SSR content
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Button onClick={() => changeLang('en')}>English</Button>
|
||||
<Button onClick={() => changeLang('fa')}>فارسی</Button>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,19 +0,0 @@
|
||||
import i18n from 'i18next';
|
||||
import { initReactI18next } from 'react-i18next';
|
||||
import Backend from 'i18next-http-backend';
|
||||
|
||||
i18n
|
||||
.use(Backend)
|
||||
.use(initReactI18next)
|
||||
.init({
|
||||
fallbackLng: 'en',
|
||||
debug: false,
|
||||
interpolation: {
|
||||
escapeValue: false,
|
||||
},
|
||||
backend: {
|
||||
loadPath: '/locales/{{lng}}/{{ns}}.json',
|
||||
}
|
||||
});
|
||||
|
||||
export default i18n;
|
||||
@@ -0,0 +1,10 @@
|
||||
const en = {
|
||||
pages_home_title: 'Home',
|
||||
pages_home_description: 'Welcome to the home page',
|
||||
pages_about_title: 'About Us',
|
||||
pages_about_description: 'Learn more about us on this page',
|
||||
pages_contact_title: 'Contact Us',
|
||||
pages_contact_description: 'Get in touch with us through this page',
|
||||
};
|
||||
|
||||
export default en;
|
||||
@@ -0,0 +1,12 @@
|
||||
import { Translates } from './translates';
|
||||
|
||||
const fa = {
|
||||
pages_home_title: 'صفحهی اصلی',
|
||||
pages_home_description: 'Welcome to the home page',
|
||||
pages_about_title: 'About Us',
|
||||
pages_about_description: 'Learn more about us on this page',
|
||||
pages_contact_title: 'Contact Us',
|
||||
pages_contact_description: 'Get in touch with us through this page',
|
||||
} as Translates;
|
||||
|
||||
export default fa;
|
||||
@@ -0,0 +1,57 @@
|
||||
import en from './en';
|
||||
import fa from './fa';
|
||||
|
||||
// Universal getCookie function
|
||||
export function getCookie(name: string): string | undefined {
|
||||
if (typeof window !== 'undefined') {
|
||||
// Client-side
|
||||
const match = document.cookie.match(
|
||||
new RegExp('(^| )' + name + '=([^;]+)'),
|
||||
);
|
||||
return match ? decodeURIComponent(match[2]) : undefined;
|
||||
} else {
|
||||
// Server-side (Next.js App Router)
|
||||
try {
|
||||
// Dynamically import to avoid errors in client bundle
|
||||
const { cookies } = require('next/headers');
|
||||
return cookies().get(name)?.value;
|
||||
} catch {
|
||||
return undefined;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Universal setCookie function to change language
|
||||
export function changeLanguage(lang: TLocales, days = 365) {
|
||||
if (typeof window !== 'undefined') {
|
||||
// Client-side
|
||||
const expires = new Date(Date.now() + days * 864e5).toUTCString();
|
||||
document.cookie = `lang=${encodeURIComponent(lang)}; expires=${expires}; path=/`;
|
||||
} else {
|
||||
// Server-side (Next.js App Router)
|
||||
try {
|
||||
const { cookies } = require('next/headers');
|
||||
cookies().set('lang', lang, { path: '/', maxAge: days * 24 * 60 * 60 });
|
||||
} catch {
|
||||
// No-op on server if not available
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export const locales = {
|
||||
en: en as Translates,
|
||||
fa,
|
||||
} as Record<TLocales, Translates>;
|
||||
|
||||
export const translates = (key: keyof Translates): string | (() => string) => {
|
||||
const lang = (getCookie('lang') || 'en') as TLocales;
|
||||
return locales[lang][key] || locales.en[key] || key;
|
||||
};
|
||||
|
||||
export const t = (key: keyof Translates) => translates(key);
|
||||
|
||||
export type TLocales = 'en' | 'fa';
|
||||
|
||||
export type Translates = {
|
||||
[K in keyof typeof en]: string | (() => string);
|
||||
};
|
||||
Reference in New Issue
Block a user