Komut Dosyası Optimizasyonu (Script Optimization)

Düzen Komut Dosyaları (Layout Scripts)

Birden fazla rota için üçüncü taraf bir komut dosyası yüklemek için next/script dosyasını 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 iç içe geçmiş herhangi bir 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ğlar.

Uygulama Komut Dosyaları (Application Scripts)

Tüm rotalar için üçüncü taraf bir komut dosyası yüklemek için next/script dosyasını 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.

Strateji (Strategy)

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

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

Komut Dosyalarını Bir Web İşçisine Boşaltma (Deneysel) (Offloading Scripts to a Web Worker (Experimental))

Uyarı: worker stratejisi henüz kararlı değildir ve henüz app dizini ile çalışmaz. Dikkatli kullanın.

worker stratejisini kullanan komut dosyaları Partytown ile bir web çalışanına yüklenir ve 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 next.config.js dosyasında nextScriptWorkers bayrağı etkinleştirilirse kullanılabilir:

// next.config.js

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

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

npm run dev # or yarn dev

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

Kurulum tamamlandığında, strategy="worker" tanımlaması uygulamanızda Partytown'ı otomatik olarak başlatacak ve komut dosyasını bir web worker'a 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 tradeoffs belgelerine bakın.

Satır İçi Komut Dosyaları (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.

Ek Kodun Yürütülmesi (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 tamamlandıktan 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 kodun ilk satırı olarak "use client" tanımlanan bir İstemci Bileşeni içinde kullanıldığında çalışı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");
        }}
      />
    </>
  );
}

Ek Özellikler

Bir <script> öğesine atanabilecek, Kod bileşeni tarafından kullanılmayan, nonce veya özel veri nitelikleri gibi birçok DOM niteliği vardır. Herhangi bir ek niteliğin eklenmesi, HTML'ye dahil edilen son, optimize edilmiş <script> öğesine otomatik olarak 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"
      />
    </>
  );
}

PreviousYazı Tipi Optimizasyonu (Font Optimization)NextMetadata

Last updated 2 years ago

hashtagDüzen Komut Dosyaları (Layout Scripts)

hashtagUygulama Komut Dosyaları (Application Scripts)

hashtagStrateji (Strategy)

hashtagKomut Dosyalarını Bir Web İşçisine Boşaltma (Deneysel) (Offloading Scripts to a Web Worker (Experimental))

hashtagSatır İçi Komut Dosyaları (Inline Scripts)

hashtagEk Kodun Yürütülmesi (Executing Additional Code)

hashtagEk Özellikler