サードパーティ 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://#/en_US/sdk.js" />
</Head>
このスクリプトには、Facebook ソーシャルプラグインやその他の機能の導入によく使用される Facebook SDK が含まれています。このアプローチは機能しますが、この方法でスクリプトを含めると、同じページでフェッチされた他の JavaScript コードとのロードタイミングが明確になりません。特定のスクリプトがレンダリングをブロックし、ページコンテンツのロードを遅らせる可能性がある場合、パフォーマンスに大きな影響を与える可能性があります。
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://#/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 コードを実行するために使用されます。この例では、スクリプトが正しくロードされたことを示すメッセージをコンソールに記録しますhttps://:3000/posts/first-post にアクセスしてみてください。ブラウザーの開発ツールを使用すると、上記のメッセージが Console パネルに記録されているはずです。さらに、window.FB を実行して、スクリプトがこのグローバル変数を設定したことを確認できます。
注: Facebook SDK は、サードパーティスクリプトをパフォーマンスの高い方法でアプリケーションに追加する方法を示すための、作為的な例としてのみ使用されました。Next.js にサードパーティ機能を含める基本的な方法を理解したので、先に進む前に、FirstPost から Script コンポーネントを削除できます。
Scriptコンポーネントの詳細については、ドキュメントを参照してください。
簡単な復習: next/script は、あなたにとって何を簡素化しますか?