Setup New Relic (Browser) In Your Next.js App

Have you ever wondered why you have a high bounce rate? or why is your application not performing? New Relic helps you to understand what happens with your application after the user lands in your app.

For anyone who likes to learn with videos here is the video of this tutorial:

What will you learn?

Properly setting up the Newrelic browser app to a Next.js application.

Prerequisites? not really

Just the basic React knowledge.

Create your Newrelic account

visit newrelic.com and add your name + email to signup. Once you verified your email address. Login to your dashboard.

Getting Newrelic Script

You can find the Browser button in the top menu. Click here then click on add your first browser app button.

Click on Copy/Paste Javascript code checkbox then scroll down to add a name to your application. Once you add the application name, you will be able to get the Newrelic script.

Adding Newrelic script to the Next.js app

Copy the Newrelic script and go to your next.js project.

Create newrelic.js file inside the public/js folder and paste your newrelic script. Make sure to remove the opening and closing

Then in the Next.js project, you will need to create a file called _document.js if you don’t already have one.

then add the newrelic.js script.

Now you’ve successfully installed Newrelic in your Next.js project.

Watch your data

Run your application and navigate through the pages for a few minutes. When you go back to Newrelic dashboard you will see some data.

that’s all for this one. You can check out the example codebase here:

Thanks.. Until next time then..