NextJS + Prepr CMS

Prepr is the perfect Headless CMS for Next.js websites and apps. Take advantage of advanced Next.js lifecycle methods to access the data on the client, all rendered server-side.

Check out the example blog on Next.js GitHub

New project setup

Start by scaffolding a new project or opening up an existing one:

npx create-next-app prepr-next

cd prepr-next

npm i @preprio/nodejs-sdk

Great, we now have a Next.js project with the JavaScript SDK for Prepr.

Configuration

We recommend creating lib directory inside the root of your project and containing a file named prepr.js:

mkdir lib

cd lib

touch prepr.js

The prepr.js file will contain the client holding the configuration which will be used for every request made to the Prepr API.

Let's setup our configuration:

// lib/prepr.js

import { createPreprClient } from "@preprio/nodejs-sdk";

const prepr = createPreprClient({
    token: "<your access token>",  // You can find one in your Prepr environment
    baseUrl: "https://graphql.prepr.io/graphql",
    userId: null,// Optional, used for AB testing implmentations
});

export { prepr };

You can now import the client inside your pages.

Usage

// pages/home.js

// Import our configured Prepr client
import {prepr} from '../lib/prepr'

function Home({ publications }) {
  return (
    <ul>
      {publications.map((publication) => (
        <li>{...}</li>
      ))}
    </ul>
  );
}

export async function getStaticProps() {
  
    // Query publications
  const publications = await prepr
      .graphqlQuery(`{
            posts : BlogPosts {
                items {
                    _id
                    title
                    summary
                    _read_time
                }
            }
        }`)
      .fetch();

  // Pass publications as props
  return {
    props: {
      publications.data.posts.items,
    },
  };
}

export default Home;

For a more detailed usage on the @preprio/nodejs-sdk SDK please read its documentation.