Pages Router：第三方 JavaScript | Next.js

第三方 JavaScript 指的是從第三方來源加入的任何腳本。通常引入第三方腳本是為了為網站添加無需從頭編寫的新功能，例如分析工具、廣告和客戶支援小工具。

加入第三方 JavaScript

讓我們深入探討如何在 Next.js 頁面中加入第三方腳本。

在編輯器中開啟 pages/posts/first-post.js 並找到以下程式碼：

<Head>
  <title>First Post</title>
</Head>

除了元數據外，需要盡快載入和執行的腳本通常會加入頁面的 <head> 中。使用一般的 HTML <script> 元素，外部腳本會以下列方式加入：

<Head>
  <title>First Post</title>
  <script src="https://connect.facebook.net/en_US/sdk.js" />
</Head>

此腳本包含 Facebook SDK，通常用於引入 Facebook 社交插件和其他功能。雖然這種方法可行，但以這種方式包含腳本無法明確了解它與頁面上其他 JavaScript 代碼的載入時機。如果特定腳本會阻擋渲染並延遲頁面內容載入，這可能會顯著影響效能。

使用 Script 元件

next/script 是 HTML <script> 元素的擴展，能優化額外腳本的載入和執行時機。

在同一個檔案中，在檔案開頭加入從 next/script 導入的 Script：

import Script from 'next/script';

現在，更新 FirstPost 元件以包含 Script 元件：

export default function FirstPost() {
  return (
    <>
      <Head>
        <title>First Post</title>
      </Head>
      <Script
        src="https://connect.facebook.net/en_US/sdk.js"
        strategy="lazyOnload"
        onLoad={() =>
          console.log(`script loaded correctly, window.FB has been populated`)
        }
      />
      <h1>First Post</h1>
      <h2>
        <Link href="/">← Back to home</Link>
      </h2>
    </>
  );
}

請注意，Script 元件中定義了幾個額外屬性：

strategy 控制第三方腳本應何時載入。lazyOnload 值告訴 Next.js 在瀏覽器空閒時間延遲載入此特定腳本
onLoad 用於在腳本載入完成後立即執行任何 JavaScript 代碼。在此範例中，我們在控制台記錄一條訊息，說明腳本已正確載入

嘗試訪問 http://localhost:3000/posts/first-post。使用瀏覽器的開發者工具，您應該會在 Console 面板中看到上述記錄的訊息。此外，您可以執行 window.FB 來查看腳本是否已填充此全域變數。

注意： Facebook SDK 僅作為一個刻意安排的範例，用於展示如何以高效能的方式將第三方腳本加入您的應用程式。現在您已了解在 Next.js 中包含第三方功能的基本知識，可以在繼續之前從 FirstPost 中移除 Script 元件。

若要深入了解 Script 元件，請查閱文件。

第三方 JavaScript

加入第三方 JavaScript

使用 Script 元件

On this page