#18 - Build Time - Next.js App Router and Draft Mode

all right one two three four [Music] hello everybody my name is Stefan education lead here at Cosmic uh welcome to build Time episode 18. uh today's episode's a little bit differently it's just me doing a solo episode here normally we do a collaborative process with a few members of the team or a couple of us and today we're doing something a little bit more focused uh we're talking about nextges 13 the app router and uh draft mode and so we actually did an episode of build time in the past where we have uh stumbled through this process a very impromptu episode uh so I was thinking that today we could talk a little bit about uh Nexus 13 just some of the Core Concepts now originally I was going to go through and do the whole thing but you know we already did that so let's just focus on the app router and uh how you can integrate Cosmic with our SDK in the Nexus 13 as well as draft mode so you can do really cool things like preview um unpublished blog posts so if we go here this is kind of our demo today this is our developer portfolio which you can actually find on the cosmic Marketplace if you just go to Cosmic www.cosmicjs.com Marketplace you'll see some of our newest latest and greatest templates and some extensions this is the developer portfolio we built this with next js13 this has the app router so you can actually explore the code here Tailwind CSS got dark mode here it is um great tool if you are a developer and you you need to Showcase some of your work and write some blog posts get your name out there so you know what we're going to be doing today is just exploring the code in this in this template as well as also exploring a nice capability that you can leverage using Cosmic to um preview your draft blog posts so let's get into it um next just 13 the biggest difference differences from next year's 12 of me it was a big release and just a a high level overview you got things like next font uh next metadata next image has been improved a bit uh if you were ever annoyed at the amount of rappers around the image they've taken some of those away they've simplified The Styling given you a little bit more freedom over the components the anchor tag is no longer inside of the link tag um server side rendering happens by default now less JavaScript is shipped typically so now essentially if you use anything like use state or use effect and any of your components or Pages you will basically just go through and you might mark them with something like this use clients if they involve any kind of client interactivity um yeah so of course like this is great because it increases performance and SEO um we're not really covering any turbo pack next font metadata we've already built some custom solutions for the for those in um in this template now um we're just going to go straight into kind of the differences between the app router and the Pages directory so if you're used to building in Nexus 12 this is a um it's a Nexus 13 project but there's no upgrades uh the cool thing about Nexus 13 is you can upgrade it incrementalties incrementally it's very important you can do some of the upgrades like the new image component font optimization with their API metadata API and you actually don't have to convert anything so you'll see actually do have this there still but we're still using Pages here um and you know let's get into like some of the the common things some of the big things that you might notice is that in nexjs13 app router you don't have the underscore app or documents custom documents uh components here so foreign you can you have some Freedom with what to do with them but you can put the head I have the head done in the layout here you actually make a root layout in an xjs 13 now instead of having it as a component and then if you do need custom layouts you can include those inside of your uh inside of your app pages um and so that's one of the big differences we've also got a large difference with um the way we fetch data index.s 13. so before if you see um we've got our home page here and I'm just going to exit exit this for now and pop us back home we've got some of this content is uh actually most of this content is being fetched from uh from cosmic so we've got like the the tagline and then the sub tagline we've got actually this file being hosted in the CMS of a demo resume so uh these Social Links are as well these blog posts are being fetched from the CMS and uh yeah it's makes it really easy to just kind of switch things out you don't have to go into your code of course um so let's talk about the data fetching before we would call get static props right and we would return these props into the actual um into the actual function here the actual page and then we would access those from the page and now the difference being if we go to the app router and oh yeah keep in mind no longer you use index.jsx TSX whatever you're using you actually use page now so all of these you'll see are page slug page this is the standard now it's the the namespace there so keep in mind that but now you've got something different you got top level async function getting the data so now we can go in and we're doing um the cosmic SDK here and so we've created these functions to get specific things from our CMS of course we've hooked it up with API keys and environment variables and we've got access to these nice um natural like language functions that we have in our Cosmic SDK so for example you want to find one object type in um in ucms you would just use the find one method and actually this is just for a single object you would just pass the slug and it would return you what you pass the props and so we would get the title to select the metadata and in this case if we go and check it out you know we've got the title the slug and the metadata would be all these meta Fields the cover image which is a URL this is markdown content and uh a category and a little um a teaser here so now with the uh with the app router we can really simply just create this function to get the data at the top of our component we can call all of these to get our blog posts our variation of blog posts which is like our portfolio projects and the actual page data which is some of the copy the tagline you saw the um the URL to the resume on there what we can do is use the home page now as an asynchronous function we call that get data function in here and we just have access to it in the actual page component now it's a bit cleaner it's a bit cleaner that we don't have to you know call it get static props and then return it back into the component you kind of flow as you go to the top of this component you do your data fetching and you call that function and then you grab your data and it's very simple revalidation happens outside I believe you can put this anywhere I put it at the bottom this will just revalidate uh or rather invalidated stale cash just in case any of this data changes the user will hit this a maximum of once every 60 seconds it'll change so if I change some content in CMS it will just automatically change I won't have to rebuild any of this so that's a large part of the app router is the data fetching happens a bit differently and um now now that we have a of a solid understanding of these differences I will go into the other part of this video which is going to be um setting up draft mode which is really nice and of course if you've ever used preview mode in xjs12 it's it's very it's it's it's it's basically the same thing it's similar but um with Cosmic it's very convenient now this content for example even on Even in our actual cosmicjs.com we have draft mode or we have preview mode set up at the moment and so this allows us within our team to go into a blog post and let's say we've got this blog post all you know set out and drafted well we want to be able to share it with each other and share with other members of our team so we can preview it make any changes we need to we can see what it looks like on the page in the layout and uh is a very powerful capability especially with content driven websites blogs you can actually do this with um any draft content and essentially we'll check it out here so we're going to hit an API route in xjs and it's going to enable a cookie and in here we can now conditionally display a ton of things so for example we can tell um we can tell our application to now fetch all of these blog posts the unpublished ones as well now you can see this is on our live site as well so the power is it's it's great you don't have to have a different site a subdomain you can just share this on your live site so you're going to be seeing exactly what it looks like we're telling our application hey we're enabling this cookie um and now that we've done that get all of the posts not just these posts that are um published also the ones that are not published and so it's great you can you know you can conditionally add tags you can click on them and like I said you can do this for anything on your on your site so a common thing we've done is that we've added this banner and you treat it as preview mode so now you're in preview mode you can persist this banner across the site and when you're ready you can clear the Cookie by clicking here and it'll exit and just return you to the home page if we go back to our blog it's just like our live site it is still our live site and you can see you don't see any of those anymore so what's really going on here well let's take a look at the latest um which is draft mode and you see I've got the same kind of thing going on here where you're in draft mode you can persist it right the whole thing so if I wanted to actually go in um and update any of this content I could create a draft post for this content and um preview an entire uh new new copy on a site or new content on a site that way so here's what's going on we create a um a folder inside of the app router called API within API we can do and we can do the magic here we can create our functionality so we create a folder called draft and then we create a route so we're creating an API route um essentially what we're doing is we're importing draft mode from next headers redirect so we can redirect that's when um we can tell it when it hits that route we're going to pass a parameter from the URL params and uh fetch that specific blog post with the slug that we're getting from cosmic and what we're doing here is we're calling in this function from our SDK get preview post we're finding one object and the biggest thing here is when we have published posts we would use published but in this case the special function is going to allow anything so it's going to allow us to fetch from using the cosmic SDK any posts um unpublished posts as well and so we are grabbing this URL from cosmic which you can set up in here and for testing purposes we're using localhost you can see we've got that API route we've got draft and then what we've done what you what you want to do so your application's not vulnerable is you want to set a random secret code so that you're protected it's good to do like a base64 key of sorts something strong and then the next thing here is we're actually specifying a path because we're using both we're using this functionality for both the post and the works so we're specifying a path if we go to works here we'll see actually that it works so we can tell it to hit different different parts of our application based on the URL and then the slug ties into in the cosmic with some short code of Just object slug so this link will be accessible to all these posts and once we go in here we have this handy little button that will have that link but if you can see in the bottom corner there if we can just copy this link we can see that it populates that slug with the actual object slug so it knows where to look so we're grabbing that secret and we're saying if that secret isn't the same as what we've set up in our environment variable don't allow for it it's an invalid token we're grabbing the slug and we're using that to get the preview post with the cosmic SDK if there is no post so if that slug is invalid then we are also not return anything and we'll just hit we can see what that looks like if we this doesn't exist and I suppose maybe there's some further error handling we can do there but you see it it will give us a status 401. um once all those uh all that logic once we get through all that logic and everything's good we have a post we select draft mode dot enable and this will set the cookie actually um and then essentially when we set the path uh poster works we redirect the user to that path and then that actual blog post now what you're seeing there when I click that exit button there's very simple we're just simply disabling the draft mode and then you can redirect to wherever you'd like you can get pretty crafty with this um redirect to certain spots maybe just the blog page but right now we're just doing the home page and um yeah this is a very powerful capability that you can really leverage Cosmic and of course we just released um officially Cosmic 2.0 about a little over a month ago we're super proud um this is our entirely uh redesigned rebuilt dashboard and we're just super proud and uh it's really been a pleasure to be able to share just one of these features that um I personally use on my actual websites and actual applications that I build with Cosmic so it's uh it's always nice to to share like that the functionality is really real world it's really nice to use but I would highly suggest to go and check out our developer portfolio template alongside you know we have other templates as well but uh yeah guys that's that's it for today glad they've been able to share um a little bit about the app router and draft mode with you guys uh any questions for us we'll have links in the description some show notes some Social Links uh you can always reach out to us Twitter here on YouTube as well and of course you can contact us via our websites get in touch um check out Cosmic it's free to get going you can start and just play around with it and actually build some pretty pretty big applications with the free version so we encourage you to go check it out and just see what you think of it so yeah guys thanks a lot and uh see on the next build time [Music]

Channel: Cosmic

Views: 17

Keywords:

Id: FjpP7RXklH8

Length: 20min 31sec (1231 seconds)

Published: Wed Jun 28 2023