Script Optimization

Layout Scripts

Birden fazla rota için üçüncü taraf bir komut dosyası yüklemek için next/script adresini içe aktarın ve komut dosyasını doğrudan düzen bileşeninize ekleyin:

app/dashboard/layout.tsx

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

Üçüncü taraf komut dosyası, kullanıcı tarafından klasör rotasına (örn. dashboard/page.js) veya herhangi bir iç içe rotaya (örn. dashboard/settings/page.js) erişildiğinde getirilir. Next.js, kullanıcı aynı düzende birden fazla rota arasında gezinse bile komut dosyasının yalnızca bir kez yüklenmesini sağlayacaktır.

Application Scripts

Tüm rotalar için üçüncü taraf bir komut dosyası yüklemek için next/script adresini içe aktarın ve komut dosyasını doğrudan kök düzeninize ekleyin:

app/layout.tsx

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

Bu komut dosyası, uygulamanızdaki herhangi bir rotaya erişildiğinde yüklenir ve yürütülür. Next.js, kullanıcı birden fazla sayfa arasında gezinse bile betiğin yalnızca bir kez yüklenmesini sağlayacaktır.

Öneri: Performans üzerindeki gereksiz etkiyi en aza indirmek için üçüncü taraf komut dosyalarını yalnızca belirli sayfalara veya düzenlere eklemenizi öneririz.

Strategy

next/script 'un varsayılan davranışı herhangi bir sayfa veya mizanpajda üçüncü taraf komut dosyalarını yüklemenize izin verse de, strategy özelliğini kullanarak yükleme davranışında ince ayar yapabilirsiniz:

beforeInteractive: Komut dosyasını herhangi bir Next.js kodundan önce ve herhangi bir sayfa hidrasyonu gerçekleşmeden önce yükleyin.
afterInteractive:(varsayılan) Kodu erken yükleyin, ancak sayfada bir miktar hidrasyon gerçekleştikten sonra.
lazyOnload: Tarayıcı boşta kaldığında komut dosyasını daha sonra yükleyin.
worker: (deneysel) Komut dosyasını bir web çalışanına yükleyin.

Bakınız next/script Her bir strateji ve kullanım durumları hakkında daha fazla bilgi edinmek için API referans belgelerini inceleyin.

Offloading Scripts To A Web Worker (Experimental)

Uyarı: worker stratejisi henüz kararlı değildir ve henüz app dizin. Dikkatli kullanın.

worker stratejisini kullanan komut dosyaları boşaltılır ve Partytown ile bir web çalışanı içinde yürütülür. Bu, ana iş parçacığını uygulama kodunuzun geri kalanına ayırarak sitenizin performansını artırabilir.

Bu strateji hala deneyseldir ve yalnızca nextScriptWorkers bayrağı next.config.js adresinde etkinleştirilmişse kullanılabilir:

next.config.js

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

Ardından, next (normalde npm run dev veya yarn dev) adresini çalıştırın ve Next.js kurulumu tamamlamak için gerekli paketlerin kurulumunda size rehberlik edecektir:

Terminal

npm run dev

Bunun gibi talimatlar göreceksiniz: Lütfen Partytown'ı şu komutu çalıştırarak yükleyin npm install @builder.io/partytown

Kurulum tamamlandıktan sonra, strategy="worker" adresinin tanımlanması Partytown'ı uygulamanızda otomatik olarak başlatacak ve komut dosyasını bir web çalışanına yükleyecektir.

pages/home.tsx

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

Bir web çalışanına üçüncü taraf bir komut dosyası yüklerken dikkate alınması gereken bir dizi ödünleşme vardır. Daha fazla bilgi için lütfen Partytown'ın ödünleşim belgesine bakın.

Inline Scripts

Satır içi komut dosyaları veya harici bir dosyadan yüklenmeyen komut dosyaları da Komut Dosyası bileşeni tarafından desteklenir. JavaScript'i küme parantezleri içine yerleştirerek yazılabilirler:

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

Ya da dangerouslySetInnerHTML özelliğini kullanarak:

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

Uyarı: Next.js'nin komut dosyasını izlemesi ve optimize etmesi için satır içi komut dosyaları için bir id özelliği atanmalıdır.

Executing Additional Code

Olay işleyicileri, belirli bir olay gerçekleştikten sonra ek kod çalıştırmak için Script bileşeniyle birlikte kullanılabilir:

onLoad: Kodun yüklenmesi bittikten sonra kodu çalıştırın.
onReady: Kodun yüklenmesi bittikten sonra ve bileşen her takıldığında kodu çalıştırın.
onError: Kod yüklenemezse kodu çalıştırın.

Bu işleyiciler yalnızca next/script içe aktarıldığında ve "use client" adresinin ilk kod satırı olarak tanımlandığı bir İstemci Bileşeni içinde kullanıldığında çalışacaktır:

app/page.tsx

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

Bakınız next/script Her bir olay işleyici hakkında daha fazla bilgi edinmek ve örnekleri görüntülemek için API referansı.

Additional Attributes

Bir <script> öğesine atanabilen ve Script bileşeni tarafından kullanılmayan birçok DOM özniteliği vardır, örneğin nonce veya özel veri nitelikleri. Herhangi bir ek niteliğin eklenmesi, otomatik olarak HTML'ye dahil edilen son, optimize edilmiş <script> öğesine iletecektir.

app/page.tsx

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