Next.js

كل مكوّن هو مكوّن عميل ("use client" مدمج)، لذا يمكنك استخدامه مباشرة داخل صفحات Server Components.

التخطيط الجذري

حمّل الخطوط والأنماط مرة واحدة في التخطيط الجذري، وكلاهما يأتي مع الحزمة.

app/layout.jsx

import "@truvar-ai/design-system/fonts.css";
import "@truvar-ai/design-system/styles.css";
import { Providers } from "./providers";

export default function RootLayout({ children }) {
  return (
    <html lang="en" dir="ltr">
      <body>
        <Providers locale="en-US">{children}</Providers>
      </body>
    </html>
  );
}

المزوّدات

مكوّن عميل صغير يحدد اللغة لكل المكونات ويجعل الروابط (href) تنتقل عبر موجّه Next.js.

app/providers.jsx

"use client";
import { useRouter } from "next/navigation";
import { I18nProvider } from "react-aria-components";
import { RouterProvider, ToastRegion } from "@truvar-ai/design-system";

export function Providers({ locale, children }) {
  const router = useRouter();
  return (
    <I18nProvider locale={locale}>
      <RouterProvider navigate={router.push}>
        {children}
        <ToastRegion />
      </RouterProvider>
    </I18nProvider>
  );
}

الصفحات العربية

للعربية، اكتب <html lang="ar" dir="rtl"> ومرّر locale="ar-EG" (أو دولتك مثل ar-SA). من الشائع استخدام تخطيط جذري لكل لغة، مثل app/(en)/layout.jsx و app/(ar)/layout.jsx.

Pages Router

استورد الأنماط في pages/_app.jsx وغلّف الصفحة بنفس المزوّدات، مع useRouter من next/router.