Next.js 連携が Node.js Agent に統合されました

Next.js の連携方法が Node.js Agent v12.0.0 移行変わりました

Veröffentlicht 29. Okt. 2024 4 Minuten Lesedauer

Node.js Agent v12.0.0 のリリースで Next.js の連携方法が従来の newrelic-node-next から node-newrelic のみを利用する方法に変わりましたのでその設定例を本記事ではご紹介します。

Node.js Agent v12.0.0 のリリースノートも併せてご確認ください。

https://docs.newrelic.com/docs/release-notes/agent-release-notes/nodejs-release-notes/node-agent-12-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

本記事の内容としては以上になります。

Nächste Schritte

本記事は APM での計測のご紹介になりました。

Browser Agent での Session Replay や分散トレースもあわせて利用することでフロントエンド、バックエンドあわせて観測することが可能になります。

是非お試しください。

大平譲, Solutions Consultant

New Relic株式会社 Solution Consultant。B to B SaaS の企業で SRE のポジションで Software Engineer として従事してから現職。Kubernetes を使ったコンテナ環境の基盤構築や Terraform を使用した IaC などが得意領域。

Die in diesem Blog geäußerten Ansichten sind die des Autors und spiegeln nicht unbedingt die Ansichten von New Relic wider. Alle vom Autor angebotenen Lösungen sind umgebungsspezifisch und nicht Teil der kommerziellen Lösungen oder des Supports von New Relic. Bitte besuchen Sie uns exklusiv im Explorers Hub (discuss.newrelic.com) für Fragen und Unterstützung zu diesem Blogbeitrag. Dieser Blog kann Links zu Inhalten auf Websites Dritter enthalten. Durch die Bereitstellung solcher Links übernimmt, garantiert, genehmigt oder billigt New Relic die auf diesen Websites verfügbaren Informationen, Ansichten oder Produkte nicht.

780+ Integrationen für Ihren Einstieg ins Stack-Monitoring. Kostenlos.

Alle Integrationen

In this article

Next.js 連携が Node.js Agent に統合されました

Next.js の連携方法が Node.js Agent v12.0.0 移行変わりました

変更点

App Router の計測

Nächste Schritte

Tags

Verwandte Inhalte