@preprio/prepr-nextjs 1.0.0-beta.3 → 1.0.0-beta.5

package/README.md

@@ -10,22 +10,22 @@ easier personalization & A/B testing implementation in your NextJS project.
 To install the Prepr NextJS package, run the following command:
 
 ```bash
-npm install @prepr/@preprio/prepr-nextjs
+npm install @preprio/prepr-nextjs
 ```
 
-Next you should navigate to your .env file and add the following environment variables:
+Next you should navigate to your `.env` file and add the following environment variable:
 
 ```bash
 PREPR_ENV=
 ```
 
-Certain functionality like the PreviewBar component requires the `PREPR_ENV` environment variable to be set to `preview`. 
-To prevent unwanted display of the PreviewBar component in production, you can set the `PREPR_ENV` environment variable to `production`.
+If you want to include the PreviewBar component in your project, set the `PREPR_ENV` environment variable to `preview`. 
+When you're launching your project to production, then set the `PREPR_ENV` environment variable to `production`. This way, the PreviewBar component doesn't get displayed on a live web app.
 
-Next we will implement the PreprMiddleware function, navigate to your `middleware.js|middleware.ts`
+Next, we will implement the PreprMiddleware function. Navigate to your `middleware.js` or the `middleware.ts`
 file. If you don't have this file, you can create it in the root of your project.
 
-Then add the following code to the `middleware.js|middleware.ts` file:
+Then add the following code to the `middleware.ts` file:
 ```javascript
 import type { NextRequest } from 'next/server'
 import { PreprMiddleware } from '@preprio/prepr-nextjs'
@@ -35,6 +35,15 @@ export function middleware(request: NextRequest) {
 }
 ```
 
+Or add the following code to the `middleware.js` file:
+```javascript
+import { PreprMiddleware } from '@preprio/prepr-nextjs'
+
+export function middleware(request) {
+    return PreprMiddleware(request)
+}
+```
+
 The PreprMiddleware accepts a request and optional response property and returns a `NextRequest` object. 
 This is done so you are able to chain your own middleware to it.
 
@@ -46,7 +55,8 @@ If the `PREPR_ENV` environment variable is set to `preview`, the PreprMiddleware
 If these searchParams are set, the PreprMiddleware will set the `Prepr-Segments` and `Prepr-AB-Testing` headers with the values of the searchParams, and store its value in a cookie.
 
 ## Usage
-To setup the headers with your API calls, you can call the `getPreprHeaders()` helper function. This will return an array of headers that you can spread in your fetch call.
+To set up the headers with your API calls, you can call the `getPreprHeaders()` helper function. This will return an array of headers that you can spread in your fetch call.
+See the example code below in the `page.tsx` file. 
 
 ```javascript
 import { getClient } from '@/lib/client'
@@ -68,13 +78,36 @@ const getData = async () => {
     })
 }
 ```
+See the javascript example code below in the `page.js`file.
+
+```javascript
+import { getClient } from '@/lib/client'
+import { GetPageBySlug } from '@/queries/get-page-by-slug';
+import { getPreprHeaders } from '@preprio/prepr-nextjs'
+
+const getData = async () => {
+    // Fetching the data using Apollo Client
+    const { data } = await client.query({
+    query: GetPageBySlug,
+    variables: {
+        slug: '/',
+    },
+    context: {
+            // Call the getPreprHeaders function to get the appropriate headers
+            headers: getPreprHeaders(),
+        },
+        fetchPolicy: 'no-cache',
+    })
+    return data;
+}
+```
 
 ### Installing the PreviewBar component
 
 For the PreviewBar to work we need to fetch all the segments from the Prepr API. To do this navigate to Prepr -> Settings -> Access tokens and create a new access token with the following scopes:
 - `segments`
 
-THen copy the access token and navigate to your `.env` file and add the following environment variable:
+Then copy the access token and navigate to your `.env` file and add the following environment variable:
 ```bash
 PREPR_SEGMENTS_ACCESS_TOKEN=<YOUR_ACCESS_TOKEN>
 ```
@@ -123,7 +156,7 @@ The `getPreprUUID()` function will return the value of the `__prepr_uid` cookie.
 Returns the active segment from the `Prepr-Segments` header.
 
 #### getActiveVariant()
-Returns the active variant from the `Prepr-AB-Testing` header.
+Returns the active variant from the `Prepr-ABTesting` header.
 
 #### getPreviewHeaders()
 Helper function to only get the preview headers.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@preprio/prepr-nextjs",
-  "version": "1.0.0-beta.3",
+  "version": "1.0.0-beta.5",
   "description": "A next.js package with code snippets to use with Prepr",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",

package/dist/components.d.mts

@@ -1,9 +0,0 @@
-import React from 'react';
-
-declare function PreprPreviewBar(props: {
-    activeSegment?: string | null;
-    activeVariant?: string | null;
-    data?: any;
-}): React.JSX.Element;
-
-export { PreprPreviewBar };

package/dist/components.d.ts

@@ -1,9 +0,0 @@
-import React from 'react';
-
-declare function PreprPreviewBar(props: {
-    activeSegment?: string | null;
-    activeVariant?: string | null;
-    data?: any;
-}): React.JSX.Element;
-
-export { PreprPreviewBar };

package/dist/index.d.mts

@@ -1,56 +0,0 @@
-import { NextRequest, NextResponse } from 'next/server';
-
-declare function PreprMiddleware(request: NextRequest, response?: NextResponse): NextResponse<unknown>;
-/**
- * Returns the Prepr Customer ID from the headers
- */
-declare function getPreprUUID(): string;
-/**
- * Retuns the active segment from the headers
- */
-declare function getActiveSegment(): string;
-/**
- * Returns the active variant from the headers
- */
-declare function getActiveVariant(): string;
-/**
- * Helper function to retrieve Prepr headers (will filter out customer ID if in preview mode)
- */
-declare function getPreprHeaders(): {
-    [key: string]: string;
-};
-type PreprSegment = {
-    id: string;
-    created_on: string;
-    changed_on: string;
-    synced_on: string;
-    label: string;
-    reference_id: string;
-    body: string;
-    query: string;
-    count: number;
-};
-type PreprSegmentsResponse = {
-    total: number;
-    skip: number;
-    limit: number;
-    items: PreprSegment[];
-};
-/**
- * Fetches the segments from the Prepr API
- * @param token Prepr access token with scope 'segments'
- * @returns Object with total, skip, limit and items
- */
-declare function getPreprEnvironmentSegments(token: string): Promise<PreprSegmentsResponse>;
-/**
- * Fetches all the necessary previewbar props
- * @param token Prepr access token with scope 'segments'
- * @returns Object with activeSegment, activeVariant and data
- */
-declare function getPreviewBarProps(token: string): Promise<{
-    activeSegment: string | null;
-    activeVariant: string | null;
-    data: PreprSegmentsResponse;
-}>;
-
-export { PreprMiddleware, type PreprSegment, type PreprSegmentsResponse, getActiveSegment, getActiveVariant, getPreprEnvironmentSegments, getPreprHeaders, getPreprUUID, getPreviewBarProps };

package/dist/index.d.ts

@@ -1,56 +0,0 @@
-import { NextRequest, NextResponse } from 'next/server';
-
-declare function PreprMiddleware(request: NextRequest, response?: NextResponse): NextResponse<unknown>;
-/**
- * Returns the Prepr Customer ID from the headers
- */
-declare function getPreprUUID(): string;
-/**
- * Retuns the active segment from the headers
- */
-declare function getActiveSegment(): string;
-/**
- * Returns the active variant from the headers
- */
-declare function getActiveVariant(): string;
-/**
- * Helper function to retrieve Prepr headers (will filter out customer ID if in preview mode)
- */
-declare function getPreprHeaders(): {
-    [key: string]: string;
-};
-type PreprSegment = {
-    id: string;
-    created_on: string;
-    changed_on: string;
-    synced_on: string;
-    label: string;
-    reference_id: string;
-    body: string;
-    query: string;
-    count: number;
-};
-type PreprSegmentsResponse = {
-    total: number;
-    skip: number;
-    limit: number;
-    items: PreprSegment[];
-};
-/**
- * Fetches the segments from the Prepr API
- * @param token Prepr access token with scope 'segments'
- * @returns Object with total, skip, limit and items
- */
-declare function getPreprEnvironmentSegments(token: string): Promise<PreprSegmentsResponse>;
-/**
- * Fetches all the necessary previewbar props
- * @param token Prepr access token with scope 'segments'
- * @returns Object with activeSegment, activeVariant and data
- */
-declare function getPreviewBarProps(token: string): Promise<{
-    activeSegment: string | null;
-    activeVariant: string | null;
-    data: PreprSegmentsResponse;
-}>;
-
-export { PreprMiddleware, type PreprSegment, type PreprSegmentsResponse, getActiveSegment, getActiveVariant, getPreprEnvironmentSegments, getPreprHeaders, getPreprUUID, getPreviewBarProps };