Development
Connecting a front-end framework
Next.js
Complete guide
Install preview bar

Install the Adaptive preview bar

This guide shows you how to install the Adaptive preview bar to easily review A/B testing and Adaptive content directly in your Next.js website.

At the end of this section, you'll see an adaptive preview bar at the top of the web page like in the image below.

Adaptive preview bar

Add the Adaptive preview bar to your website

The steps below assume that you already have A/B testing or personalization set up in your Next.js website. If you haven't yet added A/B testing or personalization, follow the steps in these sections first. Otherwise, let's get started.

When you installed the Prepr NextJS package previously, it included the Adaptive preview bar which is pre-configured for adaptive content and A/B testing.

Enable the Adaptive preview bar

The Adaptive preview bar is already installed, so the next step is to enable it. To enable the preview bar in your Next.js front end, follow the steps below.

  1. Add the PREPR_ENV variable to the .env file. You can enable the preview bar for a staging environment by setting the value to preview.

    Set this variable to production when you deploy your website to production so that the preview bar component doesn't get displayed in your live website.

./.env
PREPR_GRAPHQL_URL=<YOUR-PREPR-GRAPHQL-URL>
PREPR_ENV=preview
  1. Since we are setting up the configuration for the staging environment, update the value of the PREPR_GRAPHQL_URL variable to the API URL of the GraphQL Preview access token. This access token allows content editors to preview unpublished content items.

preview access token

Add the preview bar component

The preview bar component fetches all segments from the Prepr API. So, you need to give it access to do this as follows:

  1. In your Prepr environment, go to the Settings → Access tokens page to view all the access tokens.
  2. Click the Add access token button to create a new access token, give it a name and choose the segments scope like in the image below.

Segments access token

  1. Click the Save button and copy the generated Access token.

  2. Add a new variable PREPR_SEGMENTS_ACCESS_TOKEN to the .env file and paste the value you just copied.

./.env
PREPR_GRAPHQL_URL=<YOUR-PREPR-GRAPHQL-URL>
PREPR_ENV=preview
PREPR_SEGMENTS_ACCESS_TOKEN=<YOUR-SEGMENTS-ACCESS-TOKEN>

You need this additional access token because it's not used for content access like the GraphQL production and GraphQL preview access tokens. Its purpose is to give access to all segments.

To render the preview bar in your website, add the PreprPreviewBar component to the layout.tsx file as follows:

./src/app/layout.tsx
import type {Metadata} from "next";
import NavBar from "@/components/NavBar";
import './globals.css'
import {Ubuntu} from "next/font/google";
import Script from 'next/script'
// Helper function to get all the props for the PreviewBar component (this needs a server component)
import { getPreviewBarProps } from '@preprio/prepr-nextjs'
// Import the PreviewBar component
import { PreprPreviewBar } from '@preprio/prepr-nextjs/components'
// Import the PreviewBar CSS
import '@preprio/prepr-nextjs/dist/components.css'
 
const ubuntu = Ubuntu({weight: ['400', '700'], subsets: ['latin']})
 
export const metadata: Metadata = {
    title: "Prepr advanced starter",
    description: "Showing the power of personalization and A/B testing",
};
 
export default async function RootLayout({children}: Readonly<{children: React.ReactNode;}>) {
 
    // Get the props for the PreviewBar component, pass the access token as an argument
    const previewBarProps = await getPreviewBarProps(process.env.PREPR_SEGMENTS_ACCESS_TOKEN!)
 
    return (
        <html lang="en">
            <head>
                <Script
                id={'prepr_script'}
                dangerouslySetInnerHTML={{
                    __html: `YOUR-PREPR-TRACKING-CODE`,
                }}></Script>
            </head>
	        <body className={ubuntu.className}>
                {/* Render the PreviewBar component and spread the previewBarProps */}
                <PreprPreviewBar {...previewBarProps} />
		        <NavBar/>
		        {children}
	        </body>
        </html>
    );
}

When you open your website in the browser, you can see the preview bar at the top of the page.

Test the preview bar

Now that the preview bar is enabled you can test it with the following steps:

  1. Stop the localhost website server (CTRL-C) if it's running and restart it with the npm run dev terminal command.

  2. Go to the home page of your website and choose the Electric Car Lovers segment. You'll see the personalized header for this segment.

preview bar - electric car

  1. Click the Reset cookies button and choose the B variant. You'll see that the image and text section changes to the B variant.

preview bar - variant b

All done

Congratulations! You have successfully installed the Adaptive preview bar in your Next.js website. This brings you to the end of the Next.js complete guide which has given you all the tools and tips you need to create your own web app connected to Prepr CMS complete with personalization, A/B testing and a preview bar. Don't hesitate to give us feedback on your experience using this guide.

Next steps

To learn more on how to expand your project, check out the following resources:

Add personalizationNuxt

Was this article helpful?

We’d love to learn from your feedback