تعریف اصطلاحات
- Locale: شناسه‌ای برای زبان و تنظیمات منطقه‌ای کاربر
- en-US: انگلیسی ایالات متحده
- nl-NL: هلندی کشور هلند
- nl: هلندی بدون منطقه خاص
مسیریابی بین‌المللی
برای انتخاب locale مناسب، می‌توان از هدر Accept-Language مرورگر استفاده کرد. با استفاده از کتابخانه‌های @formatjs/intl-localematcher و Negotiator می‌توان زبان ترجیحی کاربر را تشخیص داد:
let headers = { 'accept-language': 'en-US,en;q=0.5' }
let languages = new Negotiator({ headers }).languages()
let locales = ['en-US', 'nl-NL', 'nl']
let defaultLocale = 'en-US'
match(languages, locales, defaultLocale) // -> 'en-US'ریدایرکت بر اساس locale
در فایل proxy.js می‌توان مسیر را بر اساس locale تنظیم کرد:
export function proxy(request) {
const { pathname } = request.nextUrl
const pathnameHasLocale = locales.some(
(locale) => pathname.startsWith(`/${locale}/`) || pathname === `/${locale}`
)
if (pathnameHasLocale) return
const locale = getLocale(request)
request.nextUrl.pathname = `/${locale}${pathname}`
return NextResponse.redirect(request.nextUrl)
}ساختار پوشه‌ها در app/
برای پشتیبانی از زبان‌های مختلف، فایل‌های داخل پوشه app/ باید زیر مسیر app/[lang] قرار بگیرند. این باعث می‌شود پارامتر lang به صفحات و layoutها منتقل شود:
export default async function Page({ params }) {
const { lang } = await params
return ...
}بارگذاری ترجمه‌ها
برای نمایش محتوای ترجمه‌شده، می‌توان از دیکشنری‌های جداگانه برای هر زبان استفاده کرد:
// dictionaries/en.json
{ "products": { "cart": "Add to Cart" } }
// dictionaries/nl.json
{ "products": { "cart": "Toevoegen aan Winkelwagen" } }سپس تابع getDictionary را برای بارگذاری ترجمه‌ها تعریف می‌کنیم:
export const getDictionary = async (locale: 'en' | 'nl') =>
dictionaries[locale]()در صفحه:
const dict = await getDictionary(lang)
return <button>{dict.products.cart}</button>رندرینگ استاتیک برای زبان‌ها
برای تولید صفحات استاتیک برای هر زبان، از generateStaticParams استفاده می‌کنیم:
export async function generateStaticParams() {
return [{ lang: 'en-US' }, { lang: 'de' }]
}در layout:
<html lang={(await params).lang}>
<body>{children}</body>
</html>جمع‌بندی
بین‌المللی‌سازی در Next.js با استفاده از مسیرهای پویا، بارگذاری ترجمه‌ها و رندرینگ استاتیک، تجربه‌ای چندزبانه و حرفه‌ای برای کاربران فراهم می‌کند. با ساختار مناسب پوشه‌ها و مدیریت locale، می‌توان اپلیکیشنی قابل توسعه و جهانی ساخت.