Next.js هو إطار عمل قوي لبناء تطبيقات ويب مبتكرة وقابلة للتوسع. ومع ذلك، لإطلاق إمكاناته الكاملة، تحتاج إلى إتقان تكامل مكتبات الأطراف الثالثة. يمكن لهذه المكتبات إضافة عدد كبير من الوظائف إلى تطبيقات Next.js الخاصة بك، مما يحسن الأداء وتجربة المستخدم وكفاءة المطور. في هذا الدليل، سنستكشف كيفية الاستفادة من مكتبات الأطراف الثالثة في مشاريع Next.js الخاصة بك باستخدام مكتبة @next/third-parties.

البدء مع @next/third-parties

للبدء، تحتاج إلى تثبيت مكتبة @next/third-parties. توفر هذه المكتبة مكونات وأدوات محسّنة لمكتبات الأطراف الثالثة الشائعة، مما يسهل تكاملها في تطبيقات Next.js الخاصة بك.

npm install @next/third-parties@latest next@latest

@next/third-parties حالياً تجريبية وقيد التطوير النشط. نوصي باستخدام أحدث إصدار بينما يتم إضافة المزيد من تكاملات الأطراف الثالثة.

تكاملات Google للأطراف الثالثة

تسهل مكتبة @next/third-parties التكامل السهل مع العديد من خدمات Google، بما في ذلك Google Tag Manager و Google Analytics و Google Maps Embed و YouTube Embed. دعنا نستكشف كل من هذه التكاملات بالتفصيل.

Google Tag Manager

يتيح لك Google Tag Manager إدارة ونشر علامات التسويق (مقتطفات الكود أو بكسلات التتبع) على موقعك بسهولة دون تعديل الكود. استخدم مكون GoogleTagManager لإضافة حاوية GTM إلى صفحتك.

إضافة Google Tag Manager لجميع المسارات

لتضمين Google Tag Manager عبر جميع المسارات، ضع مكون GoogleTagManager في ملف /app/layout.tsx الخاص بك.

import { GoogleTagManager } from '@next/third-parties/google'
 
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <GoogleTagManager gtmId="GTM-XYZ" />
      <body>{children}</body>
    </html>
  );
}

إضافة Google Tag Manager لمسار واحد

لتضمين Google Tag Manager لمسار محدد فقط، أضف المكون في ملف الصفحة الخاص بك.

import { GoogleTagManager } from '@next/third-parties/google'
 
export default function Page() {
  return <GoogleTagManager gtmId="GTM-XYZ" />;
}

Google Analytics

يساعدك Google Analytics على تتبع حركة مرور موقعك والإبلاغ عنها. يمكن استخدام مكون GoogleAnalytics لتضمين Google Analytics 4 في صفحتك عبر علامة Google (gtag.js).

إضافة Google Analytics لجميع المسارات

import { GoogleAnalytics } from '@next/third-parties/google'
 
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
      <GoogleAnalytics gaId="G-XYZ" />
    </html>
  );
}

إضافة Google Analytics لمسار واحد

import { GoogleAnalytics } from '@next/third-parties/google'
 
export default function Page() {
  return <GoogleAnalytics gaId="G-XYZ" />;
}

تضمين خرائط Google

لتضمين خريطة Google في صفحتك، استخدم مكون GoogleMapsEmbed.

import { GoogleMapsEmbed } from '@next/third-parties/google'
 
export default function Page() {
  return (
    <GoogleMapsEmbed
      apiKey="YOUR_API_KEY"
      height={200}
      width="100%"
      mode="place"
      q="Brooklyn+Bridge,New+York,NY"
    />
  );
}

تضمين YouTube

لتضمين فيديو YouTube في صفحتك، استخدم مكون YouTubeEmbed. يتم تحميل هذا المكون بشكل أسرع باستخدام lite-youtube-embed تحت الغطاء.

import { YouTubeEmbed } from '@next/third-parties/google'
 
export default function Page() {
  return <YouTubeEmbed videoid="ogfYd705cRs" height={400} params="controls=0" />;
}

الخلاصة

مكتبات الأطراف الثالثة ضرورية لإضافة وظائف غنية إلى تطبيقات Next.js الخاصة بك. تبسط مكتبة @next/third-parties عملية التكامل مع مكونات وأدوات محسّنة لخدمات Google والمزيد. مع استمرارك في استكشاف وإتقان هذه التكاملات، لن تعزز تطبيقات Next.js الخاصة بك تجربة المستخدم فحسب، بل ستبسط أيضاً سير عمل التطوير.

لمزيد من الوثائق التفصيلية والأمثلة، يرجى الرجوع إلى وثائق Next.js الرسمية. برمجة سعيدة!

المراجع

"Third Party Libraries". وثائق Next.js.

إتقان Next.js: إطلاق قوة التكاملات مع الأطراف الثالثة