Install the Prepr preview toolbar

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.

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

2. 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.

   

3. 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.

   

   Click the Save button.

   Invisible unicode characters

   When using the preview access token, you’ll notice your query responses include additional unicode characters for the whitespace in the text fields. When you turn on edit mode in an access token, Stega-encoding serializes metadata into invisible UTF-8 encoded characters and appends them to string values.

   

4. So far, your web app is setting the headers based on the visitor cookies to determine how to render the A/B testing and adaptive content. To make sure the Prepr preview toolbar overrides the headers to switch between the A/B testing and adaptive content variants, update the proxy.ts to enable the preview option.

   ./src/proxy.ts

   import type { NextRequest } from 'next/server'
   import createPreprMiddleware from '@preprio/prepr-nextjs/middleware'
    
   export function proxy(request: NextRequest) {
       return createPreprMiddleware(request, { preview: true })
   }

Add the preview toolbar component

Now that the preview access token is updated, you can render the preview bar in your website, by creating a new layout.tsx file in the catch-all folder [[...slug]] with the following code.

import { Suspense } from 'react'
 
// 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'
 
export default async function Layout({ 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'
    let toolbarProps = null
    
    // Wrap in try-catch to handle cases where headers() can't be called during static generation
    if (isPreview) {
      try {
        toolbarProps = await getToolbarProps(process.env.PREPR_GRAPHQL_URL!)
      } catch (error) {
        // During static generation (e.g., for not-found pages), headers() may not be available
        // Silently fail and render without the toolbar
        console.error('Failed to fetch toolbar props:', error)
        toolbarProps = null
      }
    }
    
    const accessToken = extractAccessToken(process.env.PREPR_GRAPHQL_URL!)
    
    return (
        <>
            {isPreview && toolbarProps ? (
                <PreprToolbarProvider props={toolbarProps}>
                    <Suspense fallback={null}>
                        <PreprToolbar />
                    </Suspense>
                    {children}
                </PreprToolbarProvider>
            ) : (
                children
            )}
        </>
    )
}

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:

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, open the Prepr preview toolbar and click the Reset button.

3. Choose the Electric Car Lovers segment. You’ll see the personalized header for this segment.

3. 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.