Routeur Pages - JavaScript tiers

Le JavaScript tiers fait référence à tout script ajouté depuis une source externe. Généralement, les scripts tiers sont inclus pour introduire des fonctionnalités supplémentaires sur un site sans avoir à les développer depuis zéro, comme les analyses, les publicités et les widgets de support client.

Ajout de JavaScript tiers

Voyons comment ajouter un script tiers à une page Next.js.

Ouvrez pages/posts/first-post.js dans votre éditeur et repérez les lignes suivantes :

<Head>
  <title>First Post</title>
</Head>

En plus des métadonnées, les scripts qui doivent se charger et s'exécuter dès que possible sont généralement ajoutés dans le <head> d'une page. En utilisant un élément HTML <script> classique, un script externe serait ajouté comme suit :

<Head>
  <title>First Post</title>
  <script src="https://connect.facebook.net/en_US/sdk.js" />
</Head>

Ce script contient le SDK Facebook couramment utilisé pour intégrer des plugins sociaux Facebook et d'autres fonctionnalités. Bien que cette approche fonctionne, l'inclusion de scripts de cette manière ne donne pas une idée claire de quand il se chargera par rapport aux autres codes JavaScript récupérés sur la même page. Si un script particulier bloque le rendu et peut retarder le chargement du contenu de la page, cela peut considérablement affecter les performances.

Utilisation du composant Script

next/script est une extension de l'élément HTML <script> qui optimise le moment où les scripts supplémentaires sont récupérés et exécutés.

Dans le même fichier, ajoutez une importation pour Script depuis next/script au début du fichier :

import Script from 'next/script';

Maintenant, mettez à jour le composant FirstPost pour inclure le composant Script :

export default function FirstPost() {
  return (
    <>
      <Head>
        <title>First Post</title>
      </Head>
      <Script
        src="https://connect.facebook.net/en_US/sdk.js"
        strategy="lazyOnload"
        onLoad={() =>
          console.log(`script loaded correctly, window.FB has been populated`)
        }
      />
      <h1>First Post</h1>
      <h2>
        <Link href="/">← Back to home</Link>
      </h2>
    </>
  );
}

Notez que quelques propriétés supplémentaires ont été définies dans le composant Script :

strategy contrôle quand le script tiers doit se charger. Une valeur de lazyOnload indique à Next.js de charger ce script spécifique de manière différée pendant les temps d'inactivité du navigateur.
onLoad est utilisé pour exécuter du code JavaScript immédiatement après le chargement du script. Dans cet exemple, nous enregistrons un message dans la console indiquant que le script s'est correctement chargé.

Essayez d'accéder à http://localhost:3000/posts/first-post. En utilisant les outils de développement de votre navigateur, vous devriez voir le message ci-dessus enregistré dans le panneau Console. De plus, vous pouvez exécuter window.FB pour voir que le script a rempli cette variable globale.

Remarque : Le SDK Facebook n'a été utilisé ici qu'à titre d'exemple pour montrer comment ajouter des scripts tiers à votre application de manière performante. Maintenant que vous comprenez les bases de l'inclusion de fonctionnalités tierces dans Next.js, vous pouvez supprimer le composant Script de FirstPost avant de continuer.

Pour en savoir plus sur le composant Script, consultez la documentation.

JavaScript tiers

Ajout de JavaScript tiers

Utilisation du composant Script

On this page