تلقي إشعارات حول الإصدارات القادمة من Intlayer
    إنشاء:2024-08-11آخر تحديث:2025-06-29

    تكامل 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"; // يستخدم في مكونات جانب الخادم

    المعاملات

    1. key: معرف نصي لمفتاح القاموس الذي تريد استرجاع المحتوى منه.
    2. locale (اختياري): لغة محددة للاستخدام. إذا تم حذفها، يستخدم الهوك اللغة المعينة في سياق العميل أو الخادم.

    ملفات القاموس

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

    تعليمات إعداد ملفات إعلان المحتوى متاحة هنا.

    مثال على الاستخدام في Next.js

    إليك كيفية تنفيذ هوك useIntlayer داخل صفحة Next.js لتحميل المحتوى المحلي ديناميكيًا بناءً على اللغة الحالية للتطبيق:

    src/pages/[locale]/index.tsx
    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>    </>  );};
    src/components/ClientComponentExample.tsx
    "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>  );};
    src/components/ServerComponentExample.tsx
    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، وغيرها، تأكد من الإشارة إلى المحتوى بشكل صحيح:

    tsx
    <img src={content.image.src.value} alt={content.image.alt.value} />

    مزيد من المعلومات

    • محرر Intlayer المرئي: تعلّم كيفية استخدام المحرر المرئي لإدارة المحتوى بسهولة أكبر هنا.

    توضح هذه الوثائق استخدام الخطاف useIntlayer بشكل خاص داخل بيئات Next.js، مما يوفر حلاً قويًا لإدارة التعريب عبر تطبيقات Next.js الخاصة بك.

    تاريخ الوثيقة

    • 5.5.10 - 2025-06-29: بداية التاريخ
    تلقي إشعارات حول الإصدارات القادمة من Intlayer