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 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://#/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コンポーネントの詳細については、ドキュメントを参照してください。
役に立ちましたか？