Node.js Agent v12.0.0 のリリースで Next.js の連携方法が従来の newrelic-node-next から node-newrelic のみを利用する方法に変わりましたのでその設定例を本記事ではご紹介します。
Node.js Agent v12.0.0 のリリースノートも併せてご確認ください。
変更点
今までは@newrelic/next を利用する形で呼び出していましたがこれからは newrelic を呼び出すだけで Next.js の計測が可能になりました。package.json で呼びしている npm scripts の NODE_OPTIONS を更新します。
"scripts": {
...
"start": "NODE_OPTIONS='-r @newrelic/next' next start",
...
},
↓
"scripts": {
...
"start": "NODE_OPTIONS='-r newrelic' next start",
...
},この状態で npm run dev などでサービスを起動して問題なく計測されれば対応としては完了です。
次に App Router のケースの計測方法の変更点を紹介します。
App Router の計測
今回は App Router を利用している場合のケースについて紹介をします。
過去の連携方法についてはHow to monitor a Next.js application with app-based routerのブログに記載がありますのでそちらも見て頂くと本記事の理解が深まります。
next.config.js の設定が今回の大きな変更点です。
これまでは
'use strict'
const nrExternals = require('@newrelic/next/load-externals')
module.exports = {
experimental: {
serverComponentsExternalPackages: ['newrelic']
},
webpack: (config) => {
nrExternals(config)
return config
}
}このような形で @newrelic/next に依存していましたがこれからは
'use strict'
const nrExternals = require('newrelic/load-externals')
module.exports = {
experimental: {
serverComponentsExternalPackages: ['newrelic']
},
webpack: (config) => {
nrExternals(config)
return config
}
}このような形で newrelic を利用するようにすることでこれまで同様に App Router を利用しているケースも計測が引き続き可能です。
この状態で今までのようにサービスを起動してください。
アプリケーションを起動してこれまで同様に計測ができていれば対応としては完了です。
本記事と近しい設定をしている Github のリポジトリがありますのでそちらも最後に紹介します。
https://github.com/newrelic/newrelic-node-examples/blob/main/nextjs/nextjs-app-router/README.md
本記事の内容としては以上になります。
次のステップ
本記事は APM での計測のご紹介になりました。
Browser Agent での Session Replay や分散トレースもあわせて利用することでフロントエンド、バックエンドあわせて観測することが可能になります。
是非お試しください。
本ブログに掲載されている見解は著者に所属するものであり、必ずしも New Relic 株式会社の公式見解であるわけではありません。また、本ブログには、外部サイトにアクセスするリンクが含まれる場合があります。それらリンク先の内容について、New Relic がいかなる保証も提供することはありません。
