Ecme - The Ultimate Next & TypeScript Web Template

ما استفاده می‌کنیم next-intl برای مدیریت بین‌المللی‌سازی (i18n). به طور پیش‌فرض، استارتر شامل تنظیمات i18n نمی‌شود، زیرا هر پروژه به این ویژگی نیاز ندارد. با این حال، ما دو تنظیم متفاوت ارائه می‌دهیم تا به هر دو سناریو پاسخ دهند: بدون مسیریابی i18n (پیش‌فرض) و با مسیریابی i18n.

ما i18n را به طور پیش‌فرض در ماژول ناوبری یکپارچه کرده‌ایم. اگر به i18n در اپلیکیشن خود نیاز دارید، ممکن است لازم باشد که فیلد activeNavTranslation در src/configs/app.config.ts را به true تغییر دهید.


// src/configs/app.config.ts
export const appConfig: AppConfig = {
    ...
    activeNavTranslation: true
}

بدون مسیریابی i18n

این تنظیم برای سادگی طراحی شده است، که به شما اجازه می‌دهد ترجمه‌ها را بدون دخالت ساختار URL‌ها مدیریت کنید، که در دمو ما پیاده‌سازی شده است.

فایل‌های ترجمه خود را به پوشه messages در دایرکتوری ریشه اضافه کنید:
```
messages/
├── en.json
├── es.json
└── fr.json
```
این ساده‌ترین مثال برای اضافه کردن کلید ترجمه به فایل‌های JSON است
```
// messages/en.json
{
    "title": "Home",
}
```
```
// messages/es.json
{
    "title": "Inicio",
}
```

اپلیکیشن خود را با LocaleProvider در src/app/layout.tsx و پراپ‌های لازم را تزریق کنید

// src/app/layout.tsx
...
import LocaleProvider from "@/components/template/LocaleProvider";
import { getLocale, getMessages } from "next-intl/server";

export default async function RootLayout({
    children,
}: Readonly<{
    children: ReactNode;
}>) {

    const locale = await getLocale();

    const messages = await getMessages();

    ...                          

    return (
        <html suppressHydrationWarning>
            <body suppressHydrationWarning>
                <LocaleProvider locale={locale} messages={messages}>
                    <ThemeProvider locale={locale} theme={theme}>
                        ...other components
                        {children}
                    </ThemeProvider>
                </LocaleProvider>  
            </body>
        </html>
    );
}

اکنون می‌توانید در کامپوننت‌های صفحه خود یا هر جای دیگری از hook useTranslation استفاده کنید

import {useTranslations} from 'next-intl';
 
export default function HomePage() {
    const t = useTranslations();
    return <h1>{t('title')}</h1>;
}

با مسیریابی i18n

Next Intl یک تنظیم مسیریابی i18n فراهم می‌کند، که از مسیرهای منحصر به فرد برای هر زبان که اپلیکیشن شما از آن پشتیبانی می‌کند استفاده می‌کند، این تنظیم می‌تواند در صورتی که به مسیریابی مبتنی بر پیشوند (مثلاً /en/about) یا مسیریابی مبتنی بر دامنه (مثلاً en.example.com) نیاز داشته باشید مفید باشد.

تنظیم مسیریابی i18n در یک اپلیکیشن Next.js نسبت به تنظیم بالا نیاز به تلاش بیشتری دارد. این تنظیم شامل تغییرات در ساختار پروژه و پیکربندی‌های اضافی است.

اگر قصد دارید مسیریابی i18n را پیاده‌سازی کنید، به مستندات رسمی next-intl برای راهنمای جامع مراجعه کنید: تنظیم مسیریابی اپلیکیشن با مسیریابی i18n

تغییر زبان

اگر نیاز به تغییر زبان به صورت پویا (بدون مسیریابی i18n) دارید، می‌توانید از شی i18n که توسط hook useTranslation فراهم می‌شود برای تغییر زبان فعلی استفاده کنید.

'use client'
                
import { setLocale } from '@/server/actions/locale'

const Component = () => {

    const handleUpdateLocale = async (locale: string) => {
        await setLocale(locale)
    }

    return (
        <button onClick={() => handleUpdateLocale('fr')}>تغییر زبان</button>
    )
}

export default Component

تنظیم زبان پیش‌فرض

برای تنظیم زبان پیش‌فرض، ممکن است لازم باشد که به src/configs/app.config.ts مراجعه کنید و مقدار فیلد locale را تغییر دهید.

export const appConfig: AppConfig = {
    ...
    locale: 'fr'
}

اضافه کردن لوکال جدید

برای پشتیبانی از زبان جدید در اپلیکیشن خود، یک فایل JSON جدید برای لوکال داخل پوشه messages ایجاد کنید. برای مثال، برای اضافه کردن ترجمه‌های فرانسوی، یک فایل به نام messages/fr.json ایجاد کنید:

// messages/fr.json
{
    "HomePage": {
        "title": "Bonjour le monde!",
        "about": "Aller à la page à propos"
    }
}

مقدار لوکال جدید را در src/i18n/dateLocales.ts ثبت کنید.

export const dateLocales: {
    [key: string]: () => Promise<ILocale>
} = {
    ...
    fr: () => import('dayjs/locale/fr'),
}

برای مسیریابی i18n، ممکن است لازم باشد که مقدار لوکال جدید را به پیکربندی مسیریابی و میانی‌افزار اضافه کنید.

// src/app/layout.tsx ... import LocaleProvider from "@/components/template/LocaleProvider"; import { getLocale, getMessages } from "next-intl/server"; export default async function RootLayout({ children, }: Readonly<{ children: ReactNode; }>) { const locale = await getLocale(); const messages = await getMessages(); ... return ( <html suppressHydrationWarning> <body suppressHydrationWarning> <LocaleProvider locale={locale} messages={messages}> <ThemeProvider locale={locale} theme={theme}> ...other components {children} </ThemeProvider> </LocaleProvider> </body> </html> ); }

'use client' import { setLocale } from '@/server/actions/locale' const Component = () => { const handleUpdateLocale = async (locale: string) => { await setLocale(locale) } return ( <button onClick={() => handleUpdateLocale('fr')}>تغییر زبان</button> ) } export default Component