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

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

Published Oct 29, 2024 4 min read

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

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

Next steps

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

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

是非お試しください。

By 大平譲, Solutions Consultant

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

The views expressed on this blog are those of the author and do not necessarily reflect the views of New Relic. Any solutions offered by the author are environment-specific and not part of the commercial solutions or support offered by New Relic. Please join us exclusively at the Explorers Hub (discuss.newrelic.com) for questions and support related to this blog post. This blog may contain links to content on third-party sites. By providing such links, New Relic does not adopt, guarantee, approve or endorse the information, views or products available on such sites.

780+ integrations to start monitoring your stack for free.

See All Integrations

In this article

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

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

変更点

App Router の計測

Next steps

Tags

Related