The Prepr Next.js package

The Prepr Next.js package offers some helper functions and the Adaptive Preview Bar for easier personalization and A/B testing implementation. This guide introduces you to the Prepr Next.js package and shows you how to use it.

Prerequisites

• You need to have a Next.js project connected to Prepr before installing the package.

Introduction

The Prepr Next.js package includes the following features:

• It provides an API request header for each visitor's customer ID. You need this API request header, Prepr-Customer-Id, when you query adaptive content and content with A/B testing.
• The Adaptive Preview Bar. This component provides an easy way to test adaptive content and content with A/B test variants.

Installation

To install the Prepr Next.js package, follow the steps below.

1. Run the following command in your Next.js project:

npm install @preprio/prepr-nextjs

2. Add the PREPR_ENV variable to the .env file. You can enable the Adaptive 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.

PREPR_GRAPHQL_URL=<YOUR-PREPR-GRAPHQL-URL>
PREPR_ENV=preview

3. You can then implement the PreprMiddleware function. Go to your middleware.ts or the middleware.ts file and add the code below. If you don't have this file, you can create it in the root of your project.

import type { NextRequest } from 'next/server'
import { PreprMiddleware } from '@preprio/prepr-nextjs'
 
export function middleware(request: NextRequest) {
    return PreprMiddleware(request)
}

Behind the scenes

• The PreprMiddleware function accepts a request and optional response property and returns a NextRequest object. It does this so you can chain your own middleware to it.

• The PreprMiddleware function checks every request if the __prepr_uid cookie is set. If it isn't, the function generates a new UUID and sets it as a cookie. Then it returns a Prepr-Customer-Id header with the value of the __prepr_uid cookie to simplify your personalization and A/B testing implementation.

• If the PREPR_ENV environment variable is set to preview, the PreprMiddleware function also checks for searchParams segments and a-b-testing in the URL. If these searchParams are set, the PreprMiddleware sets the Prepr-Segments and Prepr-AB-Testing headers with the values of the searchParams, and stores its value in a cookie.

Usage

Setting your API request headers

To set your API request headers to query adaptive content or A/B testing content, you can call the getPreprHeaders() helper function. It returns an array of headers that you can spread in your fetch call. See the example code below for a typical web page.

import { getClient } from '@/lib/client'
import { GetPageBySlugDocument, GetPageBySlugQuery } from '@/gql/graphql'
import { getPreprHeaders } from '@preprio/prepr-nextjs'
 
const getData = async () => {
    // Fetching the data using Apollo Client
    const {data} = await getClient().query < GetPageBySlugQuery > ({
        query: GetPageBySlugDocument,
        variables: {
            slug: '/',
        },
        context: {
            // Call the getPreprHeaders function to get the appropriate headers
            headers: getPreprHeaders(),
        },
        fetchPolicy: 'no-cache',
    })
}

Installing the Adaptive 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.

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

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

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

5. To implement the Adaptive Preview Bar component, navigate to your root layout file, this is usually layout.tsx. Then add the following code to your layout file.

// 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'
 
 
export default async function RootLayout({children}: {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>
            <head>
                {/*...*/}
            </head>
            <body>
                {/* Render the PreviewBar component and spread the previewBarProps */}
                <PreprPreviewBar {...previewBarProps} />
                {children}
            </body>    
        </html>
    )
}

Now the Adaptive Preview Bar component is rendered on every page of your website. This component shows the segments in a dropdown list and a switch for A and B variants for an A/B test. By adding the getPreprHeaders() function to your API calls, it automatically updates the adaptive content and A/B testing variants when you select a new segment or variant.

Adaptive content example - Electric Car Lovers segment

A/B testing example - B variant

All done

Congratulations! You've 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 Next.js project, check out the following resources:

• More data collection details
• More about A/B testing
• More about personalization