Configura New Relic para el monitoreo de rendimiento en Next.js

May 1, 2023

Next.js es un marco de JavaScript moderno que optimiza la velocidad y el rendimiento de páginas y aplicaciones, además de la velocidad de desarrollo y la experiencia. Permite construir aplicaciones híbridas o con renderizado en el lado del servidor con una configuración mínima. Sin embargo, incluso las aplicaciones Next.js deben ser monitoreadas en busca de problemas de rendimiento y errores. En el lado del servidor, se monitorean métricas de aplicación, como el puntaje Apdex, el rendimiento y las transacciones, para ayudar a escalar los proyectos.

En este tutorial, aprenderás a configurar la monitorización del rendimiento de aplicaciones para el lado del servidor en tu aplicación Next.js. Para comenzar, necesitarás una cuenta de New Relic y una clave de licencia, ambas disponibles de forma gratuita.

Monitoreo del lado del servidor en Next.js

En el lado del servidor, Next.js utiliza Node.js y React para el renderizado en el servidor. En este tutorial, repasaremos la instrumentación oficial de New Relic para Next.js escrita en Node.js.

Instalación del agente y el middleware

Ejecuta el siguiente comando en tu proyecto Next.js para instalar el agente de Node.js (APM) de New Relic y el middleware de New Relic para Next.js.

npm install newrelic @newrelic/next

Después de que el comando se haya completado con éxito, verás las dependencias incluidas en tu archivo package.json.

"dependencies": {
   "@newrelic/next": "^0.3.0",
   "newrelic": "^9.0.0",
   "next": "latest",
   "react": "17.0.2",
   "react-dom": "17.0.2"
},

Configuración

A continuación, modifica tus scripts de dev y start en la sección de scripts del archivo package.json. Permite que tu aplicación se ejecute con la opción -r de Node, que cargará previamente el middleware @newrelic/next.

NODE_OPTIONS='-r @newrelic/next' next start

La sección de scripts debería verse así:

"scripts": {
   "dev": "NODE_OPTIONS='-r @newrelic/next' next",
   "build": "next build",
   "start": "NODE_OPTIONS='-r @newrelic/next' next start",
   "lint": "next lint"
},

Ya sea que estés usando node o ts-node, puedes agregar NODE_OPTIONS al comando de la misma manera.

Antes de ejecutar tu aplicación, es necesario crear y configurar el archivo newrelic.js en el directorio raíz de tu proyecto. Este archivo contiene la configuración del agente de New Relic APM (Application Performance Monitoring) y es esencial para monitorear el rendimiento de tu aplicación correctamente. A continuación, te explicamos cómo crear y configurar el archivo newrelic.js paso a paso:

  1. En el directorio raíz de tu proyecto Next.js, crea un nuevo archivo llamado newrelic.js.
  2. Abre el archivo newrelic.js en tu editor de código preferido y pega el siguiente código de configuración básica: 
    'use strict';
const appName = 'TuAppName';
const licenseKey = 'TuLicenseKey';

exports.config = {
  app_name: [appName],
  license_key: licenseKey,
  logging: {
    level: 'info',
  },
};
  3. Reemplaza 'TuAppName' con el nombre de tu aplicación. Este nombre te ayudará a identificarla en el panel de control de New Relic.
  4. Reemplaza 'TuLicenseKey' con la clave de licencia proporcionada por New Relic. Puedes encontrar la clave de licencia en la sección "Account Settings" de tu cuenta de New Relic.
  5. Guarda los cambios en el archivo newrelic.js.

Para obtener más información sobre la configuración y personalización del agente de New Relic APM, consulta la documentación oficial de New Relic.

Visualización de datos de rendimiento en New Relic

Una vez que hayas creado y configurado el archivo newrelic.js con el nombre de tu aplicación y la clave de licencia, ya puedes proceder a ejecutar tu aplicación. New Relic APM utilizará esta información para monitorear y reportar el rendimiento de tu aplicación en el lado del servidor.

En resumen, monitorear el rendimiento en el lado del servidor es fundamental para garantizar que tu aplicación Next.js funcione sin problemas y proporcione una experiencia de usuario óptima. Al seguir este tutorial y utilizar New Relic, podrás obtener una visibilidad completa de tu aplicación y abordar rápidamente cualquier problema que surja.