Content Previews in Contentful

[00:00:00]
>> Scott Moss: We are now gonna move into something a little more advanced, but definitely necessary. And pretty much, every head of CMS has this feature, but how they implement it is always so different. The CMS that we're using, Contenful, has a couple ways to implement what we're gonna work on, which is gonna be previews.

[00:00:17]
And we're gonna choose one of those ways. Other ways is just a lot more complicated, and I don't really have a lot of experience with it. So I'm not even gonna bother touching it, but we'll address it and we'll talk about it. And then I'll kinda walk through how other CMSs handle previous, cuz it's all very quite interesting.

[00:00:35]
It's been a lot of time in this space on this feature when [LAUGH] I was working on the CMS, so it's one of those things that it really does make or break it, I think. In order to do previews, I gotta walk you through what it means to have a preview, and what is it that you're actually previewing, right, and why, more specifically, the workflow.

[00:01:01]
So previews are a concept where, imagine scenario where you have some content. You're working on, let's go to one of our pieces of content here, let's say this post here. Okay, I'm working on this post, I don't know, I'm not really ready to hit Publish yet, right? But I wanna see what it looks like on the website.

[00:01:23]
But so far, we've always had to hit Publish to see what it looks like on a website. If I hit Publish, well, it's gonna show up on the production website because everything that's published shows up on the production website. And I don't want draft content showing up on the production website.

[00:01:40]
Who knows what the engineers have hooked up to webhooks when it comes to that Publish button being pushed? In the case of, if you're building websites with Gatsby, this would trigger a rebuild with Gatsby. This is a very common thing you did with Gatsby, is a trigger rebuilds whenever a CMS changed or something like that, a CMS document changed.

[00:02:00]
In the case of Next.js, triggering this could invalidate a tag that will bring in some more content, right? Or just adding it, if you have a server function, we'll then just show it in that list of all your posts. So you don't want that to show if it's draft.

[00:02:16]
That could be really bad, but how do you see it on the website in the meantime? That's what a preview's for, the preview allows you to see draft content. And when I say you, I mean specifically you, the person who's looking at the preview, and no one else, to see that.

[00:02:31]
How do they do it? It's actually quite simple. So the way it works is you give your CMS a URL in which it can hit. Typically, this URL is gonna be a route handler, it's not gonna be a actual page. It's not gonna be a front-end page, it's not gonna be a route handler.

[00:02:53]
You can put whatever you want on that query string when you give it to your CMS. You can put a secret, and you should put a secret there. That way, you can can confirm that it came from your CMS, and it's not someone else trying to see some of your draft content.

[00:03:04]
And then inside your route handler, what you do is you confirm the secret, you do all that stuff. And then, depending on what the URL is and your strategy for resolving previews, it could be like, I have a preview link for every single type of entity that can be previewed.

[00:03:20]
Or I have one preview link for everything, it really just depends on what your strategy is. You're going to redirect that request to your website, or whatever the content that the person is trying to preview is gonna be rendered on your website. You're gonna redirect to that.
>> Scott Moss: And there's a couple of things you do before that.

[00:03:43]
In Next.js, you have to enable something called draft mode, which basically, it just makes sure that the caching isn't strong. It just makes sure that when you enable that, you're not gonna be opted into the caching that would have prevented some change being seen. That's basically what draft mode does, it just sets a cookie.

[00:04:06]
And then also, once that cookie is set on the server components, you can check to see if that cookie is set. If you're in draft mode, we can pass that to our query like, hey, we're in draft mode, so pass the preview argument to all of our queries.

[00:04:22]
So when Contentful returns, when we do a query to Contentful, we're passing a preview true, so it knows to get preview content, and that's how it flows. And then you can clear that cookie whenever you're done. A lot of people put a button on the page that'll show cool, exit preview, and all that does, it just clears the cookie and then redirects you to the other thing.

[00:04:42]
So that was a lot, we're gonna do everything I just said, but I wanted to walk you through that because it sounds more complicated than it actually is. And they even have a guide here that walks you through it. So what we're gonna do is we're gonna set up a preview for our hero.

[00:05:00]
So our hero is gonna be, just click on hero, this one.
>> Scott Moss: So to do that, we're going to Set up a custom preview. So if you click Set up a custom preview here on the hero side, you could do that. You could also click on settings and go to Content preview, same thing, it's the same page.

[00:05:21]
Click that, and then for the name, typically the name you put here is the thing that you are previewing. So in this case, I'll put Hero Preview. You can put a description if you want.
>> Scott Moss: And then for the preview URL, so activate the content preview and specify a custom URL for every content type that should display.

[00:05:51]
So you can pick one of these content types, we're gonna say Hero, and then we can put the preview URL for that. So in this case, it's not a webhook, right? What it's gonna do, it's really just gonna redirect your browser to that. So it can be localhost, it doesn't have to be something on a tunnel, like in Grok or something like that, cuz it's not making a call.

[00:06:17]
It's just gonna open up a tab and go here. So it can be localhost, so we're gonna put localhost. In my case, I'm on 3,000. We're gonna make a route, so API route, so it'll be /api, and then I'll just say draft. You can call it whatever you want, I'm calling it draft.

[00:06:37]
>> Scott Moss: All right, and then you can also use these interpolated values in your URL. So if it has a slug or any field, you can get the field and put it in here. So if I wanted to do something like, I think heroes have titles, right? So I could do something like title and then I could do entry.fields.title, something like that.

[00:07:05]
And I'll put the title there, so I can do things like that. If you want to get crazy, there's a lot of stuff you can do, but I'm not gonna worry about that. Okay, so we got that, I'm gonna hit Save. Now we got a Hero Preview.
>> Scott Moss: This part's important actually, so preview mode.

[00:07:29]
They have something called Live preview, which they recommend, we won't be doing this one. [LAUGH] And they have this other one called Preview in new tab, we'll be doing this one. Live preview is cool, we can check it out. You can kinda see what it attempts to do.

[00:07:44]
The preview won't work. There's just some code we have to do on our side inside the app to enable this, and getting that to work right now with Next.js app directory, it's not hard. You need to know a little more about Next.js app. I feel like it's too specific to that, so I didn't wanna cover it.

[00:08:02]
It's way too specific to Next.js as an app directory just to get around it. But there's some things you have to install, because basically what this is gonna do, it's going to pull your site up in a iframe. When your site loads up in an iframe, there's a bunch of security issues around there.

[00:08:17]
So you gotta do some stuff with the headers, you gotta enable some things. You gotta install something else on your side, because the way iframe communication works with its parent window is using, there's a messaging API which they can communicate back and forth if you enable that. By default, you get that on the same domain, but when you're not on the same domain, you have to enable that experience.

[00:08:37]
But if you do have that, it lets you do this type of visual live editing. So you can't actually edit on the website, but you'll have a form next to you that when you fill it out, you'll see it change directly on the website immediately. So you'll see things like that that are really cool.

[00:08:52]
To be honest, it's cool, but CMS has been doing that for a long time, the newer CMS's are just way past that. So it's great, but it's like, yeah, whatever. We're gonna do this one. It just opens up a new tab which we don't have to do anything on our side other than make the route, so we'll do that one.

[00:09:09]
And it'll still be pretty valuable, so make sure you click that Preview new tab. And actually, no, let's click this. I want you to see what it looks like, so we'll do that. I don't know who designed this UX, but once you get here, you're in a dead end.

[00:09:23]
You can't go anywhere until you click somewhere else. There's not a back button or anything, you're just dead. I can't stand dead ends on apps, but anyway, let's go back to Content, go right here. And now you should see Open Live Preview, this should be enabled now. So when I click it, it's going to attempt to, well, it should load up the website at least, let's see.

[00:09:49]
Well, yeah, we don't have that route, it doesn't have the /api/draft route, so it's just 404, but this is what it does. It'll attempt to load it up, and then you can edit some stuff on the left and you'll see it change on the right, which is great, that's what you want.

[00:10:03]
But again, iframes, things like that. We're just gonna do old school, so I'm gonna go back and I'm gonna change this. Click on my Content preview, change this back to Preview in a tab, hit Save. And then now when I go back here,
>> Scott Moss: It'll say Open Preview and it'll just open a preview tab.

[00:10:23]
Still 404 because we don't have that URL, but you get the point.