{content.getStarted.pageLink}
>
);
};
const Page: NextPage = async () => {
const locale = await getLocale();
return (
);
};
- **`IntlayerClientProvider`** يُستخدم لتوفير الـ locale للمكونات على جانب العميل. يمكن وضعه في أي مكوّن أصل (parent component)، بما في ذلك الـ layout. ومع ذلك، يُنصح بوضعه في الـ layout لأن Next.js يشارك كود الـ layout عبر الصفحات، مما يجعله أكثر كفاءة. باستخدام `IntlayerClientProvider` داخل الـ layout، تتجنّب إعادة تهيئته لكل صفحة، مما يحسّن الأداء ويحافظ على سياق التعريب المتسق في تطبيقك.
- **`IntlayerServerProvider`** تُستخدم لتزويد العناصر الفرعية التي تعمل على الخادم بالـ locale. لا يمكن تعيينها في الـ layout.
> لا يمكن أن يتشارك الـ layout والصفحة نفس سياق الخادم لأن نظام سياق الخادم يعتمد على مخزن بيانات لكل طلب (عبر آلية [React's cache](https://react.dev/reference/react/cache))، مما يجعل كل "context" يُعاد إنشاؤه لأجزاء مختلفة من التطبيق. وضع الـ provider في layout مشترك سيكسر هذا العزل، وسيمنع الانتشار الصحيح لقيم سياق الخادم إلى مكوناتك على الخادم.
```tsx {4,7} fileName="src/components/clientComponentExample/ClientComponentExample.tsx" codeFormat="typescript"
"use client";
import type { FC } from "react";
import { useIntlayer } from "next-intlayer";
export const ClientComponentExample: FC = () => {
const content = useIntlayer("client-component-example"); // إنشاء تعريف المحتوى المرتبط
return (
);
};
> إذا أردت استخدام المحتوى في سمة من نوع سلسلة مثل `alt`، `title`، `href`، `aria-label`، إلخ، يجب عليك استدعاء قيمة الدالة، على سبيل المثال:
> ```jsx
>
> ```
> لمعرفة المزيد عن الـ `useIntlayer` hook، راجع الـ [الوثائق](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/packages/next-intlayer/useIntlayer.md).
### (اختياري) الخطوة 7: تكوين البروكسي لاكتشاف لغة المستخدم المفضلة
قم بإعداد البروكسي لاكتشاف اللغة المفضلة للمستخدم:
```typescript fileName="src/proxy.ts" codeFormat="typescript"
export { intlayerProxy as proxy } from "next-intlayer/proxy";
export const config = {
matcher:
"/((?!api|static|assets|robots|sitemap|sw|service-worker|manifest|.*\\..*|_next).*)",
};
````
```javascript fileName="src/proxy.mjs" codeFormat="esm"
export { intlayerProxy as proxy } from "next-intlayer/proxy";
export const config = {
matcher:
"/((?!api|static|assets|robots|sitemap|sw|service-worker|manifest|.*\\..*|_next).*)",
};
```
```javascript fileName="src/proxy.cjs" codeFormat="commonjs"
const { intlayerProxy } = require("next-intlayer/proxy");
const config = {
matcher:
"/((?!api|static|assets|robots|sitemap|sw|service-worker|manifest|.*\\..*|_next).*)",
};
module.exports = { proxy: intlayerProxy, config };
```
> يُستخدم `intlayerProxy` لاكتشاف اللغة المفضلة للمستخدم وإعادة توجيهه إلى عنوان URL المناسب كما هو موضح في [التكوين](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/configuration.md). بالإضافة إلى ذلك، يتيح حفظ اللغة المفضلة للمستخدم في ملف تعريف الارتباط (cookie).
> إذا احتجت إلى ربط عدة proxies معًا (على سبيل المثال، `intlayerProxy` مع المصادقة أو proxies مخصصة)، فإن Intlayer يوفر الآن مساعدًا يسمى `multipleProxies`.
```ts
import { multipleProxies, intlayerProxy } from "next-intlayer/proxy";
import { customProxy } from "@utils/customProxy";
export const proxy = multipleProxies([intlayerProxy, customProxy]);
```
### (اختياري) الخطوة 8: تغيير لغة المحتوى الخاص بك
لتغيير لغة المحتوى في Next.js، الطريقة الموصى بها هي استخدام مكوّن Link لإعادة توجيه المستخدمين إلى الصفحة المحلية المناسبة. يتيح مكوّن Link إمكانية التحميل المسبق للصفحة (prefetching)، مما يساعد على تجنّب إعادة تحميل الصفحة بالكامل.
```tsx fileName="src/components/localeSwitcher/LocaleSwitcher.tsx" codeFormat="typescript"
"use client";
import type { FC } from "react";
import { Locales, getHTMLTextDir, getLocaleName } from "intlayer";
import { useLocale } from "next-intlayer";
export const LocaleSwitcher: FC = () => {
const { locale, availableLocales, setLocale } = useLocale({
onChange: () => window.location.reload(),
});
return (
);
};
```
> طريقة بديلة هي استخدام الدالة `setLocale` المقدمة من الـ `useLocale` هوك. هذه الدالة لن تسمح بالتحميل المسبق للصفحة. راجع توثيق [`useLocale` هوك](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/packages/next-intlayer/useLocale.md) لمزيد من التفاصيل.
> مراجع التوثيق:
>
> - [`useLocale` هوك](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/packages/next-intlayer/useLocale.md)
> - [`getLocaleName` هوك](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/packages/next-intlayer/getLocaleName.md)
> - [`getLocalizedUrl` هوك](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/packages/next-intlayer/getLocalizedUrl.md)
> - [`getHTMLTextDir` هوك](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/packages/intlayer/getHTMLTextDir.md)
> - [`hrefLang` الخاصية](https://developers.google.com/search/docs/specialty/international/localized-versions?hl=fr)
> - [`lang` الخاصية](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang)
> - [`dir` الخاصية](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir)
> - [`aria-current` الخاصية](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current)
### (اختياري) الخطوة 9: الحصول على اللغة الحالية في Server Actions
إذا احتجت إلى الـ locale النشط داخل Server Action (مثلًا، لتوطين رسائل البريد الإلكتروني أو لتنفيذ منطق يتعامل مع اللغة)، استدعِ `getLocale` من `next-intlayer/server`:
```tsx fileName="src/app/actions/getLocale.ts" codeFormat="typescript"
"use server";
import { getLocale } from "next-intlayer/server";
export const myServerAction = async () => {
const locale = await getLocale();
// قم بعمل شيء باستخدام المتغير locale
};
```
> تتبع الدالة `getLocale` استراتيجية متدرجة لتحديد لغة المستخدم:
>
> 1. أولاً، تتحقق من request headers عن قيمة locale قد تكون قد تم تعيينها بواسطة proxy
> 2. إذا لم يتم العثور على locale في الرؤوس، فإنها تبحث عن locale مخزنة في cookies
> 3. إذا لم يتم العثور على cookie، تحاول اكتشاف اللغة المفضلة للمستخدم من إعدادات الـ browser
> 4. كملاذ أخير، تعود إلى الـ default locale المكوّن للتطبيق
>
> هذا يضمن اختيار الـlocale الأنسب بناءً على السياق المتاح.
### (اختياري) الخطوة 10: تحسين حجم الحزمة
عند استخدام `next-intlayer`، يتم تضمين القواميس في كل bundle لكل صفحة بشكل افتراضي. لتقليل حجم الـbundle، يوفر Intlayer ملحق SWC اختياري يستبدل استدعاءات `useIntlayer` بذكاء باستخدام الماكروز. هذا يضمن تضمين القواميس فقط في الحزم الخاصة بالصفحات التي تستخدمها فعليًا.
لتمكين هذا التحسين، ثبّت الحزمة `@intlayer/swc`. بمجرد التثبيت، سيكتشف `next-intlayer` الملحق ويستخدمه تلقائيًا:
```bash packageManager="npm"
npm install @intlayer/swc --save-dev
npx intlayer init
```
```bash packageManager="pnpm"
pnpm add @intlayer/swc --save-dev
pnpm intlayer init
```
```bash packageManager="yarn"
yarn add @intlayer/swc --save-dev
yarn intlayer init
```
```bash packageManager="bun"
bun add @intlayer/swc --dev
bunx intlayer init
```
> ملاحظة: هذا التحسين متاح فقط لـ Next.js 13 والإصدارات الأحدث.
> ملاحظة: هذه الحزمة غير مثبتة افتراضيًا لأن إضافات SWC لا تزال تجريبية في Next.js. قد يتغير ذلك في المستقبل.
> ملاحظة: إذا قمت بتعيين الخيار إلى `importMode: 'dynamic'` أو `importMode: 'live'`، فسيعتمد ذلك على Suspense، لذا سيتوجب عليك تغليف استدعاءات `useIntlayer` ضمن حدّ `Suspense`. هذا يعني أنك لن تتمكن من استخدام `useIntlayer` مباشرةً على المستوى العلوي لمكوّن الصفحة / التخطيط الخاص بك.
### مراقبة تغيّرات القواميس على Turbopack
عند استخدام Turbopack كسيرفر التطوير مع الأمر `next dev`، فلن يتم اكتشاف تغييرات القواميس تلقائيًا افتراضيًا.
يحدث هذا القيد لأن Turbopack لا يستطيع تشغيل ملحقات webpack بالتوازي لمراقبة التغييرات في ملفات المحتوى الخاصة بك. كحل بديل، ستحتاج إلى استخدام الأمر `intlayer watch` لتشغيل كلٍ من سيرفر التطوير ومراقب بناء Intlayer في آنٍ واحد.
```json5 fileName="package.json"
{
// ... Your existing package.json configurations
"scripts": {
// ... Your existing scripts configurations
"dev": "intlayer watch --with 'next dev'",
},
}
```
> إذا كنت تستخدم next-intlayer@<=6.x.x، تحتاج إلى الاحتفاظ بالعلم `--turbopack` لجعل تطبيق Next.js 16 يعمل بشكل صحيح مع Turbopack. نوصي باستخدام next-intlayer@>=7.x.x لتجنب هذا القيد.
### تكوين TypeScript
يستخدم Intlayer module augmentation للاستفادة من TypeScript وتقوية الـ codebase الخاصة بك.


تأكد من أن إعدادات TypeScript تتضمن الأنواع المولدة تلقائيًا.
```json5 fileName="tsconfig.json"
{
// ... تكوينات TypeScript الحالية الخاصة بك
"include": [
// ... تكوينات TypeScript الحالية الخاصة بك
".intlayer/**/*.ts", // تضمين الأنواع المولدة تلقائيًا
],
}
```
### تهيئة Git
يوصى بتجاهل الملفات المولدة بواسطة Intlayer. يسمح لك هذا بتجنّب إضافتها إلى مستودع Git الخاص بك.
للقيام بذلك، يمكنك إضافة التعليمات التالية إلى ملف `.gitignore` الخاص بك:
```plaintext fileName=".gitignore"
# تجاهل الملفات المولدة بواسطة Intlayer
.intlayer
```
### امتداد VS Code
لتحسين تجربة التطوير مع Intlayer، يمكنك تثبيت الامتداد الرسمي **Intlayer VS Code Extension**.
[التثبيت من سوق VS Code](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
يوفر هذا الامتداد:
- **Autocompletion** لمفاتيح الترجمة.
- **Real-time error detection** للترجمات المفقودة.
- **معاينات مضمنة** للمحتوى المترجم.
- **إجراءات سريعة** لإنشاء التراجمات وتحديثها بسهولة.
للمزيد من التفاصيل حول كيفية استخدام الامتداد، راجع توثيق امتداد Intlayer لـ VS Code: [Intlayer VS Code Extension documentation](https://intlayer.org/doc/vs-code-extension).
### التوسع
للتوسع، يمكنك تنفيذ [المحرر المرئي](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/intlayer_visual_editor.md) أو إخراج محتواك باستخدام [نظام إدارة المحتوى (CMS)](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/intlayer_CMS.md).