بومی سازی برنامه Next.js شما – مجله Smashing

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

/** @type {import('next').NextConfig} */

module.exports = {
  reactStrictMode: true,
  i18n: {
    locales: ['en', 'gc'],
    defaultLocale: 'en',
  }
}

توجه داشته باشید: خط اول به سرور TS اجازه می دهد (اگر در پروژه TypeScript هستید یا اگر از VSCode استفاده می کنید) که ویژگی هایی هستند که در شی پیکربندی پشتیبانی می شوند. اجباری نیست اما قطعا یک ویژگی خوب است.

شما دو کلید ویژگی را در داخل یادداشت خواهید کرد i18n هدف – شی:

• locales
  فهرستی از همه مناطق پشتیبانی شده توسط برنامه شما. یک است array از strings.
• defaultLocale
  محل ریشه اصلی شما. این تنظیمات پیش‌فرض زمانی است که یا هیچ اولویتی پیدا نمی‌شود یا شما مجبور به استفاده از root هستید.

این مقادیر دارایی مسیرها را تعیین می‌کنند، بنابراین زیاد روی آن‌ها فانتزی نکنید. با استفاده از موارد معتبر ایجاد کنید کد محلی و/یا کدهای کشور و با حروف کوچک بچسبانید زیرا a ایجاد می کنند url به زودی.

اکنون برنامه شما دارای چندین منطقه پشتیبانی شده است، آخرین چیزی که باید در Next.js از آن آگاه باشید وجود دارد. اکنون هر مسیری در هر محلی وجود دارد، و چارچوب می‌داند که آنها یکسان هستند. اگر می خواهید به یک منطقه خاص پیمایش کنید، باید a locale پشتیبانی به ما Link جزء، در غیر این صورت، بر اساس مرورگر باز می گردد Accept-Language سرتیتر.

<Link href="https://smashingmagazine.com/" locale="de"><a>Home page in German</a></Link>

در نهایت، شما می خواهید یک لنگر بنویسید که فقط از محلی انتخاب شده برای کاربر تبعیت می کند و آنها را به مسیر مناسب ارسال می کند. که به راحتی با useRouter قلاب سفارشی از Next.js، آن را به شما برمی گرداند object و منتخب locale خواهد بود key در آنجا.

import type { FC } from 'react'
import Link from 'next/link'
import { useRouter } from 'next/router'

const Anchor: FC<{ href: string }> = ({ href, children }) => {
  const { locale } = useRouter()

  return (
    <Link href={href} locale={locale}>
      <a>{children}</a>
    </Link>
  )
}

Next.js شما اکنون به طور کامل برای بین المللی شدن آماده است. این خواهد شد:

• منطقه مورد نظر کاربر را از قسمت انتخاب کنید Accepted-Languages عنوان در درخواست ما: با حسن نیت از Next.js.
• کاربر را همیشه به مسیری بفرستید که از اولویت کاربر پیروی می کند: با استفاده از ما Anchor جزء ایجاد شده در بالا؛
• در صورت لزوم به زبان پیش فرض برگردید.

آخرین کاری که باید انجام دهیم این است که مطمئن شویم از عهده ترجمه ها بر می آییم. در حال حاضر، مسیریابی به خوبی کار می کند، اما هیچ راهی برای تنظیم محتوای هر صفحه وجود ندارد.

ایجاد دیکشنری

صرف نظر از اینکه از یک سرویس مدیریت ترجمه استفاده می کنید یا متون خود را به روش دیگری دریافت می کنید، چیزی که ما در پایان می خواهیم یک شی JSON برای جاوا اسکریپت ما است تا در طول زمان اجرا مصرف شود. Next.js سه زمان اجرا مختلف را ارائه می دهد:

• سمت مشتری،
• سمت سرور،
• زمان کامپایل

اما فعلاً آن را در پشت سر خود نگه دارید. ابتدا باید داده های خود را ساختار دهیم.

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

module.exports = {
  en: {
    hello: 'hello world'
  },
  pt: {
    hello: 'oi mundo'
  }
}

قلاب سفارشی ترجمه

با در دست داشتن آن، اکنون می توانیم قلاب سفارشی ترجمه خود را ایجاد کنیم.

import { useRouter } from 'next/router'
import dictionary from './dictionary'

export const useTranslation = () => {
  const { locales = [], defaultLocale, ...nextRouter} = useRouter()
  const locale = locales.includes(nextRouter.locale || '')
    ? nextRouter.locale
    : defaultLocale
  
  return {
    translate: (term) => {
      const translation = dictionary[locale][term]

      return Boolean(translation) ? translation : term
    }
  }
}

بیایید آنچه را که در طبقه بالا اتفاق می افتد تجزیه و تحلیل کنیم:

1. ما استفاده می کنیم useRouter برای دریافت تمام محلی های موجود، محلی پیش فرض و فعلی؛
2. هنگامی که آن را داشتیم، بررسی می‌کنیم که آیا یک محلی معتبر با خود داریم، اگر نداریم: بازگشت به محلی پیش‌فرض;
3. حالا ما آن را برمی گردانیم translate روش. طول می کشد term و از فرهنگ لغت به آن منطقه مشخص شده واکشی می کند. اگر مقداری وجود نداشته باشد، ترجمه را برمی گرداند term از نو.

اکنون برنامه Next.js ما آماده است تا حداقل موارد رایج و ابتدایی را ترجمه کند. لطفا توجه داشته باشید، این یک غوطه ور شدن در کتابخانه های ترجمه نیست. وجود دارد تن از ویژگی های مهم قلاب سفارشی ما در آنجا وجود ندارد: درونیابی، کثرت، جنسیت، و غیره.

زمان برای مقیاس

فقدان ویژگی ها در قلاب سفارشی ما قابل قبول است اگر در حال حاضر به آنها نیاز نداشته باشیم. همیشه ممکن است (و مسلماً بهتر) مواردی را که واقعاً به آنها نیاز دارید پیاده سازی کنید. اما یک مشکل اساسی در استراتژی کنونی ما وجود دارد که نگران‌کننده است: استفاده نکردن از جنبه ایزومورفیک Next.js.

بدترین بخش مقیاس بندی برنامه های محلی، مدیریت نکردن خود اقدامات ترجمه است. این بیت چندین بار انجام شده است و تا حدودی قابل پیش بینی است. مشکل این است که با نفخ ارسال دیکشنری‌های بی‌پایان از طریق سیم به مرورگر سر و کار داریم – و تنها زمانی که برنامه شما به زبان‌های بیشتر و بیشتری نیاز دارد، آنها چند برابر می‌شوند. این داده‌هایی است که اغلب برای کاربر نهایی بی‌فایده می‌شوند، یا در صورت نیاز به واکشی کلیدها و مقادیر جدید هنگام تغییر زبان، بر عملکرد تأثیر می‌گذارند. اگر یک حقیقت بزرگ در مورد تجربه کاربری وجود داشته باشد، این است: کاربران شما شما را شگفت زده خواهند کرد.

ما نمی توانیم پیش بینی کنیم چه زمانی یا اگر کاربران زبان را تغییر خواهند داد یا به آن کلید اضافی نیاز دارند. بنابراین، در حالت ایده‌آل، برنامه‌های ما همه ترجمه‌ها را برای یک مسیر خاص در هنگام بارگیری چنین مسیری در دسترس خواهند داشت. در حال حاضر، ما باید تکه‌هایی از فرهنگ لغت خود را بر اساس آنچه که صفحه ارائه می‌کند و تغییر وضعیتی که می‌تواند داشته باشد، تقسیم کنیم. این سوراخ خرگوش عمیق است.

پیش رندر سمت سرور

زمان آن است که نیازهای جدید خود را برای مقیاس پذیری مرور کنیم:

1. تا حد امکان کمتر به سمت مشتری ارسال شود.
2. اجتناب از درخواست های اضافی بر اساس تعامل کاربر.
3. اولین رندر از قبل ترجمه شده را برای کاربر ارسال کنید.

با تشکر از getStaticProps با روش صفحات Next.js، می‌توانیم بدون نیاز به فرو رفتن در پیکربندی کامپایلر به آن برسیم. ما کل فرهنگ لغت خود را به این عملکرد ویژه بدون سرور وارد می کنیم و لیستی از اشیاء خاص را که ترجمه هر کلید را حمل می کنند به صفحه خود ارسال می کنیم.

راه اندازی ترجمه های SSR

به برنامه خود بازگردیم، روش جدیدی ایجاد خواهیم کرد. دایرکتوری مانند تنظیم کنید /utils یا /helpers و در جایی در داخل موارد زیر را خواهیم داشت:

export function ssrI18n(key, dictionary) {
  return Object.keys(dictionary)
    .reduce((keySet, locale) => {
      keySet[locale] = (dictionary[locale as keyof typeof dictionary][key])
      return keySet
    , {})
}

تجزیه کاری که انجام می دهیم:

1. ترجمه را بردارید key یا term و dictionary;
2. را بچرخانید dictionary شی به آرایه ای از آن keys;
3. هر کلید از فرهنگ لغت یک است locale، بنابراین ما یک شی با the ایجاد می کنیم key نام و هر کدام locale مقدار برای آن زبان خاص خواهد بود.

نمونه خروجی آن متد به شکل زیر خواهد بود:

{
  'hello': {
    'en': 'Hello World',
    'pt': 'Oi Mundo',
    'de': 'Hallo Welt'
  }
}

اکنون می توانیم به صفحه Next.js خود برویم.

import { ssrI18n } from '../utils/ssrI18n'
import { DICTIONARY } from '../dictionary'
import { useRouter } from 'next/router'

const Home = ({ hello }) => {
  const router = useRouter()
  const i18nLocale = getLocale(router)

  return (
    <h1 className={styles.title}>
      {hello[i18nLocale]}
    </h1>
  )
}

export const getStaticProps = async () => ({
  props: {
    hello: ssrI18n('hello', DICTIONARY),
    // add another entry to each translation key
  }
})

و با آن، کار ما تمام شد! صفحات ما فقط ترجمه هایی را که به هر زبانی نیاز دارند دریافت می کنند. اگر آنها زبان را در میانه راه تغییر دهند، درخواست خارجی ندارند، برعکس: تجربه فوق العاده سریع خواهد بود.

رد شدن از همه تنظیمات

همه اینها عالی است، اما ما هنوز هم می توانیم برای خودمان بهتر عمل کنیم. توسعه دهنده می تواند کمی توجه داشته باشد. راه‌اندازی زیادی در آن وجود دارد، و ما همچنان بر عدم ایجاد اشتباه تایپی تکیه می‌کنیم. اگر تا به حال روی برنامه های ترجمه شده کار کرده باشید، می دانید که یک کلید اشتباه تایپ شده در جایی وجود خواهد داشت. بنابراین، ما می توانیم ایمنی نوع TypeScript را به روش های ترجمه خود بیاوریم.

برای رد شدن از این تنظیم و ما می توانیم از ایمنی TypeScript و تکمیل خودکار استفاده کنیم next-g11n. این یک کتابخانه کوچک است که دقیقاً همان کاری را که ما در بالا انجام دادیم انجام می دهد، اما انواع و چند زنگ و سوت اضافی را اضافه می کند.

بسته بندی

امیدوارم این مقاله بینش بیشتری در مورد چیستی به شما داده باشد مسیریابی بین المللی Next.js می تواند برای برنامه شما انجام دهد تا به جهانی شدن دست یابد، و ارائه یک تجربه کاربری درجه یک در برنامه های محلی سازی شده در وب امروز به چه معناست. نظر خود را در نظرات زیر بشنوید، یا یک پیام ارسال کنید توییت روش من.

(vf، yk، او)