New Relic を使用して App Router Next.js アプリケーションを監視する方法

Next.js は、開発と実行時の両方で最適化された速度とパフォーマンスを提供する強力な JavaScript フレームワークです。 Next.js 13 のリリースにより、App Router が Next.js アプリケーションでルーティングを処理する推奨方法になりました。この新しいルーターは、サーバー コンポーネントやストリーミングなどの React の最新機能を活用して、Web アプリケーションを構築するためのより現代的で効率的なアプローチを提供します。

このブログ投稿では、新しい App Router を使用してサーバー側のアプリケーション パフォーマンス監視とフロントエンドのブラウザ監視を設定し、Next.js アプリケーションでフルスタックの可観測性を実現する方法を学びます。開始するには、New Relic アカウントとライセンス キーが必要です。どちらも無料で入手できます。

エージェントとミドルウェアのインストール

Next.js プロジェクトで次のコマンドを実行して、New Relic Node.js APM エージェントと Next.js 用の New Relic ミドルウェアをインストールします。
リーリー

コマンドが正常に完了すると、package.json ファイルに含まれる依存関係が表示されます。

リーリー

@newrelic/next パッケージは、Next.js アプリケーションの New Relic モニタリングのための公式インスツルメンテーションを提供します。これは、ページとサーバーの両方のリクエストに対するサーバー側のレンダリング、ミドルウェア、トランザクションの名前付けに焦点を当てており、サーバー側のアクティビティの包括的な可観測性を確保します。

このパッケージは個別にインストールされますが、New Relic Node.js エージェントとシームレスに統合され、Next.js アプリケーションのパフォーマンス監視とエラー追跡を強化するためのエージェントのすべての機能を提供します。

クライアント側のアクションについては説明していませんが、クライアント側のテレメトリ用に New Relic ブラウザ エージェントを挿入できます (詳細については、このブログ投稿で後ほど説明します)。

構成

New Relic を使用して Next.js アプリケーションを効果的にインストルメントするには、next.config.js ファイルを変更する必要があります。この構成により、New Relic によってサポートされるモジュールが webpack によって破壊されず、それらのモジュールが外部化されます。

次の内容を含む next.config.js ファイルをプロジェクト ルートに作成または更新します。

リーリー

次に、dev を変更し、package.json ファイルの scripts セクションを修正して npm スクリプトを開始します。 Node の -r オプションを使用してアプリケーションを実行できるようにします。これにより、@newrelic/next ミドルウェアがプリロードされます。

リーリー

アプリケーションを実行する前に、newrelic.js AMP エージェント設定ファイルをプロジェクトのルート ディレクトリに追加します。詳細については、Next.js アプリの構成ファイルの例を参照してください。

さらに、アプリケーションの .env ファイルの例に示すように、.env ファイルで NEW_RELIC_APP_NAME と NEW_RELIC_LICENSE_KEY を使用します。

New Relic でのパフォーマンス データの表示

アプリケーションを実行し、New Relic の APM ページに移動します。アプリケーションのサーバー側データが New Relic に流れ込んでいるのがわかります。

フロントエンドの可観測性

App Router の使用時にブラウザー エージェントを挿入するには、app/layout.js(.ts) ファイルを編集します。

リーリー

このプロセスの手順は次のとおりです:

npm install newrelic @newrelic/next コマンドをまだ使用していない場合は、newrelic npm パッケージをインストールします。

newrelic.getBrowserTimingHeader メソッドを追加します。
2. hasToRemoveScriptWrapper: true を引数として newrelic.getBrowserTimingHeader に渡し、ブラウザ スクリプトが