Pages Router: サードパーティ 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://connect.facebook.net/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://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 コードを実行するために使用されます。この例では、スクリプトが正しく読み込まれ、window.FB が設定されたことを示すメッセージをコンソールに記録しています

http://localhost:3000/posts/first-post にアクセスしてみてください。ブラウザの開発者ツールを使用すると、上記のメッセージが Console パネルに記録されているのが確認できます。さらに、window.FB を実行すると、スクリプトがこのグローバル変数を設定したことがわかります。

注： Facebook SDK は、サードパーティスクリプトをパフォーマンスを考慮してアプリケーションに追加する方法を示すための例としてのみ使用されました。Next.js でサードパーティ機能を含める基本を理解したので、先に進む前に FirstPost から Script コンポーネントを削除してください。

Script コンポーネントの詳細については、ドキュメントを参照してください。

サードパーティ JavaScript

サードパーティ JavaScript の追加

Script コンポーネントの使用

On this page