NEHNO


BlogTechAbout

Headless CMS with Next.js

Andrew Lai
Andrew Lai
May 23rd, 2022
Cover Image for Headless CMS with Next.js

When I first started building out this site, I wanted to include a blog. If you don't want to constantly code new blog posts, using a content management system (CMS) is a must. It allows for easy creation and editing of posts and a place to store images and size them allowing anyone to easily help contribute content. There are a lot of different content management systems out there and Next.js has a ton of examples of integrating with a CMS: https://nextjs.org/examples


⁠Prismic

When I was first experimenting with Next.js and Vercel, I wanted to utilize a GraphQL CMS so I first tried Prismic.io and built on top of Next.js' Prismic example. Overall, it was pretty easy to get up and running but there were a couple of minor issues I ran into:

  1. The default example app wouldn't build and deploy properly due to some locale setting - I recall debugging this for a while and it's possible it's no longer an issue
  2. The RichText renderer didn't have an option for tables. It still doesn't have that as an option and it seems the workaround is to create a separate field which is really inconvenient since most of the time I want to embed a table in my post body content and not around it.

Next.js' CMS examples don't use typescript, so I started building the app over from scratch using create-next-app with the typescript option

npx create-next-app@latest --ts

After that it, it was time to decide to continue using Prismic or try a different CMS. This site was meant for experimentation so I ended up choosing GraphCMS to see if it was any better and because it's also a GraphQL api.


⁠GraphCMS

GraphCMS seems catered more towards developers since instead of Prismic's Documents, Custom Types, and Media Library, it uses the terminology Content, Schema, and Assets. It has a lot of template options to start the project with like Blog, Commerce, Marketing:


⁠I selected Developer Portfolio & Blog and after the project setup was complete, the schema was prepopulated with the models and fields I needed for a blog with some examples and sample images. In the Developer Portfolio & Blog template, I had to update the Post model's Content field type from Markdown to RichText but that didn't take much time at all. My favorite part? The RichText field includes an option for Tables!

Check out this table with headers!

Feature

GraphCMS

Prismic

Tables

YES

NO

Code Block

YES

NO

Images

YES

YES



⁠Customization

⁠GraphCMS is very customizable in that you can have custom renderers for supported elements. The full list of elements you can customize is located here:
https://github.com/GraphCMS/rich-text/tree/main/packages/react-renderer#custom-elements

As of this point in writing, I'd recommend GraphCMS over Prismic as it seems to be more powerful due to its customizability but for some people simpler is better and that's A-okay too.


More Stories

Andrew Lai
MUI 5 - Styled / SXJun 3, 2022
Cover Image for MUI 5 - Styled / SX

Tips and tricks to using MUI (Material UI) 5's styled / sx


© 2022 nehno.com