Integrating Feedback Rocket with the new Next.js App Router is simple. Note that there are a few small integration differences depending on whether you’re using the Pages Router or the App Router—this guide is written for the latter. Let’s get started.
Make sure Node.js and npm are installed on your machine by running:
node -v && npm -vIf you’re missing them, they can be downloaded from the official Node.js website.
To create a new Next.js application 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) … Yes
✔ 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, which means we’ll have a newly minted Next.js app using TypeScript and the new App Router.
We’ll follow the official Next.js documentation approach to including third party scripts. That means opening up your root layout in `src/app/layout.tsx` and adding the Feedback Rocket SDK:
import "./globals.css";
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import Script from "next/script";
const inter = Inter({ subsets: ["latin"] });
export const metadata: Metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body className={inter.className}>{children}</body>
<Script
src="https://www.feedbackrocket.io/sdk/v1.2.js"
data-fr-id={process.env.NEXT_PUBLIC_FR_ID}
/>
</html>
);
}
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.
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_1234Make 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.
Let’s start the app by running:
npm run devYou 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.
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. Open up `src/app/page.tsx` and rip out all of the boilerplate for now, replacing it instead with the following:
export default function Home() {
return (
<main>
<button data-fr-widget>Get in touch</button>
</main>
)
}
The Feedback Rocket dialog will now be triggered whenever anyone clicks “Get in touch”. All done!
That’s it—you have successfully integrated Feedback Rocket into your Next.js application using the new App Router.