Preview Content Feature

[00:00:00]
>> All right, so now, we're gonna go to one of my favorite things about next. Yes, I love this one. This is such an amazing feature that's going to be previewing your content or what I would like to say, try before you buy. So. If this has happened to you then you can definitely relate.

[00:00:21]
Have you ever published or when I say published, like you pushed something to master, you merged something in with some content, maybe in the landing page that maybe shouldn't been there. Maybe as a blog post was too early, some content that wasn't approved yet. Or maybe you really just, you're not good at spelling like me when it comes to spelling and typing and it was just really ugly, but whatever it was Friday afternoon, so you didn't care.

[00:00:44]
Yeah, that kind of sucks. So, being able to preview content on your site before that content goes live is a beautiful thing. And this is again, this is why I was trying to warm you all up to the concept of using a CMS and something like Next.js. Because if you look at all their features, they're all built around using a CMS.

[00:01:05]
They're really encouraging you to use some type of way to manage your content, because of all the benefits you get from that and this preview feature is no different. In fact, it's literally built for a CMS. It's what I would call, I had a name for it here, I made it up when I was writing it, so it's not coined yet.

[00:01:23]
But it's basically like a feature that it's not meant for you as a developer. It's meant for like a CMS to implement it so you can use it. That's what this feature is meant for, but we're going to use it anyway. It's just going to be very raw, we're still going to use it so you understand how it works.

[00:01:39]
But the preview feature by design is meant for a CMS to implement. So, you can use it through the CMS because without a GUI, that preview feature kind of just falls apart. But you can build your own GUI. But if you had a CMS, the CMS would be your GUI.

[00:01:52]
Okay, so basically Next.js allows us to preview content, so you might be asked, so what does that even mean? We need preview content on my contents hard coded. Well, yeah, if your content was hard coded, then this doesn't really help you, I guess. [LAUGH] I mean, you could still get away with it.

[00:02:07]
I guess you could, if I'm in preview show this JSX versus this JSX but that's kind of gross. This is specifically for previewing content. And it kind of does this very cleverly, what it does is you can create an API route in Next.js. And all you have to do is just use this little helper function they give you which basically sets a cookie in your browser that says, hey, I'm in preview mode.

[00:02:29]
And that's it, that's really it. And with that cookie, we can access that cookie inside of our server-side functions and we can do different things. Like, wow, this cookie is set to true. Maybe now I'll make a request to my CMS to get draft content and not publish content, right?

[00:02:49]
So, just that little Boolean there allows us to be a little more smart about how we fetch content from our sources. So, now I can look for that draft. So, what we're going to do is we're going to go back to all the pages. So, the home index page, the blog index page, and the slug index page.

[00:03:05]
And we're going to refactor them to be aware of previews. And then, we're also going to actually create previews in here. And then, we're going to try them out. And you're going to see what I'm saying why you kind of need a CMS or even your own GUI to actually really get the benefit of it.

[00:03:20]
Because otherwise you have to do this stuff very manually, and it's really not gonna help anybody. So, let's do that. Any questions before I start?
>> By the way, you talked about the preview feature. Is it possible for anyone to tailor that feature to use it like in a QA environment or something like that?

[00:03:39]
>> Absolutely, yeah, like I said, the missing part is the GUI. So, if you wanna build your own GUI for that allows someone in your organization. Let's say once you get the authentication, this will make more sense. But let's say hey, if someone, if I detect that someone from our organization is logged into this app, show them this button right here that says, QA or preview.

[00:04:01]
And then, that shows the same page but with different data that's not public yet. Yeah, you could totally do that.