Empowering Developers & Publishers with Next.js, GraphQL, & Prismic

We love Next.js. It’s empowered our team to deliver products and experiences on behalf of our clients with incredible performance, user experience, developer experience, and velocity with its myriad of features such as server rendering, static exporting, CSS-in-JSS support, zero-setup, and extensibility.

We’re also big fans of GraphQL. Declarative data fetching alongside our components and the ability to replace inflexible APIs with a single versatile query system has made data and state management dare I say…delightful.

Given our affinity for and experience with both of these technologies, a few months ago we decided to apply them to one of our larger client service offerings: content management system integrations.

This is something we’ve been interested in exploring for a while but a lack of first-class GraphQL support in most CMS solutions forced us to shelve our ambition. Over the course of this past year, however, we began seeing a few popular headless CMS solutions such as Contentful and Prismic roll out first-class GraphQL support. After some deliberation and experimentation with these CMS solutions, we finally felt confident enough to move forward with one of them for a new brand called ThinkFWD, a community of innovators focused on delivering education, events, and tools for organizations seeking to leverage design thinking.

In this post, I’d like to share our findings and experience pairing Next.js with…🥁…Prismic.

Why Prismic?

Content Slicing

We chose Prismic primarily for two reasons. Firstly, Prismic is a good fit for the ThinkFWD brand, which requires an intuitive interface for its community of innovators to build rich stories and dynamic layouts. One of Prismic’s core features is called “content slicing” and it allows our team to define reusable custom components that enable the ThinkFWD community to build the type of highly expressive content it requires.

A Multi-brand Component System

Secondly, thinking ahead, we felt Prismic could empower our team to work more efficiently on future projects. As a digital and design consultancy working across many brands with time-sensitive milestones we have to be ruthlessly efficient with our approach to sharing reusable code and configuration. We learned the hard way, it doesn’t pay to keep reinventing components that share the same data requirements project after project. The cool part about content slices? They can be saved out to a “slice library” and reused across multiple client projects, themed differently on the frontend to match an individual brand.

Querying the Prismic GraphQL API

Every piece of content published within Prismic is accessible over a GraphQL endpoint, including content slices. This made introducing new components to the site a breeze. By establishing a one-to-one relationship between content slices and React components we were able to reduce the process of introducing a new component to a site down to three steps:

1. Define a new content slice inside Prismic
2. Add a React component to our Next.js app using the same name as the content slice
3. Update a GraphQL query with the content slice data

Helper function that returns a React component with data passed to it as props from a Prismic content slice.

Custom API Integrations

We needed a way to sync our client’s event data from Eventbrite to Prismic. Using Prismic’s Integration Fields feature, all we had to do was provide Prismic with our own API endpoint that adhered to its specification and Prismic took care of the rest, automatically syncing Eventbrite data and serving it over the same GraphQL API as the rest of our content.

Data Prefetching With Next

A little known feature of Next.js is the ability to extend its Link component to allow for data prefetching, both declaratively and imperatively on hover intent. The next-apollo package offers this abstraction for us out of the box.

Declarative prefetching example:

import { Link } from 'next-apollo'
<Link prefetch withData href="…">
  <a>Some dynamic page</a>
</Link>

Imperative prefetching example:

import { Link, prefetch } from 'next-apollo'
<Link href="…">
  <a onMouseOver={() => prefetch('...')}>
    Some dynamic page
  </a>
</Link>

By prefetching content from Prismic using Next, we were able to achieve the same perceived performance of a statically generated site using a framework such as Gatsby, but without the downsides of long build times every time a piece of content gets updated in the CMS.

Conclusion

We’re really happy with the results of our first content managed site using Prismic, GraphQL, and Next.js. If you’re interested in using these technologies for your own site, we’ve open sourced the ThinkFWD codebase here. Let us know what you think!