Enrutador de Páginas: JavaScript de Terceros

JavaScript de terceros se refiere a cualquier script que se añade desde una fuente externa. Generalmente, estos scripts se incluyen para agregar funcionalidades al sitio sin necesidad de escribirlas desde cero, como análisis de datos, anuncios y widgets de atención al cliente.

Añadir JavaScript de Terceros

Veamos cómo podemos añadir un script de terceros a una página de Next.js.

Abre pages/posts/first-post.js en tu editor y busca las siguientes líneas:

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

Además de los metadatos, los scripts que necesitan cargarse y ejecutarse lo antes posible suelen añadirse dentro del <head> de una página. Usando un elemento HTML <script> convencional, un script externo se añadiría así:

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

Este script contiene el SDK de Facebook que se usa comúnmente para integrar plugins sociales de Facebook y otras funcionalidades. Aunque este enfoque funciona, incluir scripts de esta manera no da una idea clara de cuándo se cargará en relación con otro código JavaScript de la página. Si un script en particular bloquea el renderizado y puede retrasar la carga del contenido, esto puede afectar significativamente el rendimiento.

Usar el Componente Script

next/script es una extensión del elemento HTML <script> que optimiza cuándo se cargan y ejecutan los scripts adicionales.

En el mismo archivo, añade una importación para Script desde next/script al principio del archivo:

import Script from 'next/script';

Ahora, actualiza el componente FirstPost para incluir el componente 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>
    </>
  );
}

Observa que se han definido algunas propiedades adicionales en el componente Script:

strategy controla cuándo debe cargarse el script de terceros. Un valor de lazyOnload le indica a Next.js que cargue este script específico de manera diferida durante el tiempo de inactividad del navegador.
onLoad se usa para ejecutar cualquier código JavaScript inmediatamente después de que el script haya terminado de cargarse. En este ejemplo, registramos un mensaje en la consola que indica que el script se ha cargado correctamente.

Prueba accediendo a http://localhost:3000/posts/first-post. Usando las herramientas de desarrollador de tu navegador, deberías ver el mensaje anterior registrado en el panel Console. Además, puedes ejecutar window.FB para ver que el script ha poblado esta variable global.

Nota: El SDK de Facebook solo se usó como ejemplo artificial para mostrar cómo añadir scripts de terceros a tu aplicación de manera eficiente. Ahora que entiendes los conceptos básicos de incluir funcionalidades de terceros en Next.js, puedes eliminar el componente Script de FirstPost antes de continuar.

Para aprender más sobre el componente Script, consulta la documentación.

JavaScript de Terceros

Añadir JavaScript de Terceros

Usar el Componente Script

On this page