Skripte laden und optimieren

Layout-Skripte

Um ein Drittanbieter-Skript für mehrere Routen zu laden, importieren Sie next/script und fügen Sie das Skript direkt in Ihre Layout-Komponente ein:

import Script from 'next/script'

export default function DashboardLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <>
      <section>{children}</section>
      <Script src="https://example.com/script.js" />
    </>
  )
}

Das Drittanbieter-Skript wird abgerufen, wenn der Benutzer auf die Ordnerroute (z.B. dashboard/page.js) oder eine verschachtelte Route (z.B. dashboard/settings/page.js) zugreift. Next.js stellt sicher, dass das Skript nur einmal geladen wird, selbst wenn ein Benutzer zwischen mehreren Routen innerhalb desselben Layouts navigiert.

Anwendungs-Skripte

Um ein Drittanbieter-Skript für alle Routen zu laden, importieren Sie next/script und fügen Sie das Skript direkt in Ihr Root-Layout ein:

import Script from 'next/script'

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
      <Script src="https://example.com/script.js" />
    </html>
  )
}

Dieses Skript wird geladen und ausgeführt, wenn irgendeine Route in Ihrer Anwendung aufgerufen wird. Next.js stellt sicher, dass das Skript nur einmal geladen wird, selbst wenn ein Benutzer zwischen mehreren Seiten navigiert.

Empfehlung: Wir empfehlen, Drittanbieter-Skripte nur in bestimmten Seiten oder Layouts einzubinden, um unnötige Auswirkungen auf die Leistung zu minimieren.

Strategie

Obwohl das Standardverhalten von next/script es ermöglicht, Drittanbieter-Skripte in jeder Seite oder jedem Layout zu laden, können Sie das Ladeverhalten mit der strategy-Eigenschaft feinjustieren:

beforeInteractive: Lädt das Skript vor jeglichem Next.js-Code und vor der Hydratation der Seite.
afterInteractive: (Standard) Lädt das Skript früh, aber nachdem die Hydratation der Seite begonnen hat.
lazyOnload: Lädt das Skript später während der Leerlaufzeit des Browsers.
worker: (experimentell) Lädt das Skript in einem Web Worker.

Lesen Sie die next/script-API-Referenzdokumentation, um mehr über jede Strategie und ihre Anwendungsfälle zu erfahren.

Skripte in einen Web Worker auslagern (experimentell)

Warnung: Die worker-Strategie ist noch nicht stabil und funktioniert noch nicht mit dem App Router. Verwenden Sie sie mit Vorsicht.

Skripte, die die worker-Strategie verwenden, werden in einen Web Worker mit Partytown ausgelagert und dort ausgeführt. Dies kann die Leistung Ihrer Seite verbessern, indem der Hauptthread für den Rest Ihres Anwendungscodes freigehalten wird.

Diese Strategie ist noch experimentell und kann nur verwendet werden, wenn das nextScriptWorkers-Flag in next.config.js aktiviert ist:

next.config.js

module.exports = {
  experimental: {
    nextScriptWorkers: true,
  },
}

Führen Sie dann next aus (normalerweise npm run dev oder yarn dev), und Next.js wird Sie durch die Installation der erforderlichen Pakete führen, um das Setup abzuschließen:

Terminal

npm run dev

Sie werden Anweisungen wie diese sehen: Bitte installieren Sie Partytown durch Ausführen von npm install @builder.io/partytown

Sobald das Setup abgeschlossen ist, wird durch die Definition von strategy="worker" automatisch Partytown in Ihrer Anwendung initialisiert und das Skript in einen Web Worker ausgelagert.

import Script from 'next/script'

export default function Home() {
  return (
    <>
      <Script src="https://example.com/script.js" strategy="worker" />
    </>
  )
}

Es gibt eine Reihe von Kompromissen, die beim Laden eines Drittanbieter-Skripts in einem Web Worker berücksichtigt werden müssen. Weitere Informationen finden Sie in der tradeoffs-Dokumentation von Partytown.

Inline-Skripte

Inline-Skripte, also Skripte, die nicht aus einer externen Datei geladen werden, werden ebenfalls von der Script-Komponente unterstützt. Sie können geschrieben werden, indem der JavaScript-Code in geschweifte Klammern gesetzt wird:

<Script id="show-banner">
  {`document.getElementById('banner').classList.remove('hidden')`}
</Script>

Oder durch Verwendung der dangerouslySetInnerHTML-Eigenschaft:

<Script
  id="show-banner"
  dangerouslySetInnerHTML={{
    __html: `document.getElementById('banner').classList.remove('hidden')`,
  }}
/>

Warnung: Für Inline-Skripte muss eine id-Eigenschaft zugewiesen werden, damit Next.js das Skript verfolgen und optimieren kann.

Zusätzlichen Code ausführen

Ereignishandler können mit der Script-Komponente verwendet werden, um zusätzlichen Code auszuführen, nachdem ein bestimmtes Ereignis eingetreten ist:

onLoad: Code ausführen, nachdem das Skript fertig geladen wurde.
onReady: Code ausführen, nachdem das Skript fertig geladen wurde und jedes Mal, wenn die Komponente eingebunden wird.
onError: Code ausführen, wenn das Skript nicht geladen werden kann.

Diese Handler funktionieren nur, wenn next/script importiert und in einer Client-Komponente verwendet wird, in der "use client" als erste Codezeile definiert ist:

'use client'

import Script from 'next/script'

export default function Page() {
  return (
    <>
      <Script
        src="https://example.com/script.js"
        onLoad={() => {
          console.log('Script has loaded')
        }}
      />
    </>
  )
}

Lesen Sie die next/script-API-Referenz, um mehr über jeden Ereignishandler zu erfahren und Beispiele zu sehen.

Zusätzliche Attribute

Es gibt viele DOM-Attribute, die einem <script>-Element zugewiesen werden können, die nicht von der Script-Komponente verwendet werden, wie nonce oder benutzerdefinierte Datenattribute. Das Hinzufügen weiterer Attribute führt automatisch dazu, dass diese an das finale, optimierte <script>-Element weitergeleitet werden, das in das HTML eingebunden wird.

import Script from 'next/script'

export default function Page() {
  return (
    <>
      <Script
        src="https://example.com/script.js"
        id="example-script"
        nonce="XUENAJFW"
        data-test="script"
      />
    </>
  )
}

Script

Optimieren Sie Drittanbieter-Skripte in Ihrer Next.js-Anwendung mit der integrierten `next/script`-Komponente.