Contentful API Setup

[00:00:00]
>> Scott Moss: Okay, so thought exercise, let's go through and figure out the shape and the things that we wanna change and stuff like that. And that way we're gonna come back here, create our first content model, add some content, pull it down and see what happens. So I'm gonna go to the website.

[00:00:20]
>> Scott Moss: Wanna go to the homepage. And we'll start with the hero. So if we start with the hero, what are some things here on the hero that we need to make dynamic?
>> Speaker 2: Title description links.
>> Scott Moss: Title description. You say links, do you mean like these links or do you mean these links?

[00:00:42]
>> Speaker 2: They like to call the action-
>> Scott Moss: The CTAs, okay?
>> Speaker 2: Those two and the one above.
>> Scott Moss: This one too?
>> Speaker 2: Assuming you consider that part of the hero I guess.
>> Scott Moss: Yeah, everything from here to here does that move, yeah, that's not fixed so, yeah, even the logo and even the sign in and sign up buttons.

[00:01:03]
This is where you have to decide, should they, when I say they, should be technical, the non technical folks on your team have the ability to change what this button says, or this button says? Or what order they're in, or what color they are, or what icon they have, or whether or not this one has a border, or whether or not it's here or not here?

[00:01:23]
And what logo it is. So you have to think about that, right? And that's where it does get complicated cuz you might even have to sit down with your content team like, all right, what do y'all wanna be able to do? And you might give them all this power, which is like giving someone like a magic wand, but like they don't know any of the spells.

[00:01:39]
So it's kind of useless. It's like giving a mogul a wand, they're like, I don't know what to do with this.
>> Speaker 2: CMS have roles.
>> Scott Moss: Yeah. [LAUGH] Exactly. So we're gonna start here. So I would say for us, we probably want to be able to dynamically change these links for sure.

[00:02:04]
We want to be able to change the order of these links, the labels, and the routes that they go to. We wanna be able to change this, I guess you could call this a pre-title. I don't know what the name of this is. We definitely wanna change the title here, the description or the subtitle, and then definitely the call to actions.

[00:02:23]
Maybe we'll order their in and then the labels as well. So I would say at minimum, we wanna do that. I probably wouldn't let folks change the logo out. I would just put that logo in myself. And I probably wouldn't let them change this since this is more like app related and less about SEO related.

[00:02:39]
It's like, can you go here and sign up and sign in. But these things here that I just talked about are more content related, more focused on the website itself. So those are the things that I would probably do. So what we can do if we go to our website, we go into the code, there's a component called hero inside of there.

[00:03:02]
>> Scott Moss: You're gonna see all that hard-coded content. So at one point when I was working on my CMS, we wanted to create like a VS Code plugin that would, or was it ES Lint plugin? I think it was ES Lint plugin that will basically throw a Lint error if it detected hard-coded content because I was like, you should never have hard-coded content anywhere in a React and a static website.

[00:03:23]
And I still believe that. Even if you're not using a headless CMS, there's just no good reason to do this, you should abstract all of this away, even if it's just like a static object somewhere that you pull in. And that way, you can just change all your strings in one place without having to go into all these individual files, right?

[00:03:39]
So let's take note of where all these things are. So that's the pretitle, we have title here, we have our subtitle here and we have our CTA. So pretty simple, they're all just text, they're not like some crazy format. But if we look at the call to actions, we need a title.

[00:04:03]
We also need a, where's the href? We need an href. So where does it go? So that one's probably more a little bit more structured. And for the links, which are probably gonna be, somewhere else in the layout, I'm guessing. We also want to have some structure there because they have a name, a route that they go to, and then we also need to like keep track of order, what order they're in so we can change the links around.

[00:04:30]
So there's a lot that's going on. So let's get started with that. First thing I'm gonna do is this website, it's using something called content layer. I think content layer is dead, but basically what it is, it's like a tool that integrates what CMS is to give you type safe content, which is a dream.

[00:04:50]
But I think the project died. I went to go look them up cuz I haven't seen them in a while and they haven't even made an integration for contempo yet and contempo is like the OG. So I think it's kind of dead. We're not going to use it.

[00:05:01]
We're also not gonna use markdown obviously. We're gonna put stuff in the CMS, so I'm just going to take out this, delete this folder in here called update inside the content folder.
>> Scott Moss: If it lets me, delete that. There we go. So I'm gonna delete that, is it gonna delete?

[00:05:25]
[LAUGH] I'm just gonna delete the whole content folder how about that? There we go. And then we're just gonna make another content folder cuz I wanna use that folder.
>> Scott Moss: Cool, so this is where we are gonna put all of our content related things, so first thing we're gonna do is we're gonna create a file called fetch.

[00:05:47]
And we're using typescript. If you don't know Typescript, that's fine, it's optional. But the reason I chose Typescript, cuz one of the biggest issues you're gonna have is basically what I just talked about is how do you get type safe content? I think that's what content layer was trying to solve.

[00:06:04]
We're just gonna have to manually type it ourself. But because we're gonna be using GraphQL, it's gonna be super easy, it's gonna be like a copy and paste. I mean, technically you could do cogen too if you want it, but we're not gonna do that. To fully rid ourselves of this content layer integration, we need to go into the nextConfig, it's using this content layer middleware or higher order function just get rid of that, we don't want to use this with content layer thing.

[00:06:31]
So you can just tell that thing to go and just return the nextConfig, what we wannna do is we, because graphql doesn't support, i'm sorry, because contentful doesn't support Next.js app directory on the server side. It supports it on the client side, but that kind of defeats the purpose of using Next.js.

[00:06:50]
I wanna get my content on the server side and statically render it, I don't wanna have like a client side app that's like loading for a blog post. That's gross. So we're just gonna do it ourselves. So what we wanna do is I have the URL for it in my notes.

[00:07:07]
It's this URL right here. We're gonna create a GraphQL content feature, or I'll just say graph, or I'm so bad with names, contentGraphqlFetcher, something like that, cool. Okay, we'll do that. And what this is gonna do is it's just going to make a fetch call. So I'm gonna say async.

[00:07:37]
It's going to make a fetch call, get a response. So it'll be fetch, which is built into Next.js, we don't have to import it. It's going to fetch this URL. It's in the notes txt if you wanna get it. It's going to take a spaceId or actually, no, that's gonna be an environment variable.

[00:08:01]
So we don't need to do that, let's just use the environment variable here. This will be process.env., let me go to my env. This will be the space, the CONTENTIFUL_SPACE_ ID. So we'll just do that.
>> Scott Moss: There we go. Got our spaceId. And we need our config object here, we're gonna say method is POST, headers.

[00:08:34]
We will say,
>> Scott Moss: What is the one I'm looking for? It's like- Content type. There it's, I'm like, yeah, so content/type.
>> Scott Moss: Application/json.
>> Scott Moss: So we got that.
>> Scott Moss: And then for the body,
>> Scott Moss: We need to do json.stringify. And here, we're gonna take in a query. So our GraphQL query, which is gonna be a type of string, and then possible variables.

[00:09:23]
>> Scott Moss: If you have any, which I'll just make it an object.
>> Scott Moss: So query for query, variables for variables.
>> Scott Moss: We got that. We also need to pass in the headers. There's authentication headers that need to be passed here for conceptual to work. And depending on if you're in preview mode or not, you have to pass a different header, which makes sense because you don't wanna accidentally show preview content on production.

[00:09:59]
So you have to use a different authorization secret to switch between the two. So let's get that. Let me see what the name of that header was. I forgot the name of it. It's literally just an authorization word, okay. So we're just gonna say authorization.
>> Scott Moss: And then what we're gonna do is we're gonna take in an argument here that says preview and that's gonna be optional it's gonna default to false.

[00:10:36]
>> Scott Moss: And you say if there is a preview then the authorization is gonna be Bearer the environment variable from the CONTENTIFUL_PREVIEW_ACCESS_TOKEN. So we'll say that if it's not preview, then it'll be Bearer the CONTENTIFUL_ACCESS_TOKEN.
>> Scott Moss: There we go, and I guess I need to do this before I forget.

[00:11:23]
There you go. So we have the authorization, we got our body, we got a query, we got our potential variables. So this is something that we're gonna use just to be able to fetch. This is literally the only integration that we're gonna have with Contentful. So it really is, as far as the developer integration, completely agnostic on the CMS.

[00:11:41]
You're just hitting a URL, so this could be any other CMS and it's most likely the same.