ヘルプ APM APM Node.js Next.js

Next.jsアプリケーション監視

Next.jsはWebページとアプリケーションのパフォーマンスを最適化したJavaScriptフレームワークです。これを使用して、サーバー側でレンダリングされるアプリケーションとミドルウェアを開発できます。

APMインサイトNext.jsパッケージのヘルプ（英語版）から、Node.jsエージェントを用いてバックエンドのオブザーバビリティを監視できます。この監視では、アプリケーションの重要メトリックおよびNext.js特有のメトリックを監視できます。
Webバイタル、AJAX要求、ページビュー数などのフロントエンドメトリックを監視したい場合は、監視したいWebページやアプリケーションのIndexページヘッダー部分にRUMスクリプトを挿入して設定します。

  • サポートしている最小のNext.jsバージョンは12.0.9です。
  • APMインサイトNext.jsパッケージでは、ビルド構築中やクライアントサイド内のコードで発生したアクションの手順について、記載はありません。

目次

  • 実装手順

APMインサイトNext.jsパッケージをアプリケーションに追加する方法は次のとおりです。

APMインサイトNext.jsパッケージのインストール

APMインサイトNext.jsパッケージのインストール方法は次のとおりです。

  1. Next.jsプロジェクトで次のコマンドを実行し、APMインサイトNode.js（APM）エージェントとNext.jsのAPMインサイトミドルウェアをインストールします。
    npm install apminsight @apminsight/next
  2. コマンド実行が完了したら、package.jsonがファイルに依存性が表示されます。
    "dependencies": {
    "@apminsight/next": "^1.0.0",
    "apminsight": "^3.1.2",
    "next": "latest",
    },


設定

方法1：

package.jsonファイルのscripts項目を更新して、devおよびstart npmスクリプトを修正します。
"@apminsight/next"ミドルウェアをロードするための"Node’s -r"オプションを実行できるようにアプリケーションを許可します。

NODE_OPTIONS='-r @apminsight/next' next start

scripts項目は次のようなものがあります。

"scripts": {
"dev": "NODE_OPTIONS='-r @apminsight/next' next",
"build": "next build",
"start": "NODE_OPTIONS='-r @apminsight/next' next start"
},

方法2：

プログラム実行のためのコントロールがない場合、他のモジュールの前に、"@apminsight/next"モジュールをロードしてください。
しかし、この方法は使用しないことをおすすめします。次のビルドを実行する際のバンドル中にに問題が発生し、バンドルが不必要に大きくなることがわかりました。
require('@apminsight/next')
/* ... the rest of your program ... */


方法3：

カスタムNext.jsサーバーの場合

Nextをカスタムサーバーで使用している場合、Next CLIを使用してアプリケーションを実行することができません。この場合、次のコマンドを実行してNext.jsを実装してください。

node -r @apminsight/next your-start-file.js


設定値の設定

ファイル内を設定したい場合、次の手順を行ってください。

  1. "apminsightnode.json"という名前のファイルを新規作成し、アプリケーションを実行するディレクトリに配置します。
  2. ファイル内に次のコードを追加します。
{"licenseKey" : "<license-key>",
"appName" : "<application-name>",
"port" : <application-port> }

プロキシを使用している場合は、次のコードを追加します。

{"licenseKey" : "<license-key>",
"appName" : "<application-name>",
"port" : <application-port>,
"proxyServerHost" : "<proxy-server>",
"proxyServerPort" : <proxy-port>,
"proxyAuthUser" : "<proxy-user-name>",
"proxyAuthPassword" : "<proxy-password>"}
値を環境変数として設定することも可能です。


バックエンドパフォーマンスデータの表示

メトリックの表示方法は次のとおりです。

  1. Site24x7にログインします。
  2. ［APM］→［アプリケーション名］をクリックします。

上記手順により、アプリケーションのサーバーサイドのデータフローが表示されます。

Next.js metrics


フロントエンドパフォーマンスデータの表示

フロントエンドの監視を行いたい場合は、こちらのページをご確認ください。

トップ