Getting started with Next.js

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>", // required
  timeout: 4000, // default value
  baseUrl: "https://cdn.prepr.io", // default value
  userId: null, // optional, used for AB testing
});

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
    .path("/publications")
    .query("...")
    .sort("created_at")
    .limit(8)
    .fetch();

  // Pass publications as props
  return {
    props: {
      publications,
    },
  };
}

export default Home;

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