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

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

Setup New Relic (Browser) In Your Next.js App
Photo by NASA / Unsplash

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 <script> tag.

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.

import Document, { Html, Head, Main, NextScript } from 'next/document'
class MyDocument extends Document {
render() {
return (
<Html>
<Head>
<script async type="text/javascript" src="/js/newrelic.js" />
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
}
export default MyDocument

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 the Newrelic dashboard you will see some data.

that’s all for this one. Thank you!