We’re happy to announce a new Prismic integration made just for Next.js users!

It's a new package you can install via npm, @prismicio/next, that eases the process of setting up live content previews in your app. If you’ve ever been in the position of writing content, you know being able to preview drafts is more than a luxury — it’s a necessity.

The new preview helpers in @prismicio/next make it easy to integrate Next.js’s Preview Mode into your app. It also hooks into the Prismic Toolbar to provide features like refreshing the page after saving a content change or the ability to share preview links with guests.

If you’re already familiar with Preview Mode, great! Just know that it follows standard Next.js conventions and uses the previewData object in your data fetching functions like getStaticProps().

If you aren’t familiar with Next.js’s Preview Mode, it lets a user temporarily enable Server-side Rendering (SSR) for all pages (if it wasn’t already SSRed) and query specifically for draft content. Once a user is done with their preview session, they can exit Preview Mode and return to the standard app.

Basically, it lets you build your getStaticProps() or getServerSideProps() functions to handle individual preview sessions.

Video walk-through

If you’d like to see a walkthrough of the new integration, check out the video below.

Check out the full guide for step-by-step instructions on setting up previews with @prismicio/next in the documentation.

Out of beta

We previously announced @prismicio/next as a public beta. Since then, its usage has grown to over 1,700 weekly downloads and has even been integrated into some of our own apps. The most notable update we made during the beta period was supporting the ability to share links to individual Prismic preview sessions.

Thank you to everyone who tried out @prismicio/next during its public beta. 🔥 The feedback we received helped iron out bugs and fill in missing features.

Of course, we’re still looking for any feedback you can offer! If you come across any bugs or have any suggestions for new features, please share them with us on GitHub.

🙋‍♀️ Report a bug or request a feature on GitHub

If you want to learn more about how you can make your content writers’ lives easier through content previews with @prismicio/next, head over to the docs for a full guide. Don’t worry, it’s a short one. 😉