概要 Next.js は、React.js Web ページや Node.js API を作成するために使用される、Vercel によって作成された JavaScript フレームワークです。Next.js を RUM とインテグレーションすることで、フロントエンドとバックエンドのアプリケーションのブラウザ関連のメトリクスを監視し、パフォーマンスとユーザー行動を把握することができます。
セットアップ 以下の手順に従って、Datadog RUM ブラウザモニタリングを設定します。
アプリケーションの作成 Digital Experience > Performance Summary New Application ボタンをクリックします。JS が選択されていることを確認し、アプリケーションの名前を入力して Create New RUM Application をクリックします。アプリケーションの clientToken と applicationId が自動的に生成されます。 `.env.local` を使用する場合、プレフィックス `NEXT_PUBLIC_` の付いた変数のみがクライアントバンドルに含まれます。Next.js のドキュメントの
ブラウザの環境変数のバンドル を参照してください。
アプリケーションをインスツルメントする インスツルメンテーションの種類を選択し、Datadog RUM UI からインスツルメンテーションの種類に応じた適切なファイルにコードスニペットをコピーアンドペーストします。
npm を使用する際は、ルートの layout.tsx ファイルまたはカスタムの _app.tsx ファイル (Datadog は両方をサポートしています) に貼り付ける前に、Datadog RUM UI からコードスニペットにいくつかの小さな変更を加える必要があります。
アプリケーションが より新しい Next.js App Router (バージョン 13 以上) に依存している場合、Datadog では、RUM の初期化がクライアント側で行われるように、CDN 版 RUM のインスツルメンテーションを使用することを推奨しています。npm パッケージを使用する場合、RUM がクライアントからテレメトリーを収集できるように、初期化コードは クライアントコンポーネント で実行する必要があります。これは、layout.tsx<DatadogInit /> コンポーネントを作成し、その <DatadogInit /> コンポーネントを layout.tsx でレンダリングすることで実現できます。 Next.js アプリケーションがより古い Next.js Page Router に依存している場合は、"use client" ディレクティブなしで、また <DatadogInit /> コンポーネントを別途用意しなくても、カスタムの _app.tsx Copy
// このファイルがクライアント上で実行されるようにするため、App Router を使用する場合に必要。
"use client" ;
import { datadogRum } from "@datadog/browser-rum" ;
datadogRum . init ({
applicationId : "<YOUR_APPLICATION_ID>" ,
clientToken : "<CLIENT_TOKEN>" ,
site : "datadoghq.com" ,
service : "<SERVICE_NAME>" ,
env : "<ENV_NAME>" ,
// Datadog のデプロイされたアプリケーションのバージョンを識別するためにバージョン番号を指定します
// version: '1.0.0',
sessionSampleRate : 100 ,
sessionReplaySampleRate : 20 ,
trackUserInteractions : true ,
trackResources : true ,
trackLongTasks : true ,
defaultPrivacyLevel : "mask-user-input" ,
// RUM とバックエンドトレース間の接続のために、トレースヘッダーを伝播する URL を指定します
allowedTracingUrls : [
{ match : "https://example.com/api/" , propagatorTypes : [ "tracecontext" ] },
],
});
export default function DatadogInit () {
// レンダリングなし - このコンポーネントは、上記の初期化コードを
// クライアント側で実行するためだけに追加されています
return null ;
}
Copy
import DatadogInit from "@/components/datadog-init" ;
export default function RootLayout ({
children ,
} : {
children : React . ReactNode ;
}) {
return (
< html lang = "en" >
< body >
< DatadogInit />
{ children }
< /body>
< /html>
);
}
CDN 非同期を使用する場合は、root layout.tsx ファイルまたはカスタム _app.tsx ファイル (Datadog は両方をサポートしています) に貼り付ける前に、Datadog RUM UI からコードスニペットにいくつかの小さな変更を加える必要があります。
注 : Next.js スクリプトには import と export の行があり、Script id の間には中かっこやバックスティックが含まれています。ここで、Script のインスタンスはすべて大文字です。
Copy
import Script from "next/script" ;
export default function RootLayout ({
children ,
} : {
children : React . ReactNode ;
}) {
return (
< html lang = "en" >
< Script id = "datadog-rum" >
{ `
(function(h,o,u,n,d) {
h=h[d]=h[d]||{q:[],onReady:function(c){h.q.push(c)}}
d=o.createElement(u);d.async=1;d.src=n
n=o.getElementsByTagName(u)[0];n.parentNode.insertBefore(d,n)
})(window,document,'script','https://www.datadoghq-browser-agent.com/us1/v6/datadog-rum.js','DD_RUM')
window.DD_RUM.onReady(function() {
window.DD_RUM.init({
clientToken: '<CLIENT_TOKEN>',
applicationId: '<YOUR_APPLICATION_ID>',
site: 'datadoghq.com',
service: 'next-app-router-rum',
env: '<ENV_NAME>',
// デプロイされたアプリケーションのバージョンを Datadog 内で特定するためのバージョン番号を指定します
// version: '1.0.0',
sessionSampleRate: 100,
sessionReplaySampleRate: 100,
});
})
` }
< /Script>
< body > { children } < /body>
< /html>
);
}
CDN 同期を使用する場合は、root layout.tsx ファイルまたはカスタム _app.tsx ファイル (Datadog は両方をサポートしています) に貼り付ける前に、Datadog RUM UI からコードスニペットにいくつかの小さな変更を加える必要があります。
注 : Next.js スクリプトには import と export の行があり、Script id の間には中かっこやバックスティックが含まれています。ここで、Script のインスタンスはすべて大文字です。
Copy
import Script from "next/script" ;
export default function RootLayout ({
children ,
} : {
children : React . ReactNode ;
}) {
return (
< html lang = "en" >
< body >
< Script
id = "dd-rum-sync"
src = "https://www.datadoghq-browser-agent.com/us1/v6/datadog-rum.js"
type = "text/javascript"
strategy = "beforeInteractive"
/>
< Script id = "datadog-rum" >
{ `
window.DD_RUM && window.DD_RUM.init({
clientToken: '<CLIENT_TOKEN>',
applicationId: '<YOUR_APPLICATION_ID>',
site: 'datadoghq.com',
service: 'rum-cdn-async',
env: '<ENV_NAME>',
// デプロイされたアプリケーションのバージョンを Datadog 内で特定するためのバージョン番号を指定します
// version: '1.0.0',
sessionSampleRate: 100,
sessionReplaySampleRate: 100,
});
` }
< /Script>
{ children }
< /body>
< /html>
);
}
アプリ内の手順に従ってインストールを検証します。
変更をアプリケーションにデプロイします。実行が開始されると、ユーザーブラウザから Datadog によってイベントが収集されます。
収集したデータ は、ダッシュボード を使用して Next.js アプリケーションで視覚化できます。
バックエンドのモニタリング Next.js アプリケーションのバックエンドモニタリングを開始するには
RUM とトレースの接続 のブラウザの設定手順に従います。OpenTelemetry サポート のブラウザの設定手順に従って、APM と接続します。その他の参考資料 
