كيفية تنفيذ الترجمة الدولية في تطبيق Next.js الذي يستخدم Pages Router
اجعل تطبيق React الخاص بك أكثر سهولة في الاستخدام ووصل إلى أسواق جديدة من خلال التدويل (i18n).
مع تزايد عولمة العالم، أصبح من المهم بشكل متزايد لمطوري الويب بناء تطبيقات يمكنها تلبية احتياجات المستخدمين من دول وثقافات مختلفة. واحدة من الطرق الرئيسية لتحقيق ذلك هي من خلال التعريب (i18n)، الذي يسمح لك بتكييف تطبيقك مع لغات مختلفة، وعملات، وصيغ تواريخ متعددة.
في هذا الدرس، سنستكشف كيفية إضافة التعريب إلى تطبيق React Next.js الخاص بك، مع العرض من جانب الخادم. TL;DR: شاهد المثال الكامل هنا.
هذا الدليل مخصص لتطبيقات Next.js التي تستخدم Pages Router.
إذا كنت تستخدم App Router, يرجى الاطلاع على هذا الدليل بدلاً من ذلك.
الخطوة 1: تثبيت مكتبة i18n
لتنفيذ التعريب في تطبيق Next.js الخاص بك، سنبدأ أولاً باختيار مكتبة i18n. هناك عدة مكتبات مشهورة، بما في ذلك next-intl. ومع ذلك، في هذا المثال، سنستخدم TacoTranslate.
يقوم TacoTranslate بترجمة نصوصك تلقائيًا إلى أي لغة باستخدام أحدث تقنيات الذكاء الاصطناعي، ويحررك من إدارة ملفات JSON المملة.
دعنا نثبتها باستخدام npm في الطرفية الخاصة بك:
npm install tacotranslate
الخطوة 2: إنشاء حساب مجاني على TacoTranslate
الآن بعد أن قمت بتثبيت الوحدة، حان الوقت لإنشاء حساب TacoTranslate الخاص بك، ومشروع ترجمة، ومفاتيح API المرتبطة. أنشئ حسابًا هنا. إنه مجاني، ولا يتطلب منك إضافة بطاقة ائتمان.
داخل واجهة تطبيق TacoTranslate، قم بإنشاء مشروع، وانتقل إلى تبويب مفاتيح API الخاصة به. أنشئ مفتاح read
واحد، ومفتاح read/write
واحد. سنقوم بحفظهم كمتغيرات بيئية. مفتاح read
هو ما نسميه public
ومفتاح read/write
هو secret
. على سبيل المثال، يمكنك إضافتهم إلى ملف .env
في جذر مشروعك.
TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010
تأكد من عدم تسريب مفتاح API السري read/write
إلى بيئات الإنتاج على جانب العميل.
سنقوم أيضًا بإضافة متغيري بيئة آخرين: TACOTRANSLATE_DEFAULT_LOCALE
و TACOTRANSLATE_ORIGIN
.
TACOTRANSLATE_DEFAULT_LOCALE
: رمز اللغة الافتراضي الاحتياطي. في هذا المثال، سنحدده علىen
للإنجليزية.TACOTRANSLATE_ORIGIN
: "المجلد" حيث سيتم تخزين سلاسل النص الخاصة بك، مثل عنوان موقعك الإلكتروني. اقرأ المزيد عن الأصول هنا.
TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.com
الخطوة 3: إعداد TacoTranslate
لدمج TacoTranslate مع تطبيقك، ستحتاج إلى إنشاء عميل باستخدام مفاتيح API التي حصلت عليها سابقًا. على سبيل المثال، أنشئ ملفًا باسم /tacotranslate-client.js
.
const {default: createTacoTranslateClient} = require('tacotranslate');
const tacoTranslate = createTacoTranslateClient({
apiKey:
process.env.TACOTRANSLATE_SECRET_API_KEY ??
process.env.TACOTRANSLATE_PUBLIC_API_KEY ??
process.env.TACOTRANSLATE_API_KEY ??
'',
projectLocale: process.env.TACOTRANSLATE_DEFAULT_LOCALE ?? '',
});
module.exports = tacoTranslate;
سنقوم بتعريف TACOTRANSLATE_API_KEY
تلقائيًا قريبًا.
إنشاء العميل في ملف منفصل يجعل من الأسهل إعادة استخدامه لاحقًا. الآن، باستخدام ملف مخصص /pages/_app.tsx
, سنضيف مزود TacoTranslate
.
import React from 'react';
import {type AppProps} from 'next/app';
import {type Origin, type Locale, type Localizations} from 'tacotranslate';
import TacoTranslate from 'tacotranslate/react';
import TacoTranslateHead from 'tacotranslate/next/head';
import tacoTranslate from '../tacotranslate-client';
type PageProperties = {
origin: Origin;
locale: Locale;
locales: Locale[];
localizations: Localizations;
};
export default function App({Component, pageProps}: AppProps<PageProperties>) {
const {origin, locale, locales, localizations} = pageProps;
return (
<TacoTranslate
client={tacoTranslate}
origin={origin}
locale={locale}
localizations={localizations}
>
<TacoTranslateHead rootUrl="https://your-website.com" locales={locales} />
<Component {...pageProps} />
</TacoTranslate>
);
}
إذا كان لديك بالفعل pageProps
و _app.tsx
مخصصان، يرجى توسيع التعريف بالخصائص والكود المذكور أعلاه.
الخطوة 4: تنفيذ العرض من جانب الخادم
تسمح TacoTranslate بالتصيير على جانب الخادم لترجماتك. هذا يحسن تجربة المستخدم بشكل كبير من خلال عرض المحتوى المترجم فورًا، بدلاً من وميض المحتوى غير المترجم أولاً. بالإضافة إلى ذلك، يمكننا تخطي طلبات الشبكة على العميل، لأننا لدينا بالفعل كل الترجمات التي نحتاجها.
سنبدأ بإنشاء أو تعديل /next.config.js
.
const withTacoTranslate = require('tacotranslate/next/config').default;
const tacoTranslateClient = require('./tacotranslate-client');
module.exports = async () => {
const config = {};
return withTacoTranslate(config, {
client: tacoTranslateClient,
isProduction:
process.env.TACOTRANSLATE_ENV === 'production' ||
process.env.VERCEL_ENV === 'production' ||
(!(process.env.TACOTRANSLATE_ENV || process.env.VERCEL_ENV) &&
process.env.NODE_ENV === 'production'),
});
};
قم بتعديل فحص isProduction
ليناسب إعدادك. إذا كانت القيمة true
، فسيعرض TacoTranslate مفتاح API العام. إذا كنا في بيئة محلية أو اختبارية أو بيئة مرحلة (isProduction
is false
)، فسنستخدم مفتاح API السري read/write
للتأكد من إرسال السلاسل النصية الجديدة للترجمة.
حتى الآن، قمنا فقط بإعداد تطبيق Next.js بقائمة من اللغات المدعومة. الخطوة التالية هي جلب الترجمات لجميع صفحاتك. للقيام بذلك، ستستخدم إما getTacoTranslateStaticProps
أو getTacoTranslateServerSideProps
بناءً على متطلباتك.
تأخذ هذه الدوال ثلاث وسيطات: كائن واحد من نوع Next.js Static Props Context, وتكوين لـ TacoTranslate، وخصائص اختيارية من Next.js. لاحظ أن revalidate
في getTacoTranslateStaticProps
مضبوط على 60 بشكل افتراضي، لكي تظل ترجماتك محدثة.
لاستخدام أي من الدالتين في صفحة، لنفترض أن لديك ملف صفحة مثل /pages/hello-world.tsx
.
import {Translate} from 'tacotranslate/react';
import getTacoTranslateStaticProps from 'tacotranslate/next/get-static-props';
import tacoTranslateClient from '../tacotranslate-client';
export async function getStaticProps(context) {
return getTacoTranslateStaticProps(context, {client: tacoTranslateClient});
}
export default function Page() {
return <Translate string="Hello, world!"/>;
}
يجب أن تكون الآن قادرًا على استخدام المكون Translate
لترجمة النصوص داخل جميع مكونات React الخاصة بك.
import {Translate} from 'tacotranslate/react';
function Component() {
return <Translate string="Hello, world!"/>
}
الخطوة 5: النشر والاختبار!
لقد انتهينا! سيتم الآن ترجمة تطبيق React الخاص بك تلقائيًا عند إضافة أي نصوص إلى مكون Translate
. لاحظ أن البيئات التي تمتلك أذونات read/write
على مفتاح API فقط هي التي ستكون قادرة على إنشاء نصوص جديدة للترجمة. نوصي بوجود بيئة اختبار مغلقة ومؤمّنة حيث يمكنك اختبار تطبيق الإنتاج الخاص بك باستخدام مفتاح API من هذا النوع، وإضافة نصوص جديدة قبل الإطلاق. هذا سيمنع أي شخص من سرقة مفتاح API السري الخاص بك، ومن احتمال إضافة نصوص غير ذات صلة مما قد يؤدي إلى تضخيم مشروع الترجمة الخاص بك.
تأكد من الاطلاع على المثال الكامل على ملفنا الشخصي في GitHub. هناك، ستجد أيضًا مثالًا على كيفية القيام بذلك باستخدام App Router ! إذا واجهت أي مشاكل، لا تتردد في التواصل معنا، وسنكون سعداء جدًا بمساعدتك.
تتيح لك TacoTranslate تعريب تطبيقات React الخاصة بك تلقائيًا بسرعة من وإلى أي لغة. ابدأ اليوم!