Laden und Optimieren von Skripten

Anwendungs-Skripte

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

pages/_app.js

import Script from 'next/script'

export default function MyApp({ Component, pageProps }) {
  return (
    <>
      <Component {...pageProps} />
      <Script src="https://example.com/script.js" />
    </>
  )
}

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.

Verwendung einer benutzerdefinierten Partytown-Konfiguration

Obwohl die worker-Strategie keine zusätzliche Konfiguration erfordert, unterstützt Partytown die Verwendung eines Konfigurationsobjekts, um einige seiner Einstellungen zu ändern, einschließlich der Aktivierung des debug-Modus und der Weiterleitung von Ereignissen und Triggern.

Wenn Sie zusätzliche Konfigurationsoptionen hinzufügen möchten, können Sie diese in der <Head />-Komponente in einer benutzerdefinierten _document.js einbinden:

_pages/document.jsx

import { Html, Head, Main, NextScript } from 'next/document'

export default function Document() {
  return (
    <Html>
      <Head>
        <script
          data-partytown-config
          dangerouslySetInnerHTML={{
            __html: `
              partytown = {
                lib: "/_next/static/~partytown/",
                debug: true
              };
            `,
          }}
        />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

Um die Partytown-Konfiguration zu ändern, müssen folgende Bedingungen erfüllt sein:

Das Attribut data-partytown-config muss verwendet werden, um die von Next.js verwendete Standardkonfiguration zu überschreiben
Sofern Sie sich nicht entscheiden, die Bibliotheksdateien von Partytown in einem separaten Verzeichnis zu speichern, müssen die Eigenschaft und der Wert lib: "/_next/static/~partytown/" im Konfigurationsobjekt enthalten sein, damit Partytown weiß, wo Next.js die erforderlichen statischen Dateien speichert.

Hinweis: Wenn Sie ein asset prefix verwenden und die Standardkonfiguration von Partytown ändern möchten, müssen Sie dies in den lib-Pfad einbeziehen.

Werfen Sie einen Blick auf die Konfigurationsoptionen von Partytown, um die vollständige Liste der anderen Eigenschaften zu sehen, die hinzugefügt werden können.

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:

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"
      />
    </>
  )
}