تكامل 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 لتحميل المحتوى المحلي ديناميكيًا بناءً على اللغة الحالية للتطبيق:

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} /><img src={content.image.src.toString()} alt={content.image.alt.toString()} /><img src={String(content.image.src)} alt={String(content.image.alt)} />

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

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

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