NextJS in Production - Scott Moss | GURU TALKS

yeah thanks for having me team um i really wish circumstances were different and i could be in the netherlands right now i really missed that place last time i was there it was so amazing the team was amazing uh the atmosphere everything was was great so i really wish i could have been there but you know this is the best we could do in today's world so uh here i am i just want to thank randy for reaching out and giving me this opportunity i appreciate you randy hope to see you soon um and yeah so a little bit more about me uh yeah i am the ceo and co-founder of a company called type where we're basically a headless cms if you want to learn more you just go check out our website type.io we're in private uh like private release right now but we're actually doing a public release at the beginning of next year so uh you can check it out uh it actually works very well with nexjs we work very closely with the nextjs team in versailles to get this thing going so uh yeah it should be pretty cool um other than that before that i was basically i've been an engineer here in silicon valley for quite some time now worked out a lot of companies like google udacity consulted with companies like visa american airlines facebook twitter apple you name it i tried to do work with them at some point and here i am now so what i want to talk about today is actually going to be one of my favorite technologies and that's going to be um next js uh so i think nexjs is one of those technologies that like you when you hear about it you're just like well you know why do i need it i already use reacts you know there's already create react app what is next js going to give me that i don't already have and you know there's also this thing called guidespeed that i heard people use so it's like why would i use this but then after you use it you start to realize you can't go back and you know i don't know if anyone here has used xjs but uh this talk that i'm going to give today is going to be on how to get the best from nextjs in a production environment so i won't be going over the intros and the basics you know i might do a little quick refresher but if you want to learn next year's from the ground up there's many resources out there the docs are really good i actually taught a course on front-end masters for intro to nxjs that you can follow along if you like video courses instead but yeah this course is just going to follow you already got to sign up how do you deal with production you know issues uh with something like next year yes so that's what i'm going to do so i'm going to share my screen here and i don't have any fancy slides or anything like that because i'm not a person that likes to write slides and also i think i have i think i have an hour for this one so i feel like i had a little longer so i felt like just doing live code probably make more sense to really just be able to describe the issues that you're going to encounter uh when in production with nexus because i think they are pretty unique but i also think nexjs and the team there did a really good job of coming up with some really good solutions out of the box for you to solve them you almost don't have to do anything custom to solve some of these issues so to get started let's just go ahead and bootstrap a hello world uh next js app so i'll just say npx create next app like that and i'll call it a demo app so we'll just do that um and just let this thing build out um i've been using xjs for you know not even just with type and doing the integration and stuff there but we actually use nexjs for a lot of our you know websites and apps and stuff like that and so far i just haven't been able to find a good reason to not use it when using react there's like some small reasons why i wouldn't use nexjs i feel like it might be a kitchen sink but if i would say for 90 percent of the reasons i pretty much go with an xjs okay so we'll go into this thing we'll check it out let me know if my font size is too small i can try to increase it here but i think it should be good i think i set it up recently for a talk i gave okay so just to do a quick refresher on xgs or for people who haven't used nextjs before what is nexjs um it's basically a what i would call like a a complete framework right if you think of react as a uh ui library in fact because react doesn't really do anything but allow you to render elements on the page and manage the state for those elements you still got to bring your own router and your own whatever um next as kind of takes that and goes forward with it with tons of opinions that they bake in so some of these opinions are basically for instance they have these file system based opinions like this pages folder here so whenever i add a react component to this pages folder like for instance this index one what nextjs is going to do is it's going to create a route for me on that right so if i go and i start this up with yard dev or npm run dev if you're choosing npm here and i'm gonna open this up we're gonna go here you're gonna see that the index page that the hello world app shipped with is gonna be right here located at the route of index and that's because of these opinions here we have an index.js which is in the pages so therefore when i go to the index page of my app this component is going to be loaded so we can take a look at it here and you can see it's pretty much oh let me click on that it's pretty much the same you know it's the same page here right so that's how these conventions work they also have other conventions uh for like apis so next js is also what i would call a full stack framework so it's not just about rendering react components in a single page app or statically it's also meant for server-side rendering and to be able to handle things like api routes and things like that using serverless functions and you can create functions pretty easily you have an api folder inside your pages directory and then you just make a file in this case there's a hello js and i'm just exporting a function here that has a request and response very similar to like a connect based express based uh node server there and you can see it's just responding right here right so if i were to go to slash api hello and do a request there we can see what would happen so if i say slash api slash hello you can see i get back john doe because that's what this is uh responding with right so very simple very easy to get started um that's basically next js i mean it does a lot of other things but again we're not going to go into too much detail about that stuff so if you really want to know the nuts and bolts of getting started with nexus highly recommend checking out another resource so what we're going to do here is i kind of just want to talk about some of the problems you're probably going to run into when using nexus production or really honestly any you know full stack server-side rendering static page creating framework out there uh and then you know how you might deal with it if you didn't have internal tools with nexjs and then how you can deal with it using nexus so let's just do that so what are the first problems that you're going to run into when you're developing something and i see this a lot especially with you know if you're converting over a site that already has a lot of content and you know for instance let's say you have a website that has i don't know well over a thousand blog posts and those blog posts are you know in a remote cms somewhere hopefully you're using a headless cms highly recommend using this cms for every project you have going forward but let's just say you know for whatever reasons it's taking forever to build right so like if we think about you know the build time complexity of building something statically ahead of time uh that is going to be determined on how long it takes for you to fetch your data right uh so if you're fetching thousands of documents from some remote source then now you're at the whim of how long it's going to take that source to you know give you your stuff you know what what's the speed of the network well how's their server is it cash i mean can you even hit it that many times without being you know uh blocked who knows right so you kind of have to win there and you know i've definitely worked with companies where they'll build a static site and they'll just walk away they'll go to lunch for the day you know they'll pretty much take the rest of the day off because it's going to take a long time to build this thing out um so next year's has some stuff that we can use that basically makes that move like it just goes away you don't have to worry about that so we're going to talk about some of that so to set up a really good example let's just do that so i'll i'll make a blog basically so i'm gonna make a blog folder here and then what i'm gonna do is i'm gonna add a route here for a blog with like a slug like that so this is basically saying i'm making a new route here and it's going to have a parameter in it called slug right so that's what that is doing you want to import some reacts here which i don't think you have to do with next i guess because it handles it but i don't want my editor yeah freaking out so we'll just call this a post like that's not really going to do anything and then we'll just export default that post okay so the first thing you have to do when setting up a dynamic page like this is that nextjs requires us to create something called uh get static paths like this so get static pass is a server side function that we get to use in next.js and this is where it kind of gets crazy if you've never seen xjs you can use these server-side functions here inside of a component file um and when i say server-side functions i mean literally server-side functions you could run database queries in here you can do whatever you want to do that's applicable in node you can read the file system if you want to uh so you might be asking yourself if you've never used nexus well how does that work you can't use the file system in the browser you can't use i don't know or you know postgres in the browser how does that work well next yes eliminates this code before it bundles it for the browser this code only gets executed at build time or you know if it's a server side rendering function they get executed at runtime on the server so but it all lives in this file so that's why it's pretty magical so get static pass is one function we're gonna have to create uh another one we're going to create is get uh static uh props uh they change it so much i can't remember so get static props so basically uh again if we talk about that scenario where we have thousands of blog posts just off the top of your head what's one way we could speed up bundling or building our website so we can take it from going you know a couple hours to i don't know a couple minutes well you know i mentioned that your site is taking forever to build because of how many you know posts you have so the obvious answer is limit the amount of posts that we're building ahead of time and then therefore the speed of which we build will be faster yeah obviously that makes sense but um hello we need those posts to be there they need to be rendered they need to be there so our users can see them well what if i told you we can do both we can eliminate how many posts we build at build time but we can still have the posts be there even though we didn't build them and they would still be static we wouldn't get any performance hits uh we they wouldn't be single page absolutely static as if they were built already right so that sounds kind of crazy right well that's what we're going to get with next year guys so in order to do that the first thing we have to do is return some pass so i'm pretty sure the way that it works see if i can remember this pass like this um and it's going to take um an array of objects like that and i want to say it takes a param params maybe we'll figure it out and in the name of the params is going to be whatever you called in here so in this case slug so it'll be like slug and then you put a slug so let's say we have a slug of a blog post called learn to code like that and then um we'll add another one like this and we'll say uh i don't know top 10 libs something like that so we'll return that and then basically down here what we'll do is we'll get this context object and this context object is going to have for whatever route that the user is on right we're going to have it's going to pass in the parameter for that route so if i navigate to slash blog slash learn to code that's what the parameter is going to be passed in here and then using that parameter i'm able to go fetch from wherever you know in this case a headless cms or some data source you know the actual document the actual content for you know the thing that matches this slug so that's basically what would happen here so if i were to say give me the params um or actually we could just do this let's just we can just fake a cms right quick uh that might be the best thing so we'll just make a new file here and we'll call it cms js and we'll export some default content here like this or yeah so we'll say post and i'm going to say uh grass we'll get to why i'm doing this in a minute drafts and then publish so we got some draft posts here and then i'll have something called like slug and then basically what do i have here learn to code and top 10 lists let's do that so that one one and then you know you might have some some some body in here so content probably use markdown or something like that but you know we'll do that that that's our blog post okay so now we have our cms so what we're gonna do is we can import that cms uh obviously i hope you're not doing this in production please use a real cms um we got that and then now what we can do is we can say you know i want to find the post that is um you know cms.pose.drafts.find uh post and then context dot params dot slug equals uh postdoc slug all right so we'll get that post there and then we'll return some props with the post right so some of this might be wrong we'll see in a minute but that's basically how you would set up a dynamic page uh next year so if you if you're using xjs none of this is probably new to you you've probably done this before so now we'll just actually return something here [Music] yeah and then what we'll do is i'll just put the um the content in here or actually you know what to make it even better i'll give it a title let's do that there we go so then now i'll come out here and i'll just put uh the title so basically when we return props here whatever this is we get access to it in our props that's what props is for so oops a post and then what i can do is i can just say post that title like that and you know that should be good for now so we'll do that and now what we'll do is we'll never navigate to our blog post and you know kind of see what we broke here so uh what did i say blog and then i have one that was like learn to code we'll check that out so uh unexpected friend oh forgot a comma there there you go cool okay so this is exactly what i want to see so um so you can see we have this error here so now we're getting to the production stuff so this error basically says the fallback key must be returned from git static paths this is the magic that i wanted to talk about okay so right now uh what i'm trying to do i basically am saying so typically what you were doing to get static paths is you would this is where you would go fetch again from a cms or wherever your data is and you would say i need to go get all the slugs for all the thousands of blog posts that i need so you would make an api call here right you would make an api call hit all the slugs for all the posts right so this this is going to be a big hit so this will slow your build down uh but what i want to do instead of making a call to get all the posts i'm just going to make a call to get i don't know two posts even though i have 20 000 blog posts i'm only going to get two and that's the only ones i'm going to return so then what i can do is i can tell next js by saying something like fallback and i could put true here right so by telling next as hey fall back true if we go back and say this one is to get rid of the error um this thing's freaking out because this probably didn't yeah i don't think that's let's look at this right quick obviously my find is messed up let's see context object okay well let's just not do you right quick until i see what that is there we go oh params dot slug what did i put ctx.com equals post downslope oh i know why i know all right okay so we'll do that we'll just keep this real quick okay so anyway the fallback true basically what this is going to do is it's going to uh let me go back here for a minute the fallback true what it's going to do is basically going to say hey if someone tries to make a get request to blog slash some slug that i didn't generate a path for so let's say they try to go to slash hello world blog slash hello world i don't want this to 404 instead what i want to happen is i want to add runtime run get static props with that parameter that i didn't generate a path for and then generate it right here at runtime and then when it is generated i want to go ahead and save it and cache it so when the next person comes to that route it's already there as if it was built ahead of time already like these two were right so it's it's a you know just-in-time static site generation for pages that you haven't built ahead of time and that's what fallback true is gonna do and it's also um a synchronous so basically when i do put fall back true i'm just gonna go false right quick when i do put fallback true here it's basically you know it's going to happen in the background so i would have to show the user some type of loading indicator here that says hey we're loading right quick um this is asynchronous but you also have the option to make it blocking which basically prevents you having to show a loading indicator and it won't even navigate to that page until it gets rendered statically and then it shows it but we're going to start with false here like that and we're going to save that and see why there we go okay so this page cannot be found serializing error programs post alternatives okay um i must be doing something around here let's just check this out don't always goes wrong with your live coding okay so reason i'm fine huh why is it undefined i don't know why cms posts drive sorry to interrupt but people are mentioning a missing r in the url so it's lean to code and it should be learned to code okay i'm like i don't know why that's not working okay thank you there we go okay so here we go not breaking down let me add this back cool okay cool so we got learn the code there um so now let's test the fallback right so i'm going to put fallback true okay and then what i'm going to do is i'm going to go back to my cms i'm going to add a new slug here and i'm going to call it uh you know hello world or just let's just call it hello okay so if i go back here i'm not generating a path for that third blog post it's not being generated and next.js will only statically generate pages at build time if the paths were here too so because i don't have that path it is not going to be statically generated but i'm still going to be able to access it so the way um and it's going to hit an error first and i'll show you how to get past that error but it's going to generate it after i hit it right so uh let's let's do that so what we're going to do is we're going to go back to or first we have to i'm sorry no yeah all we have to do is go here and then we need to go to hello so you can see this is the error that i was talking about it's going to hit this error first and this is because i have fallback true which is asynchronous and right now it's going to attempt to load this page but without a post because it's trying to fetch it in the background so the way you would have to get past this is you would have to import uh the router from the next router or in fact if you want to use router and the thing that you want is uh i think it's just like this router equals use router and then you want to say something like if um router dot is fallback so to tell you this is in fallback mode or not i just want to return you know something that that's loading all right so i'll say i'm not that i don't know what that is there we go so to say like. loading something like that right so i'll just return it loading so now we can go back here and you can saw that for a moment there it showed loading you see that loading and then hello okay that's what fallback is doing while it's loading it actually came down here even though we didn't generate the path and then it generated it for us in production when i do this loading once and then i do it again it won't show loading the second time because it's already cached on wherever it is but the development is just going to do it every single time so this is how you can get around that long build time so literally pick a number like whatever is good and perform it for you and your team and then do fall back true or even what i would probably say is might be better was to fall back blocking and basically what blocking does is you don't really need this anymore because now i won't even render this page until it's generated right so i can probably just get rid of that and now if i go to blocking you can see it just it just it just won't even well let me show you a different page so you can actually see it won't even navigate to the uh page until it's rendered right so if i go to learn the code and then i go to hello you see even though as quick as i'm on development it won't navigate to the page until it's rendered so you know you have to handle that ui however you want to do that but i would prefer blocking depending on the page so this is like one common problem i would see with going to production um i don't know how you would get past this using something like uh you know gatsby or something like that i know there's incremented building and stuff like that uh but one i think you have to pay for some of those features you have to use like their cloud um and two there's still a lot of code and stuff that you have to write to get this to work but this works for free automatically by literally just passing one thing that's it very simple um cool so another problem that you're gonna run into in production is what if you know sure we have fallback we have you know being able to at run time dynamically you know statically render blog posts that were already created but we didn't render but what about the blog posts that aren't created yet right how do we tell next js that we just created some new blog posts and we want those pages to be there for you know for for indexing on the search or whatever how do we you know notify our build or our website that something new is there so typically the way you would do this especially with the hell of cms is you would use web hooks right so on your headless cms or whatever platform you're on you would say i want to add a web hook here that when someone publishes a document or when someone makes it change their document or someone deletes a document or whatever i want to do a web hook to netifly i want to do a web hook to you know wherever you got your thing deployed and that's going to trigger a rebuild right you would literally have to rebuild the entire site um whenever something changes and yes i know these platforms have been optimized especially gatsby's cloud to only rebuild the one thing that changed but it's still a rebuild um you still have to rebuild it and and you're really you know to be stuck depending on what platform you're on you know which platform you want to choose and you might be charged for it and different things like that um because nexus is a full stack framework we don't actually need web hooks which is amazing i'm going to show you how uh and then two you don't have to do a full rebuild at all um and you kind of get some stuff for free so one of the things that next json reversal team created was something called uh revalidate so revalidating is basically you could think of it as like a like a cron job in the background on whatever interval that you want and you can tell any page that hey on this interval i want you to go back and i want you to you know rerun get static props i want you to do that again because this page's content is changed on the regular by our you know our growth team that's always doing experiments and we always want to show the latest us and you know web hooks just aren't fast enough literally by the time the web hook triggers a rebuild uh we have already done tumor experiments so it's already so far behind so we need things to be instant so what we can do is we can set up an interval that basically goes and fetches any new content any new data there uh and potentially re-render it and re-cache it for us so let's check that out so i'm gonna go to this index page here i'm going to do a get static props here and i don't know if i mentioned it but you can do async stuff in here right i don't i think that was going without saying uh so yeah so get static props and basically what we want to do here is let's just return some props um we'll just return some data it's not really doing anything right now let's just say uh a message that says you know hello like that right um and then basically uh what we can do is we can come down here we can say re validate and then basically what you can do is you can give it any time in seconds of you know on whatever interval in seconds do you want git static props to rerun and it will do that so in this case i don't know let's say i wanted this to run every five seconds something like that you can imagine i mean right now i'm just hard coding this right but imagine this was like away from you know cms.get home page right because the homepage changes so frequently that every five seconds i want to go get the new homepage content every single you know every five seconds i want to go do that that's what this is for right so we're just statically putting it in here so it's not that big of a deal but you get this for free right and you can't really get this anywhere with a static only framework because it's static by nature it's not full stack it doesn't have a server there's no way that you can do this on you know something like gatsby or what's the other react one thing it's like react static or something like that um i know if you if you've used the recent reactor remix uh which is a really great framework but it i know it's paid and it's in like a private thing they do something very similar because they're a full stack framework too so you can see kind of the world and the react ecosystems you know moving towards this full stack server you know type of framework where still everything is still static even though we're full stack even though we're server rendered everything is what i would call eventually static it doesn't really matter how you build it it's eventually static and that's the world that we're moving towards to whereas before it was kind of just like oh you know jam stack is cool static only but now it's more like well what if we could build it and use it in any way we want and everything was still static we still got those benefits and that's kind of what xjs is doing they're pioneering that in my opinion uh so yeah you kind of get this for free i don't think i could demonstrate this here locally uh but oh actually i guess i could just do a console.login here we can see if it runs on interval let's see let's see what happens if we go here so if we go to the home page and if we look here let's see if it actually calls revalidate every five seconds on my local machine i don't think it does i think that's going to be dependent on the yeah the platform because it's using the lambda functions for that so yeah i don't think you're going to see it here locally but trust me when i say it's going to run that on every interval that you put there and it's very helpful and it eliminates the need for web hooks literally you do not need web books anymore to update your pages it's kind of refreshing um because i know a lot of products actually charge for that like i know a lot of especially cms's will charge for how many web hooks you want to set up and managing those web hooks and you know authorizing those web hooks making sure they came from the right source it can be very tedious well now you don't have to you can just say revalidate and put a time on there and you're good to go so very awesome um one of the other things i wanted to talk about um i just want to make sure i have enough time do i still have enough time here yeah okay just let me let me know if i'm running out of time i'm not looking at the clock because i can talk all day all right so the next thing i wanted to talk about is one it's not so much of a i don't know problem you would have but more of a solution to a situation that you didn't know you needed really um and it's what i like to call well it's not what i like to call is what it's called it's called previews right so let's talk about the difference between um app previews and what i would call like content previews so next js and specific reversal has something called app previews and if you go look at their website i mean their slogan is unless it changed it basically says like edit preview ship like that's the flow that they want people to uh you know get into um that preview part is specifically you know being able to preview your app so if you make if you hook up your app to reverse sale if you deploy it there and you connect it to github whenever you make a pr uh you know versailles is going to deploy a preview branch of that app and it's going to take screenshots of pages that might have changed and it's going to post those inside of your github issues so you can actually see and you can click on the preview it's really great it's really great to be able to check things out before they go live and that's awesome obviously you can set that stuff up yourself but you get it for free with versailles and xjs um or actually i'm sorry you get that for free which is first sale in general it doesn't really matter a framework you have uh so they have that but then in next js there's something called like content previews and that's kind of what i want to talk about today so what is a content preview basically you know this is assuming that you have not hardcoded all your content or data inside of a component and it's actually coming from some source like in our case we had our fake cms here you know you have some content coming from some source that's not hardcoded in your component so assuming you're doing that which by the way you should um you probably don't want to have to you know publish something before it's ready just to see what it's going to look like on your website right you know everyone wants to give wordpress you know slack but wordpress was magical there was something magical about going to slash wp admin filling out a blog post filling out some content and just watching it appear on the website it was so magical and you know now that hella cms is have coming out they're kind of decoupled by nature that's the whole point of the health cms is that it's decoupled but when you do decouple it you know developers rave about it it's amazing but the non-technical people on your team are sad they're complaining that they they're missing out on that magic that wordpress and square foot squarespace and wix hack so you know having previews kind of adds that back to it so a lot of cms products and frameworks out there have their own support for previews and stuff but nexus really wanted to make this simple next yes wanted they they the team over there thought that hey if we make features that make it easy to integrate with you know siblings services like cmss then you know people will more likely use our framework because we integrate so much better with their tools like cms's so the preview feature is what i would call like a like a third degree feature it's not meant to be used by you as a developer although you can and we're gonna walk through it it's really meant to be used by a cms and then you use it through the cms and and i'll show you why that makes sense so let's do it so if i am and we can stick with the homepage here this will be a good example so for instance let's say we have a title here um and what i'll do is i'll just take the title that's already there um we'll just get rid of this anchor tag welcome to the next.js right so we'll do this and i will put that here okay welcome to next.js and then what we'll do is we'll say uh what did i call it data i think we got that data.title right so nothing fancy just replaced it with some dynamic content here right so we got data.title boom there we go okay so if now that we have this title hooked up to our cms it's not hard coded we now allow someone on our team not technical to be able to edit this um what how would we set this up to where we i want them to be able to see what their edits are going to look like before hitting publish which will make the whole world see it right so i know we have preview apps but that doesn't really solve the problem on like previewing the content so how do i do that well you could set it up on preview apps right you could you know use the environment variables that nextjs provides you versus they'll provide you when they're in a preview environment you can check that environment variable if that environment variable is true you could make a call to get draft documents instead of published documents and there you go and that will actually work the only problem is the preview app would have to have been triggered in the first place it would have to have been pushed to github a pr would have to have been open a cli command would have to have been ran a non-typical person can't do either of those and hopefully you're not making them do that so it's not really good solution for them unless you want to build around that so instead we're going to use the preview content feature in xjs and the way that we're going to do that is we're going to make a new api function here we're going to call it preview js and it's just going to export defaults or request a response like that and basically all i'm going to do is i'm going to use this magical thing that next js provides to us on the response object and basically it's very trivial how it works it basically just sets a cookie in your browser to let you know that if you're in a preview mode or not that's it that's really how previews work so i can say rest.set preview data like this i'm just going to pass in an object like that so this will set a cookie um in the browser for us but a couple things we want to do first if we kind of look at the preview flow the preview flow is like i want to be able to look at a preview of a certain route so when someone hits this api route to ask for a preview we need to know what route what page they want to preview so the way we can do that is i mean you can set that up however you want again this is meant for a cms to consume for you and then on the cms you just click a button we don't have that right now so we're going to make it ourselves um so the way i'm going to design it is that the person must pass up the route that they want on the query stream so i'll say the the page they want to see is going to be on you know res or request dot params.page so that'll be the page and then what i'm going to do here is i'm going to set that preview data and then i'm going to say rest.redirect to the page like that so basically what i'm doing here is i'm going to grab whatever route that they've sent on the query string i'm going to set the preview cookie and i'm going to redirect to that page that they want and because the preview cookie is set now what i can do is in this case we're only going to do the index page is i can come here i can grab this context object and this context object is going to have something on it that says preview true or false preview will be true the cookie is set preview will be false if the cookie isn't set it's very straightforward so the preview is true then i'm going to show some draft content right so if in this case the preview is true then i'm going to say this is a preview and if it's not true then i'm going to show the real content right so we can do that so let's try this out so i'm going to go to the browser here i'm going to go to slash api preview like that but then i need to add a query string on what route that i want and i called it page and i want to look at the index page so i'm going to say page equals slash so let's see what happens it looks like i broke something can't read property page oh maybe it's called query on here one of those we'll see here we go so yeah it's called curry so you can see right now this is the preview right and that's as we follow the flow again we went here i got the page i set the preview data i redirected to the page that you gave me that was the index page so the index page loaded up it ran and executed git static props preview was true this time so now i was able to show this preview content instead of the non-preview content right so that's pretty cool but now we have an issue now okay cool i saw the preview this looks great um i want to go back to the non-preview i'm reloading it's still showing me the preview this will cause panic for people on your team who are like just testing out content they want to preview it and it's probably some something inappropriate or whatever something users aren't supposed to see yet and they and they think that it's there now because they're refreshing the page they're they're on yourwebsite.com and the preview is still there it will cause panic i've seen it so the way you want to do this is you just want to undo the preview and i just told you previews were just set as a cookie so the way we could do that is actually we can just make another route here and we'll call it like clear like this and i'm gonna grab this preview code here i'm gonna go back and instead of doing all this i believe it's gonna remove preview data or clear i'll have to look that up i can remember the exact thing so we'll just do that and then we'll just say res dot you know send clear that's it we're not going to redirect anywhere so we'll do that and let's see if that actually works so i'll go to slash api slash clear internal server error i guess that wasn't it remove pre data without a function i think it's clear that's not it i'll look it up and stop guessing i promise okay cool so that worked so we cleared the preview data so now i'll go back and go back here and boom now we're back on production right so that's that's exactly how you do it so just to really get into it and show you what that really looks like so if i go oops preview don't forget to add the page of that so if i go to the preview we open up the browser we go to our application we go look at the cookies please don't sell my cookies uh you can see right here next preview data is here right that's set and just to really show you if i were just to clear this right and refresh it it's not going to show the preview anymore right we'll go back to production pretty cool so this is a very trivial example and obviously me having to manually type in urls with preview and non-preview was very tedious this is why i said this feature is meant for cms this to build for you because the cms will be the gui for that right now we don't have a gui yeah you could totally build one there's nothing stopping you from coming in here detecting that one of your teammates is actually logged in on the site or whatever authentication system that you might have for your app and then you could say oh if preview is true and the admin cookie is also set then i'm just going to add a button in here right that says click this to look at the preview of the content you could totally do that um but i believe if your team is already using a cms to edit the content it would probably be a lot more intuitive for them to if they're already on that cms is to click the preview button on that cms so they can they can look things up so for instance i type we set all this up for you because we have a really tight integration with nexjs so when you use our cli to connect type to next.js we basically generate all this stuff for you you don't have to do anything you already have a preview button for every single page every single document and it just works and you don't have to think about it it won't cause panic and other cms products do something very similar too so pretty pretty intuitive there um let's see so we talked about revalidating we talked about the fallbacks um we talked about the previews um let's see the last thing i wanted to talk about um with oh then we talked about app previews as well so yeah i think that kind of covers some of the main issues or i would say the generic issues that you you're going to see when like deploying to nexus and how nexus actually solves them with like their internal you know tools and stuff like that but then you run into like the specific problems that i see people running into that you know obviously very specific to them and their company and then how they might get past them and it's not so much of like a performance problem it's more like a you know uh organization a efficiency problem so one of them that i see a lot and i just want to talk about this feature is i don't really see a lot of people taking advantage of this feature i was kind of going to advocate for it is what they call like the uh the catch-all routes inside of next as so for instance right here i have this slug right and this is cool it's dynamic it allows me to make one single um you know component that will match for any route that has this slug in it and that's that's awesome but let's say we're building a documentation website right we go look at any documentation website let's look at next js for example and you look at the url structure i mean it's mostly it doesn't really matter what url i go to right i mean this let's just look at it it doesn't really matter what url i go to it's basically the same component there's this nav on the left that shows the active state and there's some content on the right sure the url is different but it's the same thing so in our example though uh we couldn't match right here right we might have to do slash dynamic thing slash another dynamic thing and that would work for up to two of these but what let's say it went on forever we don't know how long it's going to go which is a very common theme of documentation uh you would want to do something like a catch-all so in this case uh let me show you how that works so if i were to make a new folder and i would call it docs like this and then i would say you know docs has a i don't know a topic so instead of putting topic in like this and saying cool we have a dynamic thing called a topic what i can do instead is i can put a dot dot here and basically what this is going to do this is going to say um anything slash docs in any path after that no matter how many paths you have after that it's going to match this route right here right so this allows me to reuse the same component for anything after slashdocs not including the index paste to slashdocks it's not inclusive to that and it's really intuitive uh and it saves you a lot of time from having to like oh well yeah i mean this page is basically the same page as the other page but they're different pages so i gotta make different components so i'm clever so i'll abstract a lot of this out and put it in a layout or another component and i'll just import them yeah that's clever that's nice but you can just you just get around that completely just by having this and and how would you know you know what parameter on well basically the difference is see right here where i have context.params and it's a slug well if i was using the the catch-all this would be an array of all the parameters in the order that there are in the url so it wouldn't be you know that slug would literally just be an array of you know for instance let's say the topic was uh introduction slash start here slash getting started this would be an array of introduction and then the second thing would be getting started and then the third thing will be whatever i just said i forgot but it would be that thing right so it's really intuitive to be able to do that and then obviously you just pass that down and you have the same thing and then you can take this a step further by including the index page by doing another array around it like that and now it's what they call optional catch and all optional catch-all but i just referred to it as like inclusive it just includes the index page for docs too so not only will this match slash docs slash anything this will also just match slash docs as well so it's very intuitive and i i don't see a lot of people taking advantage of this as much as they should because it's extremely powerful and it cuts down on a lot of the code and complexity and logic that you have to manage as a team so those were most of the things that i wanted to cover um i know we got some questions in the qa so i can't wait to read those and answer those but i would say taking advantage of these techniques oh so so let me remind actually first in order to be able to take advantage of these techniques you can't just deploy anywhere you have to deploy in an environment that is capable of hosting you know full stack apps right because nexus is a full stack guy so at today's time obviously versailles supports this they made it i know netlifly just recently released support for nexjs and some of its features if not all of its features i haven't really dove into it 100 but i know the team over there sarah drazner and the team over there are really doing good things with nexjs and uh and netflix so check that out and then if you wanna you know obviously something like heroku or aws comes to mind um i i believe if you go on one of those platforms you're not going to get a lot of this stuff for free like the revalidation and things like that you're going to create a custom server which next.js does allow you to do you have to create a custom server where you have to kind of do that stuff yourself so i personally recommend only deploying an xjs app to either versailles or in in today's world you know netlifly depending on what their support is i don't recommend doing something custom unless you have a really good reason why you have to do it as in you have some complicated architecture it needs to work with something else existing i don't know um but i don't recommend doing that i highly recommend just looking out versailles um yeah oh and i guess one thing i did wanted to touch on before i go was and i i talked about a little bit when i first started which was i i think a lot of people don't take advantage of the get static props and to get service side props as much as they can this is extremely powerful so you know we talked about creating apis here so you might think like okay cool i'll create routes for my app to consume data right you'll do that it makes sense i could consume this hello js route inside of the get static props inside of you know this index page yeah that makes sense but it's highly recommended not to let me tell you why the reason why you wouldn't want to do that is because let's think about it we're on the same app it's on the same hosted in the same container when you make an api call to your own api from this function you're basically going out of the same network and coming right back in just to get a response it's it's unnecessary http that you don't really have to do when instead you could just take whatever logic is here like say there was some database code here you could just import this code into this file up top and i know that seems weird because this this is a component it's going to be rendered in a browser but you can import database you can import anything node you can import the file system you can import whatever you want this is node here i know it looks like the browser this is node you can import whatever you want and then you can just use it directly in here so if you need to do some type of get you know on the api routes that you created do not make a call to them instead use the logic extract the logic of those functions and use them inside of get static props directly that code's going to be cleaned up it's not going to be in the browser that's going to be way more performance can be much better as far as mutations go you can't get around that because you're not going to do any mutation service side right you're going to mutations client side using something like react query so yeah you still would use your api routes for mutations there's really no way around that but as far as like getting data do them and get static props through them and get server-side props but do not make http requests if it's from your own api obviously if it's from another api yeah you have no other choice you have to make the api call but if it's from the api that you created here don't make ap don't make a http request just use the function instead it's going to be much faster and it's going to be a lot more easier to maintain okay so that's pretty much everything that i wanted to cover um i hope i didn't go over too much time here uh and uh yeah looking forward to the questions

Channel: iO - Technology

Views: 2,593

Keywords:

Id: nPooaqHb7aM

Length: 52min 51sec (3171 seconds)

Published: Mon Mar 15 2021