كيفية تحميل الترجمات من الملفات في Next.js (موجه الصفحات) الإصدار 16

المشكلة

إن كتابة النصوص المعروضة للمستخدم مباشرة في المكونات تخلق ارتباطًا وثيقًا بين المحتوى والكود. في كل مرة يتغير فيها النص، يجب على المطورين تحديد موقع ملفات التنفيذ وتعديلها. إضافة دعم للغة ثانية يتطلب العثور على كل نص مكتوب بشكل ثابت وتغليفه بمنطق شرطي. وتؤدي إضافة لغة ثالثة إلى توسيع هذا المنطق أكثر. يجعل هذا النهج سير عمل الترجمة معتمدًا على نشر الكود ويمنع أعضاء الفريق غير التقنيين من تحديث المحتوى بشكل مستقل.

مع نمو التطبيق، تصبح إدارة الترجمات أكثر صعوبة. النصوص المتناثرة عبر عشرات المكونات يصعب تدقيقها أو تكرارها أو تحديثها بشكل متسق. لا يمكن للمترجمين العمل بالتوازي مع المطورين لأنهم يحتاجون إلى الوصول إلى قاعدة الكود نفسها.

الحل

تخزين جميع النصوص المعروضة للمستخدم في ملفات موارد خارجية، منظمة حسب اللغة، مع ملف JSON واحد لكل لغة محلية. يتم تعريف كل رسالة بمفتاح فريد بدلاً من نصها الحرفي. تشير المكونات إلى هذه المفاتيح بدلاً من النصوص المكتوبة بشكل ثابت.

قم بتحميل ملف الترجمة المناسب بناءً على اللغة المحلية المستلمة من Next.js وتمرير الرسائل إلى مزود react-intl. يمكن للتطبيق بعد ذلك تبديل اللغات عن طريق تحميل ملف مختلف دون تغيير أي كود للمكونات. هذا يفصل المحتوى عن التنفيذ، مما يسمح للمترجمين بالعمل في ملفات JSON قياسية بينما يشير المطورون إلى مفاتيح رسائل ثابتة.

الخطوات

1. إنشاء ملفات ترجمة منظمة حسب اللغة المحلية

ضع رسائل الترجمة في ملفات JSON مفصولة حسب اللغة المحلية. يحتوي كل ملف على أزواج مفتاح-قيمة حيث تكون المفاتيح معرفات ثابتة والقيم هي النصوص المترجمة لتلك اللغة.

{
"welcome": "Welcome back",
"greeting": "Hello, {name}",
"itemCount": "You have {count, plural, one {# item} other {# items}}"
}

قم بإنشاء ملف واحد لكل لغة محلية مدعومة (على سبيل المثال، messages/en.json، messages/es.json، messages/fr.json) في دليل messages في جذر مشروعك. استخدم نفس المفاتيح عبر جميع الملفات حتى يتمكن react-intl من البحث عن الترجمة الصحيحة للغة المحلية النشطة.

2. تحميل الرسائل في getStaticProps

قم بقراءة ملف الترجمة استنادًا إلى اللغة المستلمة من Next.js في getStaticProps. هذا يضمن توفر الرسائل على جانب الخادم ونقلها إلى الصفحة كخصائص.

import { GetStaticProps } from "next";

export const getStaticProps: GetStaticProps = async (context) => {
  const locale = context.locale || "en";
  const messages = (await import(`../messages/${locale}.json`)).default;

  return {
    props: {
      messages,
    },
  };
};

يقوم الاستيراد الديناميكي بتحميل الملف الخاص باللغة الحالية فقط. يوفر Next.js قيمة locale تلقائيًا استنادًا إلى عنوان URL أو تفضيلات المستخدم.

3. تمرير الرسائل إلى IntlProvider في _app

قم بتغليف المكون الجذر باستخدام IntlProvider وتكوينه مع اللغة الحالية للمستخدم والرسائل المترجمة المقابلة. قم بالوصول إلى الرسائل من pageProps حتى تتمكن كل صفحة من توفير ترجماتها الخاصة.

import { AppProps } from "next/app";
import { IntlProvider } from "react-intl";
import { useRouter } from "next/router";

export default function App({ Component, pageProps }: AppProps) {
  const { locale, defaultLocale } = useRouter();

  return (
    <IntlProvider
      locale={locale || "en"}
      defaultLocale={defaultLocale || "en"}
      messages={pageProps.messages}
    >
      <Component {...pageProps} />
    </IntlProvider>
  );
}

يجعل المزود الرسائل متاحة لجميع المكونات في الشجرة. تقوم كل صفحة بتحميل ملف الرسائل الخاص بها عبر getStaticProps، ويتلقى _app تلك الرسائل من خلال pageProps.

4. الإشارة إلى الرسائل بواسطة المفتاح في المكونات

استخدم مكون FormattedMessage أو خطاف useIntl من react-intl لعرض النص المترجم. قم بالإشارة إلى الرسائل بواسطة مفتاحها بدلاً من تضمين النصوص مباشرة في الكود.

import { FormattedMessage, useIntl } from "react-intl";

export default function HomePage() {
  const intl = useIntl();
  const userName = "Alice";

  return (
    <div>
      <h1>
        <FormattedMessage id="welcome" />
      </h1>
      <p>
        <FormattedMessage id="greeting" values={{ name: userName }} />
      </p>
      <input placeholder={intl.formatMessage({ id: "searchPlaceholder" })} />
    </div>
  );
}

يبحث React-intl عن الرسالة المترجمة بالمعرف المحدد ويقوم بتنسيقها. إذا كانت الترجمة مفقودة، فإنه يعود إلى defaultMessage إذا تم توفيرها. يتم دمج المتغيرات التي يتم تمريرها في خاصية values في سلسلة الرسالة.