LogoENEnglish

nextjs-i18n-مسیریابی-ترجمه-زبان-رندرینگ-استاتیک

Next.js امکان پشتیبانی از چند زبان را با مسیریابی بین‌المللی و بارگذاری محتوای ترجمه‌شده فراهم می‌کند. این مقاله نحوهٔ تشخیص locale از هدر مرورگر، ساخت مسیرهای پویا، بارگذاری دیکشنری‌های ترجمه، و تولید صفحات استاتیک برای زبان‌های مختلف را بررسی می‌کند.

InternationalizationLocaleTranslationgenerateStaticParams

~2 دقیقه مطالعه • بروزرسانی ۶ آبان ۱۴۰۴

تعریف اصطلاحات


  • 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، می‌توان اپلیکیشنی قابل توسعه و جهانی ساخت.


نوشته و پژوهش شده توسط دکتر شاهین صیامی

Next Article