Feedback Rocket - Integration GuidesNext.js - Pages Router

Feedback Rocket is framework-agnostic, so integrating with Next.js is straightforward and doesn’t differ much to integrating with a vanilla React application. That said, there are a few small differences, particularly between using the classic Pages Router and the new App Router. This guide is written for the Pages Router. Let’s dive straight in.

Step 1: Create a new Next.js Application

Firstly, ensure Node.js and npm are installed on your machine by running:

node -v && npm -v

If you’re missing either, you can grab both from the official Node.js website.

To create a new application using Next.js 13 (at the time of writing), we’ll use the create-next-app helper, which will be downloaded when you run the command below if you don’t already have it installed:

~/code $ npx create-next-app@latest feedback-rocket-app
✔ Would you like to use TypeScript? … Yes
✔ Would you like to use ESLint? … Yes
✔ Would you like to use Tailwind CSS? … Yes
✔ Would you like to use 'src/' directory? … Yes
✔ Would you like to use App Router? (recommended) … No
✔ Would you like to customize the default import alias? … No
Creating a new Next.js app in /Users/nick/code/feedback-rocket-app.

This command will create a new Next.js application in a directory called `feedback-rocket-app`. In this instance, I answered ‘Yes’ to all of the default prompts except answering No to Would you like to use the App Router?, since this guide is written for the classic Pages Router.

Step 2: Integrate Feedback Rocket

There are lots of ways to load third-party JavaScript within your application, but we’ll stick to the offical Next.js documentation way of doing it. Open up `src/pages/_app.tsx` and include the Feedback Rocket SDK:

import "@/styles/globals.css";
import type { AppProps } from "next/app";
import Script from "next/script";

export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <Component {...pageProps} />
      <Script
        src="https://www.feedbackrocket.io/sdk/v1.2.js"
        data-fr-id={process.env.NEXT_PUBLIC_FR_ID}
      />
    </>
  );
}

Note that we’re using process.env.NEXT_PUBLIC_FR_ID to inject the `data-fr-id` property—the bit which tells Feedback Rocket where to send the actual feedback—from an environment variable. Let’s explore how to configure that.

Step 3: Create the environment variable

We need to define NEXT_PUBLIC_FR_ID as an environment variable. You can do so by creating an `.env.local` file in the root of your application and adding a line like this:

NEXT_PUBLIC_FR_ID=abcd_1234

Make sure you replace `abcd_1234` with your actual Feedback Rocket ID, which you’ll find under Your Account » Widget setup. Note: Prefixing `NEXT_PUBLIC_` is a Next.js convention for exposing environment and is required in order for your environment variable to be exposed to the browser.

Step 4: Start your App

Start the app by running:

npm run dev

You can visit `localhost:3000` in your browser but you’ll just see a stock Next.js splash page. We need to wire up a button to trigger our feedback dialog.

Step 5: Add a Feedback Button

Now that we have the Feedback Rocket SDK being included on every page of our application, we need to create a way for our users to trigger it. To do this, we’re going to add a button that the user can click to open the feedback dialog. Out of the box, `create-next-app` will have populated your `src/pages/index.tsx` file with some boilerplate which we’re temporarily going to completely replace with nothing but a plain old feedback button instead:

export default function Home() {
  return (
    <main>
      <button data-fr-widget>Leave feedback</button>
    </main>
  )
}

Whenever a user clicks on the “Leave feedback” button, the Feedback Rocket dialog will appear. Job done!

Congratulations—you have successfully integrated Feedback Rocket into your Next.js application using the classic Pages Router.