第三方 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 程式碼，並不能清楚地知道何時加載。 如果一個特定的腳本是會妨礙渲染並延遲頁面內容的加載，這會顯著影響性能。
next/script 是 HTML <script> 的擴充，並在獲取和執行其他腳本時進行優化。
在同一個文件中，在文件開頭添加一個從 next/script 匯入的 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="/">
<a>Back to home</a>
</Link>
</h2>
</>
);
}請注意，腳本元件中定義了一些附加屬性：
strategy 控制何時加載第三方腳本。 lazyOnload 的值告訴 Next.js 在瀏覽器空閒時間延遲加載這個特定的腳本onLoad 用於在腳本完成加載後立即運行任何 JavaScript 程式碼。 在此範例中，我們將一條消息記錄到控制台，指出腳本已正確加載嘗試訪問 http://localhost:3000/posts/first-post。 通過使用瀏覽器的開發人員工具，您應該會在控制檯面板中看到上面記錄的消息。 此外，您可以運行 window.FB 以查看腳本已填充此全域變量。
注意：Facebook SDK 只是作為一個範例來展示如何以高效能的方式將第三方腳本添加到您的應用程式中。 現在您已了解在 Next.js 中包含第三方功能的基礎知識，您可以在繼續之前從 FirstPost 中刪除 Script 元件。
要了解有關 Script 元件的更多內容，請查看文件。
下一節中，我們將開始探討 CSS 樣式
© Copyrights 從想像到創造. All Rights Reserved.
