next-intl؛ ساده‌ترین راه برای چندزبانه کردن پروژه‌های Next.js

تقریباً هر پروژه‌ی جدی وب در نهایت به چندزبانه بودن (i18n) نیاز پیدا می‌کند؛ اما اگر خودتان سعی کرده باشید دستی این کار را انجام دهید، احتمالاً با این دردسرها روبه‌رو شده‌اید:

• مدیریت فایل‌های ترجمه به‌صورت پراکنده
• نبود type-safety برای کلیدها
• پیچیدگی در فرمت تاریخ، پول، اعداد و pluralها
• عدم هماهنگی بین Server Components و Client Components در Next.js

کتابخانه‌ی next-intl دقیقاً برای حل همین مشکلات طراحی شده است.

راه‌حل: next-intl با API ساده و type-safe

next-intl یک لایه‌ی i18n روی Next.js است که:

• با App Router و Server Components کاملاً سازگار است
• API مینیمال و مبتنی بر hooks دارد
• از ICU Message Format برای plural، formatting و متن غنی استفاده می‌کند
• برای کلیدهای ترجمه type-safety ارائه می‌کند

یک مثال ساده از استفاده:

tsx

و فایل ترجمه‌ی مربوطه:

json

مزایای اصلی next-intl در Next.js

۱. Type-safe بودن کلیدها و پارامترها

next-intl می‌تواند به کمک TypeScript مطمئن شود:

• کلید ترجمه را اشتباه ننوشته‌اید
• پارامترهای لازم برای message را حتماً پاس می‌دهید

ts

این یعنی بسیاری از باگ‌های i18n را قبل از اجرای کد، در زمان کامپایل می‌گیرید.

۲. پشتیبانی از ICU Message Syntax

با ICU می‌توانید:

• pluralها را حرفه‌ای هندل کنید
• متن‌های شرطی و پویا بسازید
• متن غنی (rich text) تولید کنید

json

tsx

۳. فرمت تاریخ، زمان و پول بدون سردرد

next-intl توابع کمکی برای فرمت کردن تاریخ، زمان و اعداد دارد که خودشان locale و time zone را درنظر می‌گیرند.

tsx

دیگر لازم نیست برای هر locale منطق جداگانه بنویسید.

۴. مسیردهی چندزبانه (Internationalized Routing)

next-intl با مسیردهی چندزبانه‌ی Next.js به‌خوبی یکپارچه می‌شود:

• /fa/blog، /en/blog، /de/blog و …
• حتی می‌توانید slugها را برای هر زبان محلی‌سازی کنید

این کار علاوه بر تجربه‌ی بهتر برای کاربر، برای SEO چندزبانه هم عالی است.

۵. سازگاری کامل با App Router و Server Components

برخلاف بعضی کتابخانه‌های قدیمی، next-intl به‌طور خاص برای دنیای جدید Next.js طراحی شده است:

• در Server Components می‌توانید پیام‌ها را در سرور resolve کنید
• در Client Components همان API (useTranslations) را استفاده می‌کنید
• ترکیب SSR، SSG و dynamic routing ساده‌تر می‌شود

یک ساختار پیشنهادی برای پروژه‌های واقعی

یک الگوی رایج این است:

• پوشه‌ی messages/ شامل JSON هر زبان
• لایه‌ی i18n برای پیکربندی localeها و middleware

ساختار ساده:

text

در layout.tsx مربوط به [locale] کانتکست i18n را ست می‌کنید و در بقیه‌ی صفحات فقط از useTranslations استفاده می‌کنید.

جمع‌بندی

با استفاده از next-intl:

• چندزبانه کردن Next.js از یک کار پیچیده به یک الگوی ساده و قابل‌تکرار تبدیل می‌شود
• برای کلیدها و پارامترها type-safety دارید
• plural، تاریخ، زمان و واحد پول را به شکل استاندارد مدیریت می‌کنید
• با App Router و Server Components هماهنگی کامل دارید

اگر پروژه‌ات چندزبانه است یا احتمال می‌دهی در آینده نیاز به زبان‌های دیگر پیدا کند، اضافه کردن next-intl در همین مرحله می‌تواند بعدها از refactorهای سنگین جلو‌گیری کند.