استخدم مساعدك المفضل للملخص واستخدم هذه الصفحة والموفر AI الذي تريده
بدءاً من الدمج مع خادم MCP Intlayer ، يمكن لمساعدك الذكي الاسترجاع من جميع المستندات مباشرة من ChatGPT ، DeepSeek ، Cursor ، VSCode ، إلخ.
عرض الوثائق الخاصة بالخادم MCPتمت ترجمة محتوى هذه الصفحة باستخدام الذكاء الاصطناعي.
اعرض آخر نسخة المحتوى الأصلي باللغة الإنكليزيةإذا كان لديك فكرة لتحسين هذه الوثيقة، فلا تتردد في المساهمة من خلال تقديم طلب سحب على GitHub.
رابط GitHub للتوثيقنسخ الـ Markdown من المستند إلى الحافظة
تكامل Next.js: توثيق هوك useIntlayer
تم تصميم هوك useIntlayer خصيصًا لتطبيقات Next.js لجلب وإدارة المحتوى المحلي بكفاءة. سيركز هذا التوثيق على كيفية استخدام هذا الهوك داخل مشاريع Next.js، مع ضمان اتباع ممارسات التدويل الصحيحة.
استيراد useIntlayer في Next.js
اعتمادًا على ما إذا كنت تعمل على مكونات جانب العميل أو جانب الخادم في تطبيق Next.js، يمكنك استيراد هوك useIntlayer كما يلي:
مكون جانب العميل:
typescriptنسخ الكودنسخ الكود إلى الحافظة
import { useIntlayer } from "next-intlayer"; // يستخدم في مكونات جانب العميل
مكون جانب الخادم:
tsxنسخ الكودنسخ الكود إلى الحافظة
import { useIntlayer } from "next-intlayer/server"; // يستخدم في مكونات جانب الخادم
المعاملات
- key: معرف نصي لمفتاح القاموس الذي تريد استرجاع المحتوى منه.
- locale (اختياري): لغة محددة للاستخدام. إذا تم حذفها، يستخدم الهوك اللغة المعينة في سياق العميل أو الخادم.
ملفات القاموس
من الضروري أن يتم تعريف جميع مفاتيح المحتوى داخل ملفات إعلان المحتوى لمنع أخطاء وقت التشغيل وضمان سلامة الأنواع. كما أن هذا النهج يسهل دمج TypeScript للتحقق من الصحة أثناء وقت الترجمة.
تعليمات إعداد ملفات إعلان المحتوى متاحة هنا.
مثال على الاستخدام في Next.js
إليك كيفية تنفيذ هوك useIntlayer داخل صفحة Next.js لتحميل المحتوى المحلي ديناميكيًا بناءً على اللغة الحالية للتطبيق:
نسخ الكود إلى الحافظة
import { ClientComponentExample } from "@components/ClientComponentExample";import { ServerComponentExample } from "@components/ServerComponentExample";import { type NextPageIntlayer, IntlayerClientProvider } from "next-intlayer";import { useIntlayer, IntlayerServerProvider } from "next-intlayer/server";const HomePage: NextPageIntlayer = async ({ params }) => { const { locale } = await params; const content = useIntlayer("homepage", locale); return ( <> <p>{content.introduction}</p> <IntlayerClientProvider locale={locale}> <ClientComponentExample /> </IntlayerClientProvider> <IntlayerServerProvider locale={locale}> <ServerComponentExample /> </IntlayerServerProvider> </> );};
نسخ الكود إلى الحافظة
"use-client";import type { FC } from "react";import { useIntlayer } from "next-intlayer";const ClientComponentExample: FC = () => { const content = useIntlayer("component-content"); return ( <div> <h1>{content.title}</h1> <p>{content.description}</p> </div> );};
نسخ الكود إلى الحافظة
import type { FC } from "react";import { useIntlayer } from "next-intlayer/server";const ServerComponentExample: FC = () => { const content = useIntlayer("component-content"); return ( <div> <h1>{content.title}</h1> <p>{content.description}</p> </div> );};
التعامل مع تعريب السمات
لتعريب السمات مثل alt، title، href، aria-label، وغيرها، تأكد من الإشارة إلى المحتوى بشكل صحيح:
نسخ الكود إلى الحافظة
<img src={content.image.src.value} alt={content.image.alt.value} />
مزيد من المعلومات
- محرر Intlayer المرئي: تعلّم كيفية استخدام المحرر المرئي لإدارة المحتوى بسهولة أكبر هنا.
توضح هذه الوثائق استخدام الخطاف useIntlayer بشكل خاص داخل بيئات Next.js، مما يوفر حلاً قويًا لإدارة التعريب عبر تطبيقات Next.js الخاصة بك.
تاريخ الوثيقة
- 5.5.10 - 2025-06-29: بداية التاريخ