14
チャプター14
サードパーティのJavaScript
サードパーティの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://#/en_US/sdk.js" />
</Head>このスクリプトには、Facebookソーシャルプラグインやその他の機能を導入するために一般的に使用されるFacebook SDKが含まれています。このアプローチは機能しますが、この方法でスクリプトを含めると、同じページで取得される他の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://#/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コンポーネントの詳細については、ドキュメントを確認してください。
お役に立ちましたか？