M

MLOG

فارسی

یاد بگیرید چگونه بین‌المللی‌سازی (i18n) یکپارچه را در اپلیکیشن‌های Next.js خود برای دستیابی به مخاطبان جهانی پیاده‌سازی کنید. این راهنما مسیر‌یابی، ترجمه محتوا و بهترین شیوه‌ها را پوشش می‌دهد.

بین‌المللی‌سازی در Next.js: ساخت اپلیکیشن‌های چندزبانه برای مخاطبان جهانی

در دنیای متصل امروز، ساخت اپلیکیشن‌هایی که به مخاطبان جهانی خدمات ارائه می‌دهند دیگر یک امر تجملی نیست، بلکه یک ضرورت است. Next.js، فریمورک قدرتمند ری‌اکت، ویژگی‌های قوی برای پیاده‌سازی بین‌المللی‌سازی (i18n) فراهم می‌کند و به شما امکان می‌دهد اپلیکیشن‌های چندزبانه‌ای بسازید که تجربه‌ای بومی‌سازی شده برای کاربران در سراسر جهان ارائه می‌دهند. این راهنمای جامع شما را با مفاهیم، تکنیک‌ها و بهترین شیوه‌های ضروری برای ساخت اپلیکیشن‌های بین‌المللی‌شده با Next.js آشنا می‌کند.

درک بین‌المللی‌سازی و بومی‌سازی

قبل از پرداختن به جزئیات i18n در Next.js، بیایید اصطلاحات کلیدی را روشن کنیم:

در اصل، i18n اپلیکیشن شما را برای بومی‌سازی آماده می‌کند. با جدا کردن عناصر وابسته به زبان از کد اصلی، بومی‌سازی اپلیکیشن برای بازارهای مختلف آسان‌تر می‌شود.

چرا بین‌المللی‌سازی را در Next.js پیاده‌سازی کنیم؟

پیاده‌سازی i18n در اپلیکیشن Next.js شما مزایای بی‌شماری دارد:

ویژگی‌ها و پیکربندی i18n در Next.js

Next.js از طریق ویژگی‌های مسیر‌یابی و مدیریت محتوای خود، پشتیبانی داخلی برای i18n ارائه می‌دهد. در ادامه، تفکیکی از ویژگی‌های مهم ارائه شده است:

۱. پیکربندی i18n در فایل next.config.js

پیکربندی اصلی i18n در فایل next.config.js قرار دارد. در اینجا یک نمونه آورده شده است:


/** @type {import('next').NextConfig} */
const nextConfig = {
  i18n: {
    locales: ['en', 'es', 'fr'], // آرایه‌ای از لوکیل‌های پشتیبانی شده (کدهای زبان)
    defaultLocale: 'en', // لوکیل پیش‌فرض برای استفاده
    localeDetection: true, // فعال/غیرفعال کردن تشخیص خودکار لوکیل بر اساس تنظیمات مرورگر (اختیاری)
    //  domains: [
    //  {
    //    domain: 'example.com',
    //    defaultLocale: 'en',
    //  },
    //  {
    //    domain: 'example.es',
    //    defaultLocale: 'es',
    //  },
    //  ],
  },
}

module.exports = nextConfig;

توضیح:

۲. مسیر‌یابی با پیشوندهای لوکیل

Next.js به‌طور خودکار مسیرها را با لوکیل پیشوندگذاری می‌کند. برای مثال، اگر صفحه‌ای در آدرس /about داشته باشید و لوکیل 'es' (اسپانیایی) باشد، URL به /es/about تبدیل می‌شود. این کار نسخه‌های زبانی مختلف صفحات را فعال کرده و به موتورهای جستجو امکان می‌دهد محتوا را برای هر لوکیل ایندکس کنند. فریمورک هدایت مجدد و مسیر‌یابی را برای شما مدیریت می‌کند.

۳. استفاده از هوک `useRouter`

هوک `useRouter` از `next/router` دسترسی به لوکیل فعلی و سایر اطلاعات مسیر‌یابی را فراهم می‌کند.


import { useRouter } from 'next/router';

function MyComponent() {
  const router = useRouter();
  const { locale, locales, defaultLocale } = router;

  return (
    

      
Current locale: {locale}

      
Available locales: {locales.join(', ')}

      
Default locale: {defaultLocale}

    

  );
}

export default MyComponent;

شیء `router` ویژگی‌های کلیدی زیر را ارائه می‌دهد:

استراتژی‌های ترجمه محتوا

هنگامی که اپلیکیشن Next.js خود را برای i18n پیکربندی کردید، باید استراتژی‌هایی برای ترجمه محتوای خود پیاده‌سازی کنید. در اینجا چندین رویکرد محبوب آورده شده است:

۱. استفاده از یک سیستم مدیریت ترجمه اختصاصی (TMS)

برای پروژه‌های بزرگ با زبان‌های زیاد، استفاده از یک TMS به شدت توصیه می‌شود. گزینه‌های محبوب عبارتند از:

مزایا:

۲. ایجاد فایل‌های ترجمه JSON

برای پروژه‌های کوچکتر، استفاده از فایل‌های JSON برای ذخیره ترجمه‌ها یک روش ساده و مؤثر است.

ساختار پوشه نمونه:


/src
├── locales
│   ├── en.json
│   └── es.json
├── components
│   └── MyComponent.js
└── pages
    └── index.js

نمونه `en.json`:


{
  "greeting": "Hello, world!",
  "welcomeMessage": "Welcome to our website."
}

نمونه `es.json`:


{
  "greeting": "¡Hola, mundo!",
  "welcomeMessage": "Bienvenido a nuestro sitio web."
}

نمونه `MyComponent.js`:


import { useRouter } from 'next/router';
import en from '../locales/en.json';
import es from '../locales/es.json';

function MyComponent() {
  const { locale } = useRouter();
  const t = locale === 'es' ? es : en;

  return (
    

      
{t.greeting}

      
{t.welcomeMessage}

    

  );
}

export default MyComponent;

این رویکرد انعطاف‌پذیری را فراهم می‌کند و برای پروژه‌های کوچکتر ساده است. به‌طور کلی به‌روزرسانی و نگهداری آن آسان است.

۳. استفاده از یک کتابخانه ترجمه

چندین کتابخانه جاوا اسکریپت، ترجمه محتوا را در کامپوننت‌های ری‌اکت شما ساده می‌کنند.

نمونه با next-i18next (نصب: npm install next-i18next i18next react-i18next):

یک فایل پیکربندی i18n ایجاد کنید (مثلاً i18n.js در پوشه ریشه پروژه):


// i18n.js
import { createServerSideHelpers } from 'next-i18next'
import { i18n } from './next-i18next.config'

export function initI18next(req, res, namespaces = ['common']) {
  const helpers = createServerSideHelpers(
    req, 
    res, 
    i18n, 
    namespaces
  )

  return helpers
}

export { appWithTranslation } from 'next-i18next'
export { i18n }

پیکربندی Next.js خود را برای next-i18next ایجاد کنید.


// next-i18next.config.js
const { i18n } = require('./next-i18next.config');

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  i18n: {
    defaultLocale: 'en',
    locales: ['en', 'es', 'fr'],
  },
  // سایر پیکربندی‌ها
}

module.exports = nextConfig

پیکربندی و ایمپورت ترجمه را به فایل `_app.js` خود اضافه کنید:


import { appWithTranslation } from 'next-i18next';
import '../styles/globals.css';

function MyApp({ Component, pageProps }) {
  return ;
}

export default appWithTranslation(MyApp);

یک پوشه ایجاد کرده و آن را با لوکیل‌های ترجمه‌های خود پر کنید.


/public
└── locales
    ├── en
    │   └── common.json
    ├── es
    │   └── common.json
    └── fr
        └── common.json

نمونه en/common.json:


{
  "greeting": "Hello, world!",
  "welcomeMessage": "Welcome to our website."
}

استفاده از ترجمه در یک کامپوننت:


import { useTranslation } from 'next-i18next';

function MyComponent() {
  const { t } = useTranslation('common');

  return (
    

      
{t('greeting')}

      
{t('welcomeMessage')}

    

  );
}

export default MyComponent;

این مثال از هوک `useTranslation` برای بازیابی ترجمه‌ها بر اساس لوکیل فعلی استفاده می‌کند.

مدیریت مسیرهای پویا و تولید سایت استاتیک (SSG)

بین‌المللی‌سازی هنگام کار با مسیرهای پویا (مانند پست‌های وبلاگ، صفحات محصول) و تولید سایت استاتیک (SSG) پیچیده‌تر می‌شود.

۱. مسیرهای پویا (مثلاً /blog/[slug])

برای مسیرهای پویا، باید مسیرهای صحیح را برای هر لوکیل در زمان ساخت با استفاده از `getStaticPaths` تولید کنید. این تابع آرایه‌ای از مسیرهایی را برمی‌گرداند که Next.js باید آن‌ها را از قبل رندر کند.


export async function getStaticPaths() {
  const paths = [];
  const locales = ['en', 'es', 'fr'];
  const posts = await fetchPosts(); // واکشی داده‌های پست‌های وبلاگ

  posts.forEach(post => {
    locales.forEach(locale => {
      paths.push({
        params: {
          slug: post.slug,
        },
        locale,
      });
    });
  });

  return {
    paths,
    fallback: false, // یا 'blocking' اگر می‌خواهید حالت بارگذاری نشان دهید
  };
}

export async function getStaticProps({ params, locale }) {
  const post = await getPostBySlug(params.slug, locale);

  return {
    props: {
      post,
    },
  };
}

توضیح:

۲. تولید سایت استاتیک (SSG) با `getStaticProps`

در `getStaticProps`، می‌توانید محتوای ترجمه شده را بر اساس پارامتر `locale` واکشی کنید.


export async function getStaticProps({ params, locale }) {
  // واکشی محتوا بر اساس لوکیل و پارامترها
  const { post } = await getPostBySlug(params.slug, locale);

  return {
    props: {
      post,
    },
  };
}

تابع `getPostBySlug` باید محتوای ترجمه شده برای اسلاگ و لوکیل داده شده را واکشی کند، که می‌تواند از فایل‌های ترجمه، پایگاه داده یا یک CMS بازیابی شود.

۳. رندر سمت سرور (SSR) با `getServerSideProps`

برای محتوایی که نیاز به واکشی در زمان درخواست دارد، از `getServerSideProps` استفاده کنید. این برای محتوایی که به طور مکرر تغییر می‌کند یا برای هر کاربر شخصی‌سازی شده است، مفید است.


export async function getServerSideProps({ params, locale, req, res }) {
  // واکشی داده‌ها بر اساس لوکیل و پارامترها (مثلاً از یک پایگاه داده)
  const data = await fetchData(params.slug, locale);

  return {
    props: {
      data,
    },
  };
}

بهترین شیوه‌ها برای بین‌المللی‌سازی در Next.js

پیروی از این بهترین شیوه‌ها به شما کمک می‌کند تا اپلیکیشن‌های چندزبانه قوی، قابل نگهداری و کاربرپسند بسازید:

ملاحظات سئو برای وب‌سایت‌های بین‌المللی‌شده

بهینه‌سازی وب‌سایت بین‌المللی‌شده شما برای موتورهای جستجو برای جذب ترافیک ارگانیک از سراسر جهان ضروری است. در اینجا برخی از بهترین شیوه‌های کلیدی سئو آورده شده است:

مثال: ساخت یک وبلاگ چندزبانه ساده

بیایید یک مثال ساده از یک وبلاگ چندزبانه با استفاده از Next.js ایجاد کنیم. این یک تصویر ملموس‌تر از نحوه اعمال مفاهیم مورد بحث در بالا ارائه می‌دهد.

۱. راه‌اندازی پروژه

یک پروژه جدید Next.js ایجاد کنید:


npx create-next-app my-multi-lang-blog
cd my-multi-lang-blog

۲. پیکربندی i18n (`next.config.js`)


/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  i18n: {
    locales: ['en', 'es', 'fr'],
    defaultLocale: 'en',
  },
}

module.exports = nextConfig

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

یک پوشه `locales` در دایرکتوری ریشه ایجاد کنید و فایل‌های JSON زیر را اضافه کنید:

locales/en.json:


{
  "title": "Welcome to My Blog",
  "postTitle": "My First Post",
  "postContent": "This is the content of my first blog post."
}

locales/es.json:


{
  "title": "Bienvenido a mi Blog",
  "postTitle": "Mi Primer Post",
  "postContent": "Este es el contenido de mi primer publicación de blog."
}

locales/fr.json:


{
  "title": "Bienvenue sur Mon Blog",
  "postTitle": "Mon Premier Article",
  "postContent": "Ceci est le contenu de mon premier article de blog."
}

۴. ایجاد کامپوننت پست وبلاگ (مثلاً `components/BlogPost.js`)


import { useRouter } from 'next/router';
import en from '../locales/en.json';
import es from '../locales/es.json';
import fr from '../locales/fr.json';

function BlogPost() {
  const router = useRouter();
  const { locale } = router;

  let translations;
  switch (locale) {
    case 'es':
      translations = es;
      break;
    case 'fr':
      translations = fr;
      break;
    default:
      translations = en;
  }

  return (
    

      
{translations.postTitle}

      
{translations.postContent}

    

  );
}

export default BlogPost;

۵. ایجاد صفحه اصلی (`pages/index.js`)


import { useRouter } from 'next/router';
import BlogPost from '../components/BlogPost';
import en from '../locales/en.json';
import es from '../locales/es.json';
import fr from '../locales/fr.json';

function HomePage() {
  const router = useRouter();
  const { locale, locales } = router;

  let translations;
  switch (locale) {
    case 'es':
      translations = es;
      break;
    case 'fr':
      translations = fr;
      break;
    default:
      translations = en;
  }

  return (
    

      
{translations.title}

      
      

        {locales.map((l) => (
          
            {l.toUpperCase()}
          
        ))}
      

    

  );
}

export default HomePage;

این مثال ساده، اصول بنیادین بین‌المللی‌سازی در Next.js را به نمایش می‌گذارد. می‌توانید این چارچوب پایه را گسترش دهید تا ویژگی‌های پیچیده‌تری مانند مسیرهای پویا و یکپارچه‌سازی با سیستم‌های مدیریت ترجمه را شامل شود. بهبود لینک‌های بالا با کامپوننت `Link` و افزودن ویژگی `locale` مناسب را در نظر بگیرید.

۶. اجرای اپلیکیشن

اپلیکیشن را با دستور زیر اجرا کنید:


npm run dev

اکنون می‌توانید به وبلاگ خود در آدرس‌های `http://localhost:3000` (انگلیسی)، `http://localhost:3000/es` (اسپانیایی) و `http://localhost:3000/fr` (فرانسوی) دسترسی پیدا کنید. باید ببینید که عنوان و محتوای پست وبلاگ بر اساس لوکیل انتخاب شده ترجمه شده است.

نتیجه‌گیری

Next.js مجموعه‌ای جامع از ویژگی‌ها را برای پیاده‌سازی بین‌المللی‌سازی در اپلیکیشن‌های وب شما فراهم می‌کند. با پیروی از اصول و تکنیک‌های ذکر شده در این راهنما، می‌توانید اپلیکیشن‌های چندزبانه‌ای بسازید که تجربیات بومی‌سازی شده را به کاربران در سراسر جهان ارائه می‌دهند. به یاد داشته باشید که استراتژی i18n خود را زود برنامه‌ریزی کنید، روش ترجمه مناسب برای نیازهای خود را انتخاب کنید و تجربه کاربری را در اولویت قرار دهید. با برنامه‌ریزی و اجرای دقیق، می‌توانید اپلیکیشن‌هایی بسازید که با مخاطبان جهانی ارتباط برقرار کرده و فرصت‌های جدیدی برای رشد ایجاد کنند. یادگیری مداوم، همگام بودن با آخرین نسخه‌ها و بهترین شیوه‌ها تضمین می‌کند که از ابزارها و فناوری‌های خود به طور مؤثر استفاده می‌کنید.

با پیشرفت فناوری، انتظار می‌رود ویژگی‌های پیشرفته‌تری در زمینه i18n ظهور کنند. توانایی دستیابی به کاربران در فرهنگ‌ها و گروه‌های زبانی مختلف همچنان یک اولویت کلیدی برای توسعه‌دهندگان اپلیکیشن در سراسر جهان باقی خواهد ماند. بنابراین، تسلط بر اصول i18n یک مهارت ارزشمند است که ارزش شما را در چشم‌انداز توسعه جهانی امروز افزایش می‌دهد.

بین‌المللی‌سازی در Next.js: ساخت اپلیکیشن‌های چندزبانه برای مخاطبان جهانی | MLOG