ساخت وب‌سایت چندزبانه با Next.js App Router

امروزه بسیاری از وب‌سایت‌ها برای دسترسی کاربران از کشورهای مختلف، از چند زبان پشتیبانی می‌کنند. در این مقاله یاد می‌گیریم چگونه با استفاده از Next.js App Router یک وب‌سایت چندزبانه با ساختاری تمیز، سریع و مناسب موتورهای جستجو ایجاد کنیم.

چرا App Router؟

استفاده از App Router مزایای زیادی دارد:

• آدرس‌های مجزا برای هر زبان (SEO بهتر)
• مدیریت ساده فایل‌های ترجمه
• عملکرد بالا با Static Generation
• ساختار پروژه تمیز و قابل توسعه

ساختار پروژه

app/
 ├── [lang]/
 │   ├── page.tsx
 │   ├── blog/
 │   └── projects/
 └── layout.tsx

در این ساختار، هر زبان داخل مسیر [lang] قرار می‌گیرد و صفحات به صورت خودکار براساس زبان انتخابی کاربر نمایش داده می‌شوند.

ایجاد فایل‌های ترجمه

برای هر زبان یک فایل جداگانه ایجاد کنید.

export const dictionary = {
  home: "خانه",
  blog: "وبلاگ",
  projects: "پروژه‌ها",
}

سپس براساس زبان فعلی، فایل مناسب را بارگذاری کنید.

تغییر زبان

برای تغییر زبان تنها کافی است مسیر فعلی را با زبان جدید جایگزین کنید.

<Link href="/fa">فارسی</Link>
<Link href="/en">English</Link>

در این حالت کاربر بدون از دست دادن مسیر فعلی، زبان سایت را تغییر می‌دهد.

بهینه‌سازی برای SEO

برای هر زبان بهتر است موارد زیر را به صورت جداگانه تولید کنید:

• عنوان صفحه (Title)
• توضیحات (Description)
• Open Graph
• لینک‌های Alternate Language
• Metadata

این کار باعث می‌شود موتورهای جستجو نسخه صحیح هر زبان را شناسایی کنند.

جمع‌بندی

پیاده‌سازی چندزبانه در Next.js تنها ترجمه متن‌ها نیست؛ بلکه ساختار URL، متادیتا و تجربه کاربری نیز اهمیت زیادی دارند. اگر از ابتدا پروژه را با معماری مناسب طراحی کنید، افزودن زبان‌های جدید در آینده بسیار ساده خواهد بود.