NextJS with Prepr Headless CMS integration

An open source showcase of how these technologies integrate. Opinionated, and sprinkled with a bit of TailwindCSS to ensure the sample looks nice too.

I’ve created this as an example, something that I’m happy to show others if they wonder how we’d use them in a production scenario. In general, such an example should be exemplary:

be built with production-worthy code
be simple enough while still being realistic
supplement the official documentation

This style of example is something I often create, and you can see a whole range of exemplary examples on GitHub for a whole range of technologies.

Note that usually these samples are not updated through time. It’s advised to check the last commit dates to see how up to date the sample is, and adjust your usage accordingly.

About the demo content

To be able to showcase some of Prepr's features we have some demo content on this site's Prepr environmnent:

Home where the basics of this sample are explained.
Authors with their short biographies, photos, and so forth. All initially generated by LLM's.
Articles which include Poems and Short Stories initially generated by LLM's
Menu items which link to either internal pages (most of the time) or external websites.
Search page with a simple full-text based search.
About Prepr page to showcase how content was modeled and authored in Prepr.
Footer (so a sort of secondary menu) with various links.

If you'd like more details of the environment, or an export of the schema: let us know!

Technologies involved

Demo of styles

Here’s a list of several info-boxes to showcase how that kind of model and content would display in the site:

First Infobox

This is a bit of dummy information to showcase what a box could look like.

Go to page >

Infobox number 2

Here is a second info box. It contains a bit more text content to showcase how that would work when rendered in the actual website. Looks okay, right?

It has no link to a page though. Just some text here.

Third informational box with longer title

This is the third (important) box with information.

A first bullet item
The second bullet is a lot longer with more text
Bullet three

Go back home >

Box Four

This is another box, with another style.

Love this bullet
Also love this other bullet

Go home >

Fifth Infobox

This is yet another box with information. It contains a lot of text that demonstrates it should work fine even if you have a ton of information. Heck we can even include a table in the box if we want:

Top Left	Top Right
Bottom Left	Bottom Right

Oh by the way you can also center text in Prepr if you must:

Dead Center!

But this is normally not advised from a design standpoint (just like underline not being links).

This is a footnote below that list of info-boxes.

Further details

This is another text block. We'll use it to demonstrate external links. For example you can go to github.com => jeroenheijmans => sample-nextjs-with-prepr where the code for this sample is hosted. Note how the URL opens in a new tab.