A statically generated blog example using Next.js and Prepr

This example showcases Next.js's Static Generation feature using Prepr as the data source.

Demo

Check out our Blog page example:

• Live: https://next-blog-prepr.vercel.app/
• Preview: https://next-blog-prepr.vercel.app/api/preview...

How to use

Run one of the following create-next-app commands using npm, Yarn, or pnpm to create a new Next.js app and connect it to Prepr:

npx create-next-app --example cms-prepr cms-prepr-app

yarn create next-app --example cms-prepr cms-prepr-app

pnpm create next-app --example cms-prepr cms-prepr-app

Configuration

Step 1. Set up Prepr

1.1 First, sign up for a Prepr account.

1.2 After you sign up, create a new environment in Prepr. For more details, check out the environment docs.

1.3 Once you’ve created the environment, choose to Load demo data. With that, Prepr will automatically upload sample models, content items, and other data you can use for your example Next.js app.

Step 2. Set up environment variables

Once you’ve set up your Prepr environment, you can define environment variables for your project. Please proceed with the steps below.

2.1 Run the following command to copy and rename the .env.local.example file as follows:

cp .env.local.example .env.local

The .env.local file will be ignored by Git.

2.2 In your environment, navigate to Settings > Access Tokens. You will see the automatically generated access tokens for your Prepr environment.

Copy the GraphQL Production access token and paste it as the PREPRIO_PRODUCTION_TOKEN variable in .env.local. Then copy and paste the GraphQL Preview access token as the PREPRIO_PREVIEW_TOKEN variable.

Alternatively, you can create access tokens yourself by clicking Add access token. If so, make sure to choose the right GraphQL permissions for the access tokens.

2.3 Set a custom value with no spaces as the PREPRIO_PREVIEW_SECRET variable, for example, a UUID. This value will be used to enable preview mode.

Once done, your .env.local file should look like this:

PREPRIO_API=https://graphql.prepr.io/graphql
PREPRIO_PRODUCTION_TOKEN='your Production access token'
PREPRIO_PREVIEW_TOKEN='your Preview access token'
PREPRIO_PREVIEW_SECRET='your secret id'

Step 3. Run Next.js in development mode

Now that you've finished preparing the project, you may proceed to run it.

3.1 Execute one of the following commands to install the packages listed in the package.json file:

npm install

yarn install

3.2 Execute one of the following commands to run the dev script defined in the package.json file:

npm run dev

yarn dev

Your example Blog website should be up and running on http://localhost:3000. If it doesn't work, please post on GitHub discussions.

Step 4. Optional: Try Preview mode

Great progress has been made! You are just a few steps away from getting your example website live. Before proceeding, you can test how the content preview works in Prepr. This step is optional. Proceed to Step 5 if you don’t want to use preview mode.

To try preview mode, follow these steps:

4.1 In Prepr, go to one of the content items of the Article model and update the item title. For example, you can add [PREVIEW] in front of the title. After you edit the content item, save it with the Review status.

4.2 To preview the content item, transform its URL to the following format:

http://localhost:3000/api/preview?secret=<PREPRIO_PREVIEW_SECRET>&slug=<SLUG_TO_PREVIEW>, where:

• <PREPRIO_PREVIEW_SECRET> is the same preview secret you defined in the .env.local file;
• <SLUG_TO_PREVIEW> is the slug of the content item you want to preview.

Note: To exit the preview mode, you must click on Click here to exit preview mode at the top of the page.

Step 5. Deploy on Vercel

To make your Next.js app available online, deploy it to the cloud using Vercel. Vercel provides a user-friendly platform for deploying and managing web applications. For more information, please refer to the Next.js documentation.

You can go for one of the following options:

• Deploy your local project
  To deploy your local project to Vercel, push it to GitHub/GitLab/Bitbucket and import it to Vercel.

Important: When you import your project on Vercel, make sure to click on Environment Variables and set them to match your .env.local file.

• Deploy from our template
  Alternatively, you can deploy using our template by clicking on the Deploy button below.

Next steps

For more advanced topics, please refer to the Prepr’s documentation:

• A/B testing
• Personalization
• Recommendations

If you have questions, please get in touch with one of our specialists or join our Slack community.

Related examples

• WordPress
• DatoCMS
• Sanity
• TakeShape
• Prismic
• Contentful
• Strapi
• Agility CMS
• Cosmic
• ButterCMS
• Storyblok
• Kontent
• Ghost
• GraphCMS
• Blog Starter
• DotCMS
• Enterspeed