Guías Técnicas

Componente Script en Next.js 14 - Optimización de Scripts Externos y Rendimiento

El componente Script te permite cargar scripts externos o locales de manera optimizada, controlando cuándo y cómo se ejecutan.
Esto ayuda a mejorar el rendimiento y evitar bloqueos en el renderizado inicial.

Ejemplo básico del componente Script

A continuación, un ejemplo básico de cómo usar el componente Script para cargar un script externo de Google Analytics.

jsx 
import Script from 'next/script' // Importamos el componente Script de Next.js

export default function Page() {
return (
      <>
      <h1>Mi página con Script</h1>

      {/* Carga el script de Google Analytics después de que la página sea interactiva */}
      <Script
          src="https://www.googletagmanager.com/gtag/js?id=GA_TRACKING_ID"
          strategy="afterInteractive"
      />

      {/* Inicialización inline del script, 
      sirve para inyectar código JavaScript directamente dentro del HTML, justo después de que la página se haya vuelto interactiva
      */}
      <Script id="ga-init" strategy="afterInteractive">
      {
          window.dataLayer = window.dataLayer || [];
          function gtag(){dataLayer.push(arguments);}
          gtag('js', new Date());
          gtag('config', 'GA_TRACKING_ID');
      }
      </Script>
      </>
)
}

Estrategia usada:
afterInteractive → el script se ejecuta después de que la página esté lista para interactuar.
Ideal para herramientas como Google Analytics, Chatbots, etc.

Ejemplo con script local

Aquí tienes un ejemplo de cómo cargar un script local desde /public/scripts/widget.js, el cual inicializa un widget personalizado en la página.

jsx 
import Script from 'next/script'

export default function CustomWidget() {
return (
      <>
      {/* Carga un script local desde /public/scripts/widget.js */}
      <Script src="/scripts/widget.js" strategy="lazyOnload" />
      <div id="widget-container"></div>
      </>
)
}

💡 lazyOnload carga el script solo cuando el navegador está libre, sin afectar el renderizado inicial.
Perfecto para scripts secundarios o widgets personalizados.

Ejemplo: Cargar Bootstrap con <Script>

También puedes usar el componente Script para integrar librerías como Bootstrap, asegurando que sus scripts JavaScript se ejecuten de forma optimizada y sin bloquear el renderizado inicial.

jsx 
import 'bootstrap/dist/css/bootstrap.min.css' // Importamos los estilos globales
import Script from 'next/script'

export const metadata = {
title: 'Mi App con Bootstrap',
description: 'Ejemplo integrando Bootstrap con Next.js',
}

export default function RootLayout({ children }) {
return (
  <html lang="es">
    <body>
      {children}

      {/* Cargamos el script de Bootstrap después de que la página sea interactiva */}
      <Script
        src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
        strategy="afterInteractive"
      />
    </body>
  </html>
)
}
  Nota

  • El CSS global de Bootstrap se importa una sola vez en layout.js, aplicándose a toda la app.
  • El JavaScript de Bootstrap se carga después de que la página esté lista (strategy="afterInteractive").
  • Esto evita bloqueos en el render y mantiene un excelente rendimiento.

  Recomendación extra

Si usas componentes interactivos de Bootstrap (como modales, dropdowns o tooltips), asegúrate de cargar
bootstrap.bundle.min.js, ya que incluye Popper.js de forma integrada.
Así evitas dependencias adicionales o errores de inicialización.

  • Evita usar la etiqueta <script> nativa, ya que <Script> optimiza la carga automáticamente.