How to monitor a Next.js application with app-based router

Next.js 13 introduces the App Router, which utilizes React's latest features like Server Components and Streaming to enhance web application efficiency. This blog post guides users on setting up application performance monitoring for both server-side and frontend aspects using the App Router, offering full-stack observability in Next.js applications. It details the integration of New Relic for monitoring, starting with the installation of the New Relic Node.js agent, which now includes the @newrelic/next package by default, enabling server-side monitoring without additional installations. Users are instructed to modify the next.config.js file and package.json scripts to ensure proper instrumentation. The post also covers injecting the New Relic browser agent for client-side telemetry and demonstrates error tracking through example code for both client-side and server-side errors. The blog concludes by directing users to additional resources, including GitHub repositories and the Explorers Hub for community support, while emphasizing the authors' expertise in JavaScript and data monitoring.