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 ミドルウェアをインストールします。

npm install newrelic @newrelic/next

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

 "dependencies": {
   "@newrelic/next": "^0.10.0",
   "newrelic": "^11.23.0",
   "next": "14.2.5",
   "react": "^18",
   "react-dom": "^18"
 },

@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 ファイルをプロジェクト ルートに作成または更新します:

'厳密に使用' const nrExternals = require('@newrelic/next/load-externals') module.exports = { 実験的: { サーバーコンポーネント外部パッケージ: ['newrelic'] }、 webpack: (config) => { nr外部(構成) 構成を返す } }

'use strict'

const nrExternals = require('@newrelic/next/load-externals')

module.exports = {
  experimental: {
    serverComponentsExternalPackages: ['newrelic']
  },
  webpack: (config) => {
    nrExternals(config)
    return config
  }
}

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

「スクリプト」: { "dev": "NODE_OPTIONS='-r @newrelic/next' next", "ビルド": "次のビルド", "start": "NODE_OPTIONS='-r @newrelic/next' 次の開始", "lint": "次の lint" }

'use strict'

const nrExternals = require('@newrelic/next/load-externals')

module.exports = {
  experimental: {
    serverComponentsExternalPackages: ['newrelic']
  },
  webpack: (config) => {
    nrExternals(config)
    return config
  }
}

アプリケーションを実行する前に、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) ファイルを編集します。

「next/script」からスクリプトをインポート 「next/link」からリンクをインポート 「newrelic」から newrelic をインポートします './style.css' をインポートします デフォルトの非同期関数をエクスポート RootLayout({ Children }) { if (newrelic.agent.collector.isConnected() === false) { 新しい Promise((解決) を待つ => { newrelic.agent.on("接続済み"、解決) }) } const browserTimingHeader = newrelic.getBrowserTimingHeader({ hasToRemoveScriptWrapper: true、 allowTransactionlessInjection: true、 }) 戻る （

• ホーム
• ユーザー
• }>概要

{子供たち}