Learn how to get started with next js in one hour

hello hello everybody gracias i don't speak enough spanish to be able to give this talk in spanish but i'm happy to hopefully read a little bit if you have questions in it but uh thank you so much for that introduction um my name is cassidy and and uh i work at netlify and i am here to talk about next.js with all of you and so i will be doing some presentations with with slides and then i'm going to get into some coding and i'll show you how next.js application is structured and we can go from there and then at the end uh there will be time for questions and so you can ask as many questions as you'd like and i will answer as many of them as i can um so let's get started we've already said my name i'm cassidy you can find me at cassadoo most places on the internet so feel free to reach out on twitter twitch github anything uh at cassadoo um so first i wanted to talk to you about why next js uh why why would someone use next js instead of uh just react and next.js first came about because um react is a client-side rendering library you everything changes on the client side in the user's browser with next.js it brought server-side rendering to react and so when you have a next.js application first and foremost it was for server side rendering where you can render components on the server side and then have better seo that way that being said um last year it's actually just been over a year now with next 9.3 in march last year um they did a shift to static sites as well and so um even though it did support some static sites uh in the past now if you were to use nexjs um you could build both a server-side rendering application and a static site generated application and really use the best of both worlds and it's a very very powerful framework there's a lot of cool things that you can do with it and i'm going to talk through how some of it works next and so first of all what features should you know about when when you're actually putting a next.js application together there's a lot of developer experience nice to haves and some of those include hot code reloading and so when you're working on your application it'll reload quickly on the side you don't have to refresh the page that's actually powered by react fast refresh and um in the past few days actually next js 10.1 came out and with next.js js 10.1 um it made fast refresh much faster i think it was something like 20 times faster so it's nice and fast and what react fast refresh does is when you have an application that um let's just say you have a counter a very simple counter and as you increase or decrease the count the background color of your application changes something simple like that as you change the colors or update your code your states stays the same and so if i were to say okay i really want to check the state at five originally before react fast refresh you have to say okay i'm gonna check my code then click the counter all the way up to five okay that's good change the code again click the counter all the way up to five it will maintain the state now and so that's that's what react fast refresh does it's really really nice um there are some other performance things uh along the underbelly of the application but you know fast refresh is is a big one to understand for that um there's also a lot of styling options available with next.js with the styling options that come out of the box you can use styles.jsx you can use css modules you can use less you can use sas you can use pretty much any styling option that you want um you can throw tailwind really easily you can throw in bulma really easily it all will just work which is really really nice um and and so the fact that those are out of the box if you if you want to use it you can use it it also has typescript support out of the box you don't have to install anything special to make typescript work you just change your file names to ts instead of js and it'll work same with environment variables you can make a dot end file and add environment variables in and it will use your environment variables and i'll talk a little bit more about how those work a little bit later and then it also does automatic code splitting and so if there's any javascript that you write but it's not used on the page when you bundle up your application it will get rid of that code that you're not using so that way you always have a performant bundle that's pushed to the browser now the routing in next.js is really really interesting and um i accidentally pushed forward so the routing in next.js is page-based routing so when you make a file in the pages directory it automatically becomes a route you don't need to set up for example with react router how you need to list all of your different routes in a giant routes.js file you don't need to do that it just works when you add um a file to that routes or to the pages directory there are some caveats with that and i'll talk about more of those later too when we're getting into the code the api for next js is pretty simple um these are these are kind of the four main ones that people use the most there there are some other ones but but uh in terms of these ones there's next link uh next link is a glorified anchor tag it wraps around uh links so you can link between pages but what it does is it actually does client-side transitions so they're super fast and so it does some pre-loading of pages as you navigate between pages and so next link is pretty nice for that with nexthead that is a react component for the html head so you can programmatically change your title or your meta tags or anything like that and that'll happen in next head um next router is a react hook and with that that'll let you get uh query parameters that'll let you get the current path that'll let you do some redirects and navigation that that's what the router does and then next amp that allows you to generate google amp pages and so if you will have a very article driven website you can use google amp um and it's built into the next js api and the google team actually worked with their team on that the cli is very similarly simple there's next build which builds your site all together there's next dev dev which runs a development server there's next start which runs a production server and there's next export which exports your entire nexus application as a static site um typically you can you you don't have to do much with with any of these you'll run next dev to work on this on your own but it'll be the host that you use whether you use netlify or or aws amplifier versal or any of the other options um the they will be the ones running next build start and export but next dev is really the one that you'll be using the most um you can add custom configurations so let's just say you want more than just typescript support you want to be able to add other elements to it coffeescript probably not coffeescript but so something else if you want to add those kinds of things to your application there's a next.config.js and with that it's just like webpack modules you can add whatever loaders whatever things you might want into your next config.js and uh it's it's fairly simple that way um now preview mode this is a particularly interesting feature um and and this feature and then the next one i talked about are particularly interesting because they're static first but require some node code to work fully but they're they're interesting so with preview mode in xjs what this does is it assumes your site will be a fully static website but let's just say that you want to preview what a blog post might look like what a copy change might look like something with a cms and you just want to preview okay what will this look like in my application great good and then you you go back to editing it um typically if you do a static site you have to rebuild your whole whole site to see that preview and you can run a deploy preview with that with preview mode what it does is it enables a um what's called a cookie based redirect and with that cookie base redirect it'll actually server side render that page so you can see what that looks like and then if you're happy with it then you can exit preview mode and then bundle your application and i can talk a little bit more about that but it's a it's a funky feature and another funky feature that's similar is incremental static regeneration i have a lot of thoughts on on this on isr um but i don't have time to get into all of them right now so i'll give you a high level overview and i also wrote a blog post on the subject which you can read about and and see more details about but what incremental static regeneration is is you have your static application but let's just say that you have i don't know a hundred a thousand pages that you want to render but you don't want to render at build time you want them to just kind of happen later what happens is you can have your user go to that page you can you can go to a page that you didn't define statically and that page will start to build in the background and then when future users go to that page it will be a part of the static bundle it has some funky caching stuff under the hood in in an ideal world it works really really well and is awesome sometimes in non-ideal cases it doesn't always work and and again i wrote a blog post on the pros and cons of this feature but it's really really interesting to learn about the caching under the hood so i will share a link to that blog post in a little bit um that being said let's code i i wanted to show you a next js starter project so you can actually take all the things that i just told you and actually apply it um this next starter project is right here it's at cast dot run slash next starter and i'll i'll put it in the zoom chat as well cast run slash next starter it's on my github i just made a little url shortener for that and um that being said i'm going to stop sharing just for seconds so that i can start sharing my code and now you can see my face so one second as i move some windows over and then i will share my screen again okay sharing all right so we have our next js application by the way if the font size on the right is too small let me know and i can zoom in um so on this left side right here we have the basic next.js starter project and this is the one that i just linked to it's it's on my github on the next netlife starter it's using create next app that is a cli tool that you can use for that but it takes out some of the extra things that are built into it and then it adds a couple uh nice to haves that i always use when i start a new next.js project and so um i will go through all of those with you but if you click this deploy to netlify button it will automatically deploy that project to your um to to your um netlify server and then it'll also clone that to your github or to whatever git provider that you use but anyway this is this is what it looks like um and for those asking about my vs code theme this is called hack the box um anyway okay so first i will go through some of the code and you can see what this what this app looks like a bit more under the hood so first of all in my package.json we've got the latest updated next.js and then also react and react dom and that is it it is it is very very straightforward nothing extra beyond that it's just next next and react that's included um in this index.js we have a pages directory right here and again if you can if you can see it i can i can zoom in a little bit if you can't see it but i'm gonna do this so that way so we can get all the code in there um this is some basic html you've got the main which is the header right here that says welcome to my app you've got a paragraph and then you've got a footer right here that is this component right here i have a components folder and so in the components folder we have the header which is just it takes in the text which is welcome to my app and then in the footer it's very similar but with with this footer we also have this footer.module.css and so i'm using css modules on the footer right there and so those are the two components that are included we also have a jsconfig.js you might have noticed and if you didn't i could show you again you might have noticed that i used at components um inside of my index.js right here that's because something that's automatically included in next.js is absolute paths and so i can define my components folder as at components and that means wherever i am importing something i can just use add components for it and you can think of this as really useful if we were to do like at system or something and you wanted to just do or or for example at design system slash buttons and that lets you avoid doing something like dot dot slash that slash dot slash whenever you're importing something it's it's really really nice to be able to uh do these kinds of absolute imports um i also did the same thing with styles i added some global base styles so i have a styles folder the global base styles basically just do some normalization and nothing much beyond that and uh there's a page here called underscoreapp.js these two are the the main ones that you will always have in an xjs application your index.js which is your homepage and then underscore app.js this is where you add anything global and this is also where i'll say that there are caveats with next js's router because in the pages directory that's where you can add as many routes as you'd like you can add a page in here by just doing new file and then contact dot js and i could copy the index.js over into contact right here and rename it contact and i'll say contact me like this and then if i were to save it and then over here go to slash contact then we got contact me hey and so it's that simple to add a route that being said whenever you want anything global it has to go through this underscoreapp.js and so that's where these global styles are coming from and so if for example you want to share state across your application you could do it in a context right here and so i could do a react context and then wrap this component like this and then voila you have a context that is shared across your entire application and that's how that works the caveat is if you wanted to only share state across like two routes you can't uh if you if you wanted to share it across like four routes out of ten you can't you have to share it across all of the routes um and that's the caveat with with the with the router it wraps the entire application in there and so that that's just that's just something to know um so you might look at this and be just like oh yes this is a regular react component there's nothing fancy in here and that is where you're wrong there are a couple minor things that you can do um that that can make a big impact and that's because page based components are very different from regular react components and so right here this is just a header again that takes in text but when you look at the index.js a page component is actually it's a react component in this part but everywhere outside of this is node code and so when you do when you want to for example do something related to uh querying data or something you would be using node fetch code outside of this actual function right here and i'm actually going to show you a more complex example and we can implement something together but i'm going to go to my github really quick and i'll paste a link and then inside of here i'm going to find my next pranks repository so this next pranks repository i actually um i gave a conference talk on this and and um it talks about it in here but in this next pranks repository um i use some of that node code and this uh activates some of that incremental static regeneration that i mentioned before as well as some other fun things and so in this prank i could be like cassidy totally nailed this presentation and then i generate this link and then this link when i click on it it says it rick rolls you and you didn't expect to be rick roll today did you um and then it also says cassie totally nailed this presentation not you've been pranked and it generates a news page and it's pretty fun and what's what's interesting about this application is it does that kind of node code side of everything but um it it does a little bit more with dynamic routes and everything and so i'm going to talk through it a little bit so first of all you see the home page which is very very similar um to the index.js that i showed you before it has some state which state it's it's react state nothing particularly uh different in there it uses next link i'm going to zoom in a little more so you can see with next link it's again it's just wrapping an anchor tag and so it generates a new link to for users to go to um people are privately dming me i didn't expect to be rick rolled in a webinar well you're welcome um and then also you notice i have a folder called news right here you can see that in the route it's very very small i'm actually going to paste this in the chat so you can look at this yourself when you have a folder it's just slash news and that's what shows up in the route and then it has this cassidy totally nailed the presentation you might notice this uh file name right here is in brackets when it's in brackets that means it's a variable and you can pro programmatically change that and so cassidy totally nailed this presentation matched this variable right here inside of here we have two functions that are worth noting get static paths and get static props and those are the big node functions to know inside of page components get static pads means whenever you query something in here that'll generate all the paths that are possible to be rendered in a next.js application so for example if you have a cms and you wanted to um have blog posts and you wanted all of your blog posts to just be the the pages that exist in there you could call a fetch call inside of this function and then you would populate this paths directory or this pads array with with all of the strings that you want because i have an empty array that means that it's just a variable i don't have any predefined paths it's just going to be a free for all this fallback is true means that if it's not inside of here we don't return a 404 if this were false then it would 404 if it was outside of this this path thing and i have more examples on this that i'll talk about get static props is something where it actually passes props to the page component um and so what i'm doing in getstatic props is i'm getting the parameters of the url i'm i'm converting it to a title so that way it can be the title of the article and added to the head of this application um and then with that i'm then passing it to the article and it's generating the the rick roll and everything like that and so this is this is where your node code lives in get static pads and get static props i'm going to show you another example um and this one is called next adventure someone mentioned redux i'm i'm not going to be showing redux but i will be showing um x state and state machines to in this particularly uh particular example um and so this is an application that i made for halloween called a lonely code-filled night it's spooky um and this was a particularly interesting application to build because it uses a bunch of different technologies so first of all it uses x state for state management and i make a choose your own adventure story with xstate and i made i made a story which i will show you in a second it also uses react uh or netlify forms and it's a react form with netlify and it pushes to a hasura database and so in the choose your own adventure story that i talk about um you can create a character here and i'm actually going to i'll put the url um i'll put the url in the zoom chat so you can check it out so when you create a character you can put your name you can add the pronouns you can put the character's favorite smell that comes up in the story and then you can put your email then when you click this send button what it does is it triggers a serverless function that then populates a hasura database which then randomly populates a story and so this story is uh it's different every single time with the different characters that are coming from the database don't abuse it please um and it says once upon a time there's a developer named narwhal who's working very late at night very late at night on halloween and then it's it says narwhal decided to take a break to get a snack he went to the kitchen couldn't decide what to eat we can decide to eat an apple or eat some candy i'm gonna say we eat some candy he munched on the candy then he heard trick-or-treat that i could outside we're going to either ignore the kids or answer the door i'm going to answer the door he opened the front door but no one was there it was very very spooky but it was probably good because he ate the last of the candy we'll ask if anyone's out there he called out in the night who's there suddenly a werewolf comes up and said have you heard of typescript and eats him the end um and so this is a very very detailed story as you can imagine um but what's cool about this is uh is how it's implemented and not to brag about my own code but it's kind of neat and so in the pages first of all there's the underscoreapp.js that i talked about in that underscore app.js we have the global styles but we also wrap the entire application in a react context and this react context is something that i put in a context folder and that shares the state across the entire application the other pages are there's the make your own page and then in this make your own page that's where we have the form that i talked about and it's otherwise a very very simple uh custom form there and then we also have a success.js this is a page that shows up whenever you make a new character and then index.js also just navigates between the different pages those ones aren't as interesting i'm going to show you next the context because the context has some very interesting elements to it so first of all in app context this is creating a react context that pulls in um a character which is pulling in from that character database that i that i mentioned in hasura and uh we generate a random character that we then pass to the rest of the application and then that character is the thing that is used in the story um for the rest of context we have a state machine and this state machine is generated with x state and it is kind of uh it's kind of hard to pull in all of the code into your brain right now because it's big but what's nice with x state is it actually has a visualization so you can draw out the tree that you want in in their visualization library and then turn it into code and so i have all of these first levels of the story where where you start the story and then there's the first level sorry the second level in the third level you can go deeper but this is this is how that works and then i generate a state machine and so for every single state i have the the starting value and then i have the story and then every time you click to a different thing so the the first button there was going to the kitchen now there it goes to the story and then there's two different states that it can go to and then it goes out into a tree it gets fairly complex as you can see it the the code is long for generating this whole story um but that that's that's how it generally works um and then at the end i create the state machine and i pass it to the react context that we talked about um one other thing that that was just kind of interesting was i made a pronoun generation library in here this is not next.js i just thought it was kind of fun um where when a person picks a masculine or feminine or non-binary pronouns it then passes that to the different story portions so that way it can be correct with the character that is passed in so anyway once we've made this state machine we pass it via context to the rest of the application then we can go to back to our pages and we have this s folder right here this s folder is the story now this is a more funky file name again where it's in the brackets but also it has dot dot dot in it and so it has dot dot dot story that means that yes it's a variable name but it also can be spread and so when we navigate through the application if you were to go through it snack time we'll eat an apple this time the path in there i'm going to paste it in the zoom chat so you can see a bit more um you can see how it has slash s which is the the folder name start which is the start of the story then snack time then eat an apple because it has that dot dot dot in the file name it spreads it out and so you can have as many paths matching that as you want and still if you want to define those kinds of pads you you would use the get static props and populate those pads um but in this particular case it's just so that way we can keep track of where we are in the story and so inside of here i i have the story block which pulls in the text from the state machine and then whenever you click the button what it does is it uses that use router hook that i told you about that that next router api right here um it pulls in the router and then it basically makes a little bit of a redirect and so it does a router.push and so for every single uh page in the story phase of the story however you want to call it it adds it to to the different pages and so you can the this is actually a very small component it's it's less than 60 lines of code um but this powers the entire story with uh with that x state um library so it's it's it's pretty interesting what you can do with these pages that are a combination of everything the way that i did this this is actually client-side routing to all of the different pages of the story but at the same time it's also statically generated because we statically generated the home page as well as the make your own character page the success page and then just the the kind of shell this this uh dot dot story page we statically generate that that individual page but then we client-side generate all of the other components in there because of how the link works and because of how the router works it's it's kind of funky to wrap your mind around i admit even making this this demo i was kind of like oh so if i do it this way this will server side render that page but if i do it another way it'll client-side render it it kind of combines the all three of the worlds of client-side rendering uh static site generation and server-side rendering all into one framework which which is is very very powerful and so for example let's just say i wanted to make some kind of catalog of content i could theoretically pull in a page statically have a database and then client-side search through uh the directory and have it all live in one giant code base um and so i i mentioned this uh code base before i'm going to paste it in there um i saw that there were there were some questions about testing this particular application i didn't test probably should have but i would probably use either jest or react testing library for it um so anyway if you wanted to query an api you would use something like that uh that gets static props and and get static pads i want to be aware of time i think i have a little bit of time to to query something and so we can do that really quick does anybody have any questions while i uh get ready to query something i want to make sure that i get questions answered okay i'm going to keep going in and so let's just say i wanted to query an api right here um i actually have a gist i'm going to pull up my just on github i have a gist where i query pokemon somewhere there's a pokemon api that is nice and simple to use i'm going to search pokemon yours i guess i don't that's fine i'm just gonna go to uh pokeyapi.co and we have the pokemon api here so we can we can query that pokemon api and and i can show you what that can look like in next.js and so let me pull up my starter again and so let's just say inside of contact um instead of contact i'm going to rename this to pokemon and then in pokemon.js i'm going to do a export async function get static props and then in here this is where i'm going to fetch the pokemon api and so it's going to be this https pokey api let's do what response equals a weight fetch and then in here and then i'll do charmander for now okay so in here what we want to do is we want to return an object that has props and then props will have response right here and that response can be pokemon uh and we'll pass it right here and i might need to do some parsing um but we'll start with this now this is this is the part where i wanted to talk again about the the node and the react stuff inside of this this is just react inside of this this is node and so if i were to do for example console.log response right here um what will then happen is let me actually restart my dev server and then refresh the page oh i gotta actually go to slash pokemon okay it's yelling at me this is fine um when i when i do that it's this is giving me a node error it's it's it's console.logging down here and not console.logging in the browser um and this is my own fault i probably should have prepped my api call before doing this this part of it which is fine um one second i think i have it written down somewhere yeah i'm just gonna copy some of this really quick on my monitor and then paste it over here okay now if i were to do a response okay pokemon is not defined oh that's my own fault again ah sorry about this again i needed to copy and paste this oh i need to call.json thank you you're right i'm going to await and then json thank you for that the joys of live coding okay beautiful okay look at that we've got we've got the sprites we've got the name of the pokemon we've got charmander all of that thank you for the json thing i needed that um and so now we can actually pass that to our page okay so i'm going to inspect element right here now again in the console we have nothing but if i were to do console.log response right here now it's actually going to be putting it into the browser console and so this is this is the context thing i was telling you about this is node this is react this is where the browser is is doing things this is where node is doing things what's cool about this though right now we're just we're doing this as a developer we're doing this as run dev but this happens at builds time when you deploy your site and so if i were to deploy this site somewhere i don't know why it's doing this double a wait i'm not going to question it right now when we deploy our site all of the fetches that we do inside of here will happen at build time that means when the person who is going to your site accesses your page they won't have to wait for the pokey api to return charmander it's going to just work it's just going to have the result of that api call from builds time and so it's super super performant when you have a site that is statically generated at builds time where where you make all of your api calls then and then the user will just get what is returned to the browser it doesn't it doesn't care when those uh those api calls happened it'll just actually be be generated in there the double weight is needed because of promises oh yeah again it's doing it live um and so we we have this response i i could say like instead of contact me i could say something like hello and then response dot name and then look at that hello charmander and then we could pull in a sprite like this and so if i wanted to do an image tag i could do image src and then in there i think it's response dot sprite response dot sprites dot front default yes maybe save it try it yeah look at that we got charmander um and so we we could do this with all of the different pokemon we could actually do this where if we did get static pads and turned this into uh the the square brackets we could generate a page for all of the different pokemon have that run at builds time and then whenever a user goes to slash pokemon slash charmander pokemon slash pikachu so any of these things those pages will already be generated and it'll just it'll just work for them they don't have to worry about the pokey api going down or something because the pages have already been generated um if you have dynamic pass parameters can you pass the values you want generated at build time yes yes that's exactly what gets static pads does and i'm trying to be aware of the time because i want to get questions answered i'm going to try this really quick and so in here i'm going to make a new folder i'm going to call it pokemon and then inside of here i'm going to have a new file and i'm going to do in brackets pokey.js like this i'm going to copy all of the code that we wrote in here and put it inside of here and i'm going to rename this to nothing just to have that there um okay so now we have a 404 because of that that makes sense but now we want to be able to go to pokemon and then this pokey.js so what i want to do is i want to do export async function and then get static paths and then inside of here is where i'm going to get all of the different pokemon names and because i don't want to go through too many api calls i'm just going to say um we're going to return this object in here and then paths we're just going to have three pokemon or say whatever pokemon you like and i'm just going to put charmander and then ditto and then whoever says the first pokemon i will put it in there someone said mudkip nice okay cool wow there's actually so many sure i'll do it i'll do a few other ones okay anyway i'll stick with these for now so we get these we get these pads that are passed to the array and i'm also going to do fallback is false because i want all other pages to 404 outside of these pages now with these paths i also need to do slash pokemon and so it's actually going to be slash pokemon charmander this is something that i think is a little quirky but it's okay and so it's it's slash pokemon slash all of these different things and now inside of get static paths or it gets the next props i get the params and then the params will be that pokemon name and then that pokemon name will be passed inside of here and so it'll be params.pokey i think we'll see if that's correct um and so if i were to refresh the page now oh it's it's slash pokemon charmander yay okay it worked and now if i did pokemon slash mudkip yes it worked yay and so we're we're pulling in pokey because that's the that's the file name there we're getting the different parameters to pass to each of these and then we're fetching all of that and so add builds time we're going to get these four pads generated as well as the response called at build time and so our users don't have to wait for the api to be called they can just go to that page is this feasible with large data sets yes we actually i don't know how much i'm allowed to say because i don't know who which customers are secret of ours but some of our customers at nellify in particular who do this exact thing they generate there there was one customer that we had recently that generated 400 000 pages and because they did static first static builds really really fast if you don't have a lot of serverless functions or anything you just want to generate the pages and and call the call them in these functions um we had one customer that had thousands and thousands if not hundreds of thousands of pages and uh their builds time was i think four minutes for all of them and so that's really that's really really not bad when you do purely static and then if you if you start adding more things like serverless functions and more detailed things you will get longer build times but it's totally feasible to be able to do that um if you did want the user to load any pokemon not just the four we define in paths um then actually i think i could do fallback it's true and i'm going to try this i'm going to say mewtwo and see what happens yeah it didn't like that that's fine um so we we do need to actually generate so uh more of these because it'll be upset um so what i would do here if we wanted any pokemon and not just any of uh not just what's here um because right now if i were to do uh fallback is false it'll do a 404 if i did mewtwo otherwise it errors out what we could do is we we have to do a bit more validation um but you could query the pokemon api right here and then just get all pokemon names i have a demo of this somewhere but i don't know where it is off the top of my head um but you you would query all the pokemon names that you want you would still pass the to the pads array and then you would get the params the exact same way and get static props okay i am now going to stop sharing my screen and start answering questions so that way we can get all questions answered and i can go back to showing code if needed but i see that there are a lot of questions here so i just wanted to check on that really quick okay so um what happens if the requests change after the after the build there's a few things that you can do um and there's actually a really good case study on this on the netlife blog that was just released like last week um because that that one uh one of uh the customers that we had dealt with that um and it was a very very interesting case study uh i'm pasting it in the chat um so what a lot of people do is they have some kind of web hook and so whenever the web hook is queried it'll just re-build the site with the new data um but also one thing that we do with next.js is let's just say you want to do incremental stack regeneration or you want to do server side rendered pages you can still server side render those pages with serverless functions um and that's that's how we do it where if you were to um do some more server-side rendered pages which um let's just say i did want to not just query pokemon but query something else or or have some pages that aren't included in the original build i mentioned before that i have a blog post at cast.isr to talk a bit more in detail on that um you can do that and it'll just use a serverless function to query it and and so you can server side render those pages if you don't want to wait for the build every single time that is a possibility um that being said it's slower for your users and so it's kind of like you have to decide who who is more important your your developer time or your user time there's no wrong answer there but that's that's something to consider for that um let's see how is the cash and validation process or what are the strategies around how specific assets or pages work look at my isr blog post because because that that answers some of the the caching things we actually have some new things coming out next week around this particular subject and so keep an eye out because i can't talk about it until then um but uh the the the cash validation typically when you do a new rebuild um it's an atomic and immutable deploys and so you'll get a brand new cache and a brand new deploy with every single one um let's see if you don't have pokemon on the pads we could use get server-side props yes yes you can so you can use get server-side props once again that's something that works in next.js but it kind of moves away from the the static first approach that they've been pursuing but get server side props works and that's where you uh server side rendered pages uh with the uh serverless functions um any tips on moving from create react app to next.js honestly create react app is great because everything kind of lives in a div you can move your entire create react app into an index.js on your next.js app and including including your router which will lead to some funky bugs but you can and then slowly move out all of your different pages into the pages directory it's a really smooth transition process depending on your application you might want to decide if you want to do that one one thing that i just want to note is again if you have if you have a large context object or a lot of state that you're sharing across routes one of the things that i like about regular react is let's just say i'm using react router i could wrap a context around like three of my routes and just share state around those routes and that and have it not affect any of the other pages with next your context has to wrap the entire application which can lead to some unusual re-renders and stuff pros and cons pick your poison but that's that's something to note there you mentioned at the beginning of the presentation that there are some advantages like seo could you explain uh deeper end of it yeah and so that's actually something that um look a bit closer at that next pranks application it's it's a silly application but it uses some interesting things under the hood and i'm going to particularly send you to this prankhead.js filed i just dropped it in the chat um with static sites and with server-side rendered sites your seo is greatly improved compared to client-side rendered sites because the pages are built ahead of time um it's actually best seo is best on static sites next best on server-side rendered sites and worst on client-side rendered sites but again it's kind of a spectrum of things and and seo is improved every single day for for developers who want to do all of them um but in this particular file that i sent um you'll notice that i programmatically update the title and i change the the twitter card and and the og images and everything um that kind of stuff you can programmatically change in next.js really really easily this is something that you can't do as easily in a regular react application and so your seo is greatly improved by just being able to use that next head api that lets you programmatically update that um let's see you're able to use all the other react hooks right right it's still just react it just adds some structure to to react but yes you can use all of the other react hooks and again you use them in the react part of it not in the node part of it you can't use use effect and get static props or get server-side props or anything you do it in the components themselves what can you tell us about deploying uh what can i tell you about deploying i don't know what what questions you have but actually i'll i'll pull up my next starter application for example um and and show you a little bit about how that works one second i will share my screen again um and so here's here's for example where i deployed this project right here um if you want to see generally how it works first of all your domain name appears here whenever you whenever you deploy it builds and then publishes and you can see that you can look at the logs for that particular deploy and see what things might have gone right what things might have gone wrong what warnings you might have it goes into pretty solid detail on that um and then also there's a there's a few different things that you can do once you have deployed um you can change uh your domain name um and so you can change your your site name here and uh add whatever custom domains that you want um you can roll back to any other previous deploys that you have you can add any builds plugins um we automatically at netlify install this essential next.js you can uninstall it if you want but you won't want to all of your serverless functions happen here netlify identity is is something for for logging in and out if you wanted to drop in logging in and out to your application and authentication i have a blog post on that netlifeforms this is what i mentioned um that i use in the next.js adventure of application i added nullify to the form and it automatically pulls in all the form data you can do split testing and that automatically lets you do a b testing across different branches that is that is the high level summary about deploying that i think i can tell you i don't want this to just be an ad for nullified it's more about next js but that's uh if you have questions about that i'm happy to answer them um let's see not a question i want to say this is amazing thanks jose um do you actually recommend to skip an independent server and make all the next.js from projects that fit in adrian i'm not entirely sure what your question is asking would you mind rephrasing it um let's see what is the best way of creating a multilingual application with next um so next does have a thing called next internationalization um and so you they they actually have that built into the framework that being said i think that there's some better internationalization libraries out there and so i i personally use uh other internationalization libraries rather than the one built in just because there's some funky bass path things that can happen um but yes you can you can do that built into the framework um you mentioned that the requests to the api are made during build time what happens if the api response changes um i kind of answered that before that you can either server side render it every single time so it'll it'll run on a serverless function or you can rebuild the site and have a web hook or something when the api response changes i'm confused is next.js only for static sites it can be used for static or server side rendered sites it's fastest on next sites or on static sites though and so i tend to recommend that because i like the speed of the static ones um what's the difference between react server side render and next js good question react server components are very similar um we actually i i don't know where the demo is otherwise i'd send it to you we made a an interesting demo with it basically a server component is still experimental so don't bank on it i i have regular meetings with the react team and they're all kind of like you know server components are kind of an r and d we might throw them away but they're they're we're all trying so don't go all in on server components yet uh there's still a lot of changes to be had there that being said um with server components they can be run at builds time to for static sites or at on uh server side rendering things next js provides a framework for react and for doing that sort of thing and they will probably implement react server components um but react server components are it's it's basically just a separate library from from next.js at this point um next we'll probably implement them but it's a separate thing i hope that answers your question um if you're using typescript will the react function recognize the typing what gets tagged props returns yes i am not a typescript developer but yes it it pays attention to that sort of thing and uh you can do full typing in inside of the get static prop stuff um connect just handle pi time hope so um coming from a view in next background i'm really liking all the stuff the react community is is coming up with yeah and and honestly next for view is kind of the same as next for react um i've i've heard that next actually has better a uh api support and everything and and does a lot of of cooler things but i haven't used it enough to be able to say if that's true but they both generally do the same thing next and next just if you prefer view or or react um let's see does using less or sas require extra config less does not sas does require node sas because of the weird pages thing that i told you about how it's like kind of node kind of react and it's a combo of both you will need to install node sas for sas um but that's it it's just npm install node sas and it'll work um let's see if you have an api call that changes a lot and create a static page from it how do you refresh the data from that static page i would say it depends on what that api is for myself i tend to statically generate the page as much as possible but then if there's specific parts of the page that require that i actually do a lot of client-side rendering of of those individual things and just have a util for that i think it's very okay to use all three of client-side server-side and static site generation and and mix them all together and figure out what is most performant for you um i think client side is is still a perfectly valid way of doing things and and again it depends on on what you want to do because you can just keep regenerating a static site depending on how big your site is um there there's one and let me see if i can find it there's uh i just totally messed up i was looking at my co-worker phil but i just looked up the name phil instead of phil hawksworth which is a very silly thing to do um but he made a very cool site called virtual lollipop and i'm going to paste it in the chat here it's vlolly.net and um he generates the site every single time and it generates really fast like 15 seconds super super fast and it generates a new page every single time and it's really interesting it's okay to continually generate your your pages you just want to kind of decide how much you want to do that and and sometimes i like to save the build time and save the server time and just do client-side rendering things but it's it's really up to you how you want to do that in some next.js projects i've always get the use remove unused javascript in google lighthouse is that because of next that's interesting because next automatic code splitting should be able to remove a lot of that um so i'm not sure if that's because of next and i'm sorry that i can't help you with that um i think we are out of time but thank you so much for for all of your questions i am happy to answer more of them i'm also going to be live streaming in a few hours um and so if you have more questions then um i live stream on thursdays at twitch tv slash kassadoo and so i can answer more questions there if you have them but thank you all so much for your time it was really fun chatting with everyone thank you very much cassidy for being once again at white zone academy for your time and for sharing your knowledge with entire community and for the entire community thank you very much for being here today don't forget to fill out the feedback survey get a chance to win a 30 amazon card it is very important for us and for cassidy as well to help us improve see you in our future events and have a wonderful day everyone thank you thank you so much thank you for having me you

Channel: React-Dojo

Views: 55

Rating: 5 out of 5

Keywords: nextjs, next js tutorial, next js for beginner, next js tailwind css, nextjs blog, next js authentication, react, react js tutorial

Id: nKmV23K1ivU

Length: 56min 9sec (3369 seconds)

Published: Fri Sep 24 2021