Headless CMSs with Next.js

Setup Contentful

Scott Moss

Scott Moss

Superfilter AI
Headless CMSs with Next.js

Check out a free preview of the full Headless CMSs with Next.js course

The "Setup Contentful" Lesson is part of the full, Headless CMSs with Next.js course featured in this preview video. Here's what you'd learn in this lesson:

Scott guides students on how to obtain the necessary .env values from Contentful and provides an example file for reference. The instructor also discusses the challenges of data modeling for a headless CMS and emphasizes the importance of considering the content team's needs when designing the data model.


Transcript from the "Setup Contentful" Lesson

>> Scott Moss: Let's get started then. So a couple things we need to do in the repo. We need to, after you make an account, we gotta add some environment variables to our repo so we can actually make a call to Contentful and do things like that.
>> Scott Moss: If you create a.env on the root, you need to just add these four environment variables here.

>> Scott Moss: So you need Contentful space ID, Contentful Access Token, Contentful Preview Access Token, and Contentful Preview Secret.
>> Scott Moss: These are also in the GitHub repo on the main branch. I think there's an env example file on there if you just want to copy those, that way you don't have to like look and follow along right now.

But yeah, they're on the env example, I guess I just didn't push it up on this step zero branch. And don't be still in my stuff, I'm gonna regenerate these. So how do we get these values? We need to go to Contentful, so if you start writing those just to show you where they are in GitHub, so if you're like, I still need those.

Here, go to step on main branch, there's e in the example file, oops, here we go, come here. There we go, you can just copy that, all right. So, to get these values, it's like really tucked in there on Contentful, like, they really don't want you to have it.

But once you're here on your space, you can click on settings, you can click on API keys and you have to make a new API key, I already have one, I called it headless next. And once you make a new API key, it will give you all the values that you need here.

So your space ID, your access token, and your preview access token are gonna be here. That fourth one, that preview secret, I think that's what it's called, right, preview secret, yeah, the preview secret. That's a value that you can come up with, so you can put whatever you want there.

So the next thing you want to do is just kinda just dive in, and this is something that, it's just like a thought exercise on data modeling. I think data modeling is probably the biggest roadblocker for adopting a Helix CMS. It's just figuring out the shape of your data.

This is why it's almost impossible to do unless you already have a website or a design for a website. Okay, so, imagine having to model a schema for a database for an app that you've never heard of. And you don't know any of the features of the app, it would be really hard to do that.

That's what it's like trying to model content for Helix CMS, when you have no idea what the website is, you're just like, okay, yeah, maybe I know every app has users, so I had a user table. Okay, every website has links, so I add some links, but then you get to a point you're like, I don't really know what supposed to do here until I have a designer a website.

So I really do think that's the biggest blocker because there has to be so much work done before you can make a sophisticated enough content model and then even then even all the work is done. You have a website, you have a design, sitting there and thinking about what that's gonna look like.

There's some repercussions to those decisions that you make because the data model that you decide to create, that's how your content folks are gonna have to edit content. So if it's very abstract and heavily nested and relational, and you're, yeah, I made the best schema in the world.

It's so good your content team is struggling to make a blog post because there's like 30 relations in there. It's like you [LAUGH] so you really have to think about that, and it's gonna be specific to the CMS that you make. So you almost have to be an expert of the CMS that you choose before you can actually learn how to use the tools.

And they all have different things, they all have their own different types of content fields and feature some of them even let you visually edit it gets pretty crazy. So there I think that right there is the biggest blocker I think a lot of real estate investors know that which is why they focus on developer experience, but it's almost impossible To like, get it perfect.

You really just gotta just like motivate the developers to like get through it. But I would imagine something like AI is probably gonna help with that, where you can just use AI to model the data for you. You could just send it a screenshot of your design or here's my Figma design, design a content model for this and ideally, that would be good because it is for sure the biggest roadblock.

I would say that's probably where most of the drop-off is.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now