أفضل حل للتدويل (i18n) في تطبيقات Next.js

كيف يعمل

مع ازدياد عولمة العالم، أصبح من الضروري بشكل متزايد لمطوري الويب بناء تطبيقات يمكنها تلبية احتياجات المستخدمين من دول وثقافات مختلفة. إحدى الطرق الرئيسية لتحقيق ذلك هي من خلال التدويل (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: "المجلد" الذي سيتم تخزين سلاسل النصوص الخاصة بك فيه، مثل عنوان URL لموقعك الإلكتروني. اقرأ المزيد عن الأصول هنا.

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 مضبوطة على ٦٠ افتراضيًا، حتى تبقى ترجماتك محدثة.

لاستخدام أي من الدالتين في صفحة، لنفترض أن لديك ملف صفحة مثل /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: النشر والاختبار!

لقد انتهينا! سيُترجم تطبيق Next.js الخاص بك تلقائيًا الآن عندما تضيف أي نصوص إلى مكون Translate. لاحظ أنه فقط البيئات التي تمتلك أذونات read/write على مفتاح API ستكون قادرة على إنشاء نصوص جديدة للترجمة. نوصي بوجود بيئة اختبار مغلقة وآمنة حيث يمكنك اختبار تطبيق الإنتاج الخاص بك باستخدام مفتاح API من هذا النوع، مع إضافة نصوص جديدة قبل الإطلاق الفعلي. هذا سيمنع أي شخص من سرقة مفتاح API السري الخاص بك، ومن المحتمل أن يمنع تضخم مشروع الترجمة الخاص بك بإضافة نصوص جديدة غير ذات صلة.

Be sure to check out the complete example over at our GitHub profile. There, you’ll also find an example of how to do this using the App Router! If you encounter any problems, feel free to reach out, and we’ll be more than happy to help.

TacoTranslate lets you automatically localize your React applications quickly to and from over 75 languages. Get started today!