بهینه‌سازی کتابخانه‌های شخص ثالث در Next.js با @next/third-parties – سریع، ساده، و قابل اعتماد

شروع نصب

برای نصب کتابخانه:

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

این پکیج آزمایشی است و به‌طور فعال در حال توسعه است. توصیه می‌شود از نسخه latest یا canary استفاده کنید.

Google Tag Manager

برای بارگذاری GTM در تمام صفحات:

import { GoogleTagManager } from '@next/third-parties/google'

<GoogleTagManager gtmId="GTM-XYZ" />

برای ارسال رویداد:

import { sendGTMEvent } from '@next/third-parties/google'

sendGTMEvent({ event: 'buttonClicked', value: 'xyz' })

پارامترهای اختیاری شامل gtmScriptUrl، dataLayer، auth و preview هستند.

Google Analytics

برای بارگذاری GA در تمام صفحات:

import { GoogleAnalytics } from '@next/third-parties/google'

<GoogleAnalytics gaId="G-XYZ" />

برای ارسال رویداد:

import { sendGAEvent } from '@next/third-parties/google'

sendGAEvent('event', 'buttonClicked', { value: 'xyz' })

Google Analytics به‌صورت خودکار pageview را در ناوبری‌های کلاینتی ثبت می‌کند. برای ارسال دستی، باید اندازه‌گیری پیش‌فرض را غیرفعال کنید.

Google Maps Embed

برای افزودن نقشه:

import { GoogleMapsEmbed } from '@next/third-parties/google'

<GoogleMapsEmbed
  apiKey="XYZ"
  height={200}
  width="100%"
  mode="place"
  q="Brooklyn+Bridge,New+York,NY"
/>

پشتیبانی از گزینه‌هایی مانند center، zoom، maptype، language و region نیز وجود دارد.

YouTube Embed

برای افزودن ویدیو یوتیوب:

import { YouTubeEmbed } from '@next/third-parties/google'

<YouTubeEmbed videoid="ogfYd705cRs" height={400} params="controls=0" />

این کامپوننت از lite-youtube-embed برای بارگذاری سریع‌تر استفاده می‌کند.