In this guide, you'll learn how to add Rollout integrations in your Next.js app.


To complete this guide, you will need:

  • A Rollout account
  • Docker: download from
  • A local dev tunnel like ngrok

1. Create a Rollout project and run it locally#

Clone the starter template. You can clone it in the root of your Next.js app or keep it in a separate repo:

# In your terminal
$ git clone rollout
$ cd rollout
# Install dependencies
$ yarn

Tip: Remember to delete the git reference by calling rm -rf .git in the root of the Rollout project

To run your Rollout project locally:

  1. Run ngrok and forward to local port 3300
ngrok http 3300
  1. Open Docker Desktop
  2. Start running your Rollout project. In the root of your project, run the command:

You can find your project key at and your tunnel URL in step 1

$ yarn rollout dev --project-key=YOUR_PROJECT_KEY --tunnel-url=YOUR_TUNNEL_URL

When you go to your dashboard, you should see an environment labeled LOCAL for your local development. Clicking on this environment will let you see your local ROLLOUT_CLIENT_SECRET:

2. Add an API route to generate a Rollout token#

In your Next.js app, add an API route to generate an authentication token:

Tip: run yarn add jsonwebtoken to add the package

// In app/rollout-token/route.ts
import { NextResponse } from 'next/server';
export const dynamic = 'force-dynamic';
const jsonwebtoken = require('jsonwebtoken');
function genToken(userId: string) {
const nowSecs = Math.round(new Date().valueOf() / 1000);
return jsonwebtoken.sign(
iss: process.env.ROLLOUT_PROJECT_KEY, // Find at
sub: userId,
iat: nowSecs,
exp: nowSecs + 60 * 10,
process.env.ROLLOUT_CLIENT_SECRET, // From the previous step
{ algorithm: 'HS512' }
// Assumes you'll pass it the userId as a query param
export async function GET(request: Request) {
const { searchParams } = new URL(request.url);
const userId = searchParams.get('userId');
const token = genToken(userId as string);
return NextResponse.json({ token });

3. Render a Rollout UI Component in your app#

First install @rollout/connect-react and its peer dependency @tanstack/react-query

yarn add @rollout/connect-react @tanstack/react-query@^4.33.0

Then render the following component in one of your pages

// In components/Integration.tsx
import "@rollout/connect-react/default.css";
import {
} from "@rollout/connect-react";
export function Integrations() {
const userId = "testUserId"; // Replace with a real user ID
const fetchToken = async () => {
const response = await fetch(`/rollout-token?userId=${userId}`);
const data = await response.json();
return data.token;
return (
<AutomationsManager />

Code Example#

Read the source code or try it yourself by running this example repository: