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

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

Publicado 29 de Oct de 2024 4 min de lectura

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

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

Próximos pasos

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

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

是非お試しください。

Por 大平譲, Solutions Consultant

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

Las opiniones expresadas en este blog son las del autor y no reflejan necesariamente las opiniones de New Relic. Todas las soluciones ofrecidas por el autor son específicas del entorno y no forman parte de las soluciones comerciales o el soporte ofrecido por New Relic. Únase a nosotros exclusivamente en Explorers Hub ( discus.newrelic.com ) para preguntas y asistencia relacionada con esta publicación de blog. Este blog puede contener enlaces a contenido de sitios de terceros. Al proporcionar dichos enlaces, New Relic no adopta, garantiza, aprueba ni respalda la información, las vistas o los productos disponibles en dichos sitios.

780+ integraciones para comenzar a monitorear tu stack gratuitamente.

Ver las integraciones

In this article

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

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

変更点

App Router の計測

Próximos pasos

Tags

Relacionado