دمج Next.js: توثيق useIntlayer Hook

تم تصميم useIntlayer خصيصًا لتطبيقات Next.js لجلب وإدارة المحتوى المحلي بكفاءة. يركز هذا التوثيق على كيفية استخدام الـ hook داخل مشاريع Next.js، مع ضمان اتباع ممارسات التوطين الصحيحة.

استيراد useIntlayer في Next.js

اعتمادًا على ما إذا كنت تعمل على مكونات العميل أو الخادم في تطبيق Next.js، يمكنك استيراد الـ hook useIntlayer كما يلي:

• مكون العميل:

  typescript

  import { useIntlayer } from "next-intlayer"; // يُستخدم في مكونات العميل

• مكون الخادم:

  tsx

  import { useIntlayer } from "next-intlayer/server"; // يُستخدم في مكونات الخادم

المعاملات

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

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

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

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

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

إليك كيفية تنفيذ الـ hook 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 البصري: تعرف على كيفية استخدام المحرر البصري لإدارة المحتوى بسهولة هنا.

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