Skript-Optimierung
Layout-Skripte
Um ein Drittanbieter-Skript für mehrere Routen zu laden, importieren Sie next/script und fügen Sie das Skript direkt in Ihrer 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 die Ordnerroute (z.B. dashboard/page.js) oder eine verschachtelte Route (z.B. dashboard/settings/page.js) vom Benutzer aufgerufen wird. Next.js stellt sicher, dass das Skript nur einmal geladen wird, auch wenn ein Benutzer zwischen mehreren Routen im gleichen Layout navigiert.
Anwendungsskripte
Um ein Drittanbieter-Skript für alle Routen zu laden, importieren Sie next/script und fügen Sie das Skript direkt in Ihrem 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 jede Route in Ihrer Anwendung aufgerufen wird. Next.js stellt sicher, dass das Skript nur einmal geladen wird, auch wenn ein Benutzer zwischen mehreren Seiten navigiert.
Empfehlung: Wir empfehlen, Drittanbieter-Skripte nur in spezifischen Seiten oder Layouts einzubinden, um unnötige Auswirkungen auf die Leistung zu minimieren.
Strategie
Obwohl das Standardverhalten von next/script es Ihnen ermöglicht, Drittanbieter-Skripte auf jeder Seite oder in jedem Layout zu laden, können Sie sein Ladeverhalten durch Verwendung der Eigenschaft strategy präzise abstimmen:
beforeInteractive: Laden Sie das Skript vor jedem Next.js-Code und vor jeder Seitenhydrierung.afterInteractive: (Standard) Laden Sie das Skript früh, aber nach einer gewissen Seitenhydrierung.lazyOnload: Laden Sie das Skript später während der Leerlaufzeit des Browsers.worker: (experimentell) Laden Sie das Skript in einem Webworker.
Weitere Informationen zu jeder Strategie und deren Anwendungsfällen finden Sie in der next/script API-Referenzdokumentation.
Auslagern von Skripten in einen Webworker (experimentell)
Warnung: Die
worker-Strategie ist noch nicht stabil und funktioniert noch nicht mit demapp-Verzeichnis. Verwenden Sie sie mit Vorsicht.
Skripte, die die worker-Strategie verwenden, werden ausgelagert und in einem Webworker mit Partytown ausgeführt. Dies kann die Leistung Ihrer Website verbessern, indem der Hauptthread für den Rest Ihres Anwendungscodes reserviert wird.
Diese Strategie ist noch experimentell und kann nur verwendet werden, wenn das Flag nextScriptWorkers in next.config.js aktiviert ist:
module.exports = {
experimental: {
nextScriptWorkers: true,
},
}Führen Sie dann next (normalerweise npm run dev oder yarn dev) aus, und Next.js wird Sie durch die Installation der erforderlichen Pakete zur Fertigstellung des Setups führen:
npm run devSie werden Anweisungen wie diese sehen: Bitte installieren Sie Partytown durch Ausführen von npm install @builder.io/partytown
Sobald das Setup abgeschlossen ist, wird das Definieren von strategy="worker" Partytown automatisch in Ihrer Anwendung instanziieren und das Skript in einen Webworker auslagern.
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 bei der Ladung eines Drittanbieter-Skripts in einem Webworker berücksichtigt werden müssen. Weitere Informationen finden Sie in der Partytown-Dokumentation zu Kompromissen.
Inline-Skripte
Inline-Skripte oder Skripte, die nicht aus einer externen Datei geladen werden, werden ebenfalls von der Skript-Komponente unterstützt. Sie können geschrieben werden, indem Sie das JavaScript in geschweiften Klammern platzieren:
<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.
Ausführen zusätzlichen Codes
Ereignishandler können mit der Script-Komponente verwendet werden, um zusätzlichen Code auszuführen, nachdem ein bestimmtes Ereignis aufgetreten ist:
onLoad: Code ausführen, nachdem das Skript vollständig geladen wurde.onReady: Code ausführen, nachdem das Skript vollständig geladen wurde, und jedes Mal, wenn die Komponente gemountet wird.onError: Code ausführen, wenn das Skript nicht geladen werden konnte.
Diese Handler funktionieren nur, wenn next/script importiert und innerhalb einer Client-Komponente verwendet wird, bei 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('Skript wurde geladen')
}}
/>
</>
)
}Weitere Informationen zu den einzelnen Ereignishandlern und Beispiele finden Sie in der next/script API-Referenz.
Zusätzliche Attribute
Es gibt viele DOM-Attribute, die einem <script>-Element zugewiesen werden können und nicht von der Script-Komponente verwendet werden, wie nonce oder benutzerdefinierte Datenattribute. Die Einbeziehung zusätzlicher Attribute leitet diese automatisch an das finale, optimierte <script>-Element weiter, das in den HTML-Code eingefügt 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"
/>
</>
)
}