Next.js — التثبيت

المتطلبات

Next.js 13+‎ (App Router أو Pages Router)
React 18+‎

هذه مكتبة Next.js مخصّصة — LerixNextProvider مُعلَّم مسبقاً بـ 'use client'، بالإضافة إلى نفس LerixErrorBoundary والخطّافين (hooks) useLerix()/useLerixNotifications() المستخدَمين في حزمة React، مبنية فوق @lerix-dev/lerix-core. إذا كنت تستخدم React عادية (وليس Next.js)، استخدم @lerix-dev/lerix-react مباشرة بدلاً من ذلك.

1. أضف الاعتمادية (Dependency)

npm install @lerix-dev/lerix-nextjs

2. اضبط مفتاح API ومعرّف المشروع

أضف إلى .env.local:

.env.local

NEXT_PUBLIC_LERIX_API_KEY=your-api-key
NEXT_PUBLIC_LERIX_PROJECT_ID=your-project-id

يجب أن تبدأ هذه المتغيّرات بـ NEXT_PUBLIC_ — هذا هو تقليد Next.js الخاص بمتغيّرات البيئة المكشوفة لكود الجانب العميل (client)، وهو مطلوب هنا لأن الـ SDK يسجّل ويُبلّغ من المتصفح.

ستجد مفتاح الـ API ومعرّف المشروع في لوحة تحكم Lerix ضمن إعدادات المشروع (Project Settings).

3. سجّل الـ SDK

غلّف تخطيطك الجذري (root layout) بـ LerixNextProvider وَ LerixErrorBoundary:

app/layout.tsx

import { LerixErrorBoundary, LerixNextProvider } from '@lerix-dev/lerix-nextjs';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <LerixNextProvider>
          <LerixErrorBoundary fallback={<p>Something went wrong.</p>}>
            {children}
          </LerixErrorBoundary>
        </LerixNextProvider>
      </body>
    </html>
  );
}

بالنسبة لـ Pages Router، افعل الشيء نفسه في pages/_app.tsx بدلاً من ذلك. يبقى layout.tsx نفسه مكوّن خادم (Server Component) — LerixNextProvider وَ LerixErrorBoundary مُعلَّمان داخلياً بـ 'use client' مسبقاً، لذا فإن تغليفهما حول children لا يجبر شجرتك بأكملها على أن تصبح جانب عميل فقط. يقرأ LerixNextProvider قيمتي NEXT_PUBLIC_LERIX_API_KEY/NEXT_PUBLIC_LERIX_PROJECT_ID تلقائياً — مرّر خاصية options صراحةً فقط إذا أردت تجاوزهما:

المعاملات (Parameters)

المعامل	النوع	مطلوب	الوصف
`options.apiKey`	`string`	لا	يتجاوز `NEXT_PUBLIC_LERIX_API_KEY`
`options.projectId`	`string`	لا	يتجاوز `NEXT_PUBLIC_LERIX_PROJECT_ID`
`options.url`	`string`	لا	رابط الخادم الأساسي. الافتراضي هو `https://api.lerix.dev/v1`
`options.release`	`string`	لا	يتجاوز `NEXT_PUBLIC_LERIX_RELEASE`. الإصدار الذي يُنشر به هذا البناء؛ مرّر القيمة نفسها عند رفع خرائط المصدر: راجع خرائط المصدر
`options.debugMode`	`boolean`	لا	طباعة سجلّات طلبات/استجابات الـ SDK في الـ console (الافتراضي: `false`)
`options.enableCrashReporting`	`boolean`	لا	تثبيت معالج الأخطاء التلقائي (الافتراضي: `true`) — راجع تتبع الأخطاء

4. تحقّق من التكامل

'use client';
import { useLerix } from '@lerix-dev/lerix-nextjs';

export function MyComponent() {
  const lerix = useLerix();
  return <button onClick={() => lerix.throwError('Test error')}>Test</button>;
}

ثم افتح لوحة التحكم — يجب أن يظهر الخطأ خلال ثوانٍ.

كل شيء جاهز! تابع إلى تتبع الأخطاء لإرسال أخطاء مخصّصة وتفعيل الالتقاط التلقائي، أو إلى الإشعارات لتفعيل الإشعارات.

البدء

أطر العمل

الوحدات

المطورون

Next.js — التثبيت

المتطلبات

1. أضف الاعتمادية (Dependency)

2. اضبط مفتاح API ومعرّف المشروع

3. سجّل الـ SDK

المعاملات (Parameters)

4. تحقّق من التكامل

​المتطلبات

​1. أضف الاعتمادية (Dependency)

​2. اضبط مفتاح API ومعرّف المشروع

​3. سجّل الـ SDK

​المعاملات (Parameters)

​4. تحقّق من التكامل

المتطلبات

1. أضف الاعتمادية (Dependency)

2. اضبط مفتاح API ومعرّف المشروع

3. سجّل الـ SDK

المعاملات (Parameters)

4. تحقّق من التكامل