Next.js est un framework puissant pour construire des applications web innovantes et évolutives. Cependant, pour débloquer son plein potentiel, vous devez maîtriser l'intégration de bibliothèques tierces. Ces bibliothèques peuvent ajouter une myriade de fonctionnalités à vos applications Next.js, améliorant les performances, l'expérience utilisateur et l'efficacité du développeur. Dans ce guide, nous explorerons comment exploiter les bibliothèques tierces dans vos projets Next.js en utilisant la bibliothèque @next/third-parties.

Démarrer avec @next/third-parties

Pour commencer, vous devez installer la bibliothèque @next/third-parties. Cette bibliothèque fournit des composants et des utilitaires optimisés pour les bibliothèques tierces populaires, facilitant leur intégration dans vos applications Next.js.

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

@next/third-parties est actuellement expérimental et en développement actif. Nous recommandons d'utiliser la dernière version pendant que d'autres intégrations tierces sont ajoutées.

Intégrations tierces Google

La bibliothèque @next/third-parties facilite l'intégration avec plusieurs services Google, notamment Google Tag Manager, Google Analytics, Google Maps Embed et YouTube Embed. Explorons chacune de ces intégrations en détail.

Google Tag Manager

Google Tag Manager vous permet de gérer et de déployer facilement des balises marketing (extraits de code ou pixels de suivi) sur votre site web sans modifier le code. Utilisez le composant GoogleTagManager pour ajouter un conteneur GTM à votre page.

Ajouter Google Tag Manager à toutes les routes

Pour inclure Google Tag Manager sur toutes les routes, placez le composant GoogleTagManager dans votre fichier /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>
  );
}

Ajouter Google Tag Manager à une seule route

Pour inclure Google Tag Manager uniquement sur une route spécifique, ajoutez le composant dans votre fichier de page.

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

Google Analytics

Google Analytics vous aide à suivre et à rapporter le trafic de votre site web. Le composant GoogleAnalytics peut être utilisé pour inclure Google Analytics 4 dans votre page via la balise Google (gtag.js).

Ajouter Google Analytics à toutes les routes

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

Ajouter Google Analytics à une seule route

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

Intégration Google Maps

Pour intégrer une carte Google dans votre page, utilisez le composant 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"
    />
  );
}

Intégration YouTube

Pour intégrer une vidéo YouTube dans votre page, utilisez le composant YouTubeEmbed. Ce composant se charge plus rapidement en utilisant lite-youtube-embed sous le capot.

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

Conclusion

Les bibliothèques tierces sont essentielles pour ajouter des fonctionnalités riches à vos applications Next.js. La bibliothèque @next/third-parties simplifie le processus d'intégration avec des composants et des utilitaires optimisés pour les services Google et plus encore. À mesure que vous continuez à explorer et à maîtriser ces intégrations, vos applications Next.js amélioreront non seulement l'expérience utilisateur mais aussi les flux de travail de développement.

Pour une documentation plus détaillée et des exemples, veuillez consulter la documentation officielle de Next.js. Bon codage !

Références

"Third Party Libraries". Documentation Next.js.

Maîtriser Next.js : Exploiter la puissance des intégrations tierces