Install the Prepr preview toolbar

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

At the end of this section, you can use the Prepr preview toolbar in your website.

Prepr preview toolbar

Add the Prepr preview toolbar 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 Prepr preview toolbar which is pre-configured for adaptive content and A/B testing.

Enable the Prepr preview toolbar

The Prepr preview toolbar 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.

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

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

The preview bar component fetches all segments from the Prepr API. So, you need to give it access to do this by ticking the Enable edit mode checkbox in the access token.

Preview access token

Click the Save button.

Add the preview toolbar component

Now that the preview access token is updated, you can render the preview bar in your website, by adding the PreprToolbar 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 PreprToolbar component (this needs a server component)
import { getToolbarProps, extractAccessToken } from '@preprio/prepr-nextjs/server'
 
// Import the PreprToolbar component & provider
import { PreprToolbar, PreprToolbarProvider} from '@preprio/prepr-nextjs/react'
 
// Import the CSS for the PreprToolbar
import '@preprio/prepr-nextjs/index.css'
 
const ubuntu = Ubuntu({weight: ['400', '700'], subsets: ['latin']})
 
export const metadata: Metadata = {
    title: "Prepr Next.js complete starter",
    description: "Showing the power of personalization and A/B testing",
};
 
export default async function RootLayout({children,}: {children: React.ReactNode})
{
    // Get the props for the PreprToolbar component and check that the environment variable is set to preview
        const isPreview = process.env.PREPR_ENV === 'preview'
        const toolbarProps = isPreview ? await getToolbarProps(process.env.PREPR_GRAPHQL_URL!) : null
 
    return (
        <html lang="en">
            <head>
                <Script
                id={'prepr_script'}
                dangerouslySetInnerHTML={{
                    __html: `YOUR-PREPR-TRACKING-CODE`,
                }}></Script>
            </head>
	        <body className={ubuntu.className}>
                {isPreview && toolbarProps ? (
                    <PreprToolbarProvider props={toolbarProps}>
                        <PreprToolbar />
                        <NavBar/>
                        {children}
                    </PreprToolbarProvider>
                ) : (
                    <>
                        <NavBar/>
                        {children}
                    </>
                )}
            </body>    
        </html>
    );
}

When you open your website in the browser, you can see the Prepr icon on the page.

Test the preview bar

Now that the preview bar is being rendered, you can test it with the following steps:

Stop the localhost website server (CTRL-C) if it's running and restart it with the npm run dev terminal command.
Go to the home page of your website, open the Prepr preview toolbar and click the Reset button.
Choose the Electric Car Lovers segment. You'll see the personalized header for this segment.

preview bar - electric car segment

Go to http://localhost:3000/electric-lease to open the Electric Lease Landing Page in the browser and choose the B variant. You'll see that the text changes to the B variant content.

preview bar - variant b

All done

Congratulations! You have successfully installed the Prepr preview toolbar 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 personalization Prepr Next.js package

Was this article helpful?

We’d love to learn from your feedback