Next.js Tutorial - Part 1 | Router for Beginners

hello YouTube my name is Bruno and today we are going to talk about server-side rendering using Next.js one of the first questions that you may have kiss why do we even need server-side rendering isn't create react up good enough well it is if you don't care about SEO search engine optimization but if you start to care about dead or if you start to care about the fact that your user will see a wide screen or a blank screen for the first three to four seconds when your application reloads well you probably want to consider server-side rendering because your user we left immediately something to see on the screen that's called a fast first meaningful paint or first content full point if you want to know more about those subjects this blog post from Google is quite good so you can read them through and understand quite clearly what those subjects are okay in order for us to start let's come to our console and we have create-next-app and this is really similar to create react up the only difference is that we will create a server-side rendering application so for me the name of that project will be YouTube-2020-feb -nextjs, now it will start to install react, react-dom and next itself it will take roughly three to four minutes in my network so I will just fast forward this for you now that it finished we can see that next.js has printed some helpful messages for example it teaches us how to run our application in dev mode how to build and run our application in production mode for example. With that in mind, we will go inside our application folder and open that with our editor and you will see that next created three folders for us one which is the public folder and this is the folder where we are for example our favicon okay and then we have two more folders one called component and another one called pages so we can come here and just delete them okay and you are probably asking why are we deleting them well because I want to show you completely from scratch how you can create routing in an XJS and for that let's create by calling source to one of our folders and now we will create another folder called pages ok and this name is a configuration from next.js every single file you put inside pages will become a route ok so this is a filesystem by its route contrary to for example react router where you have the switches and things like that in here it will go by the file system so for example if we create a file called index dot JSP file export function index ok and we do return h1 index page ok in next.js we have just one simple rule here which is the component we export needs to be a default component and so you have two options or you put it here ok or you do export default of index I prefer the first one just because it's simpler but you can use the second one if you prefer ok so creating this you can also notice that I don't need to have import react from react, because next.js is using bubble to put that for us automatically so we don't need to repeat ourselves over and over again now let's use the configuration that next put here so npm run dev so let's just do that it will start our dev server and we can validate if this route here will be our index folder here or not so let's just open our browser ok and to localhost 3000 for example ok and 3000 is the default port from next.js and we can see yes we have the index page here so going back to our editor let's create just another static route and let's say that this static route is for example details oops not be files details dot J s okay so let's do exactly the same thing export default function details ok return h2 details ok and as you may imagine now instead of being the root of our URL it will be slash details so let's go back to our browser and let's do slash details and now we will have details page okay one last static routes before we go to dynamic routes because as you can see static routes are quite easy so let's say that we have a page where we have not car but we have for example vehicle and let's say that we have a person named in this case it will be for example my name ok so let's do export default oops not be told default function Bruno for example okay let's do return a div lot of if let's say h2 because that way I don't need to zoom my browser for you to see and I will say Bruno Skaar okay Bruno Skaar we save that one and now as you may imagine we will have slash vehicle slash Bruno okay so it's quite easy for us to do routing in a next.js okay and this one is there so static routing is just a breeze but that's probably not as useful as it could be the useful thing is for us to receive instead of vehicle we can have a car or a bike or an airplane whatever Bruno Hans okay so let's say that instead of receiving a completely static a completely static name that vehicle we put these square brackets and those square brackets are telling next.js that bit is a variable called vehicle in our URL and it's dynamic it will change so let's do the same thing here instead of calling it Bruno let's call it person okay so let's also this one just for consistency oops person this is just for consistency okay and then Bruno is still here but I will change it in a second so if we go to our browser and we say vehicle Bruno or if we say car John we should go to the exact same page because we have a dynamic routing now okay now from this dynamic routing how can I read the parameters from the URL it's easy as well so let's do import use router from next.js router okay so this is just a react hug so we can do router equals to use router okay and just for simplicity let's say that we have router and router as something called query so all the parameters that we are having for example vehicle and person will be inside this query okay just to fully right then let's go to our browser let me open the development tools and now you can see that vehicle is car as you can see in the first parameter and the person is joined so if I do instead of join if I do Bruno for example after the browser refreshes I can see that the vehicle is still car but the person is now Bruno okay so we can already start to update our our application here so instead of being Bruno we can say query that person so this is the person's car and because we don't have only cars we can already do this dot vehicle okay we can delete our console.log because it's no longer needed okay and let me just show you one more thing about these routing before we go to navigate to these pages to the navigation to the links okay the anchor tags so if i refresh here okay you will see that is Bruno's car okay let's just say John and let's say that's an airplane for example okay so John's airplane it's there I delete this console.log but I shouldn't because I want to show one more thing here so if I come here and I have query parameters so for example query one equals two Monica which is my girlfriend so we can say that now the query one as Monica but if I say something like ant query one equals to someone else someone else ok now we can see that we have an array in query ok so we received Monica and someone else well this is good right so if we have more than one we will receive an array if we just have one we will receive just the single property so this is quite useful for us right going back here we mastered the routing in next.js so the thing we need now is to navigate to these pages we created because we are just going to our browser inputting the URLs there no user will be doing that right so in order to navigate for example from details to our person let's just remove these and say that we have a link ok and oops not like that let's just import because we are using Java Script the next/link whoops these will probably look similar if you did react router so we will have navigated to Bruno's car ok and now you are probably tempted to do one of two things and both will not work as you may expect probably doing car slash Bruno Wright is one of the options that you will probably do and the other one will be to do something like this ok none of them will work and I will just show you what happens ok so let's just open our browser again and go to our details page ok and now let's see what's happening I have dead URL here sorry that anchor there and that Iker Texas car Bruno so when I click I should just navigate there but look at what will happen here and you will see that it will be a full page reload okay let me click you see we completely fully reloaded that page that's not what we want by any means we want a spa single page application right we want to navigate and the router to do that transition okay so what we can do here in next is there is an "as" parameter here and the S parameter in reality will have what you are used to pass to an edge ref and the edge ref we left the template of your routing so if you come back to our pages folder the template of our routing will be vehicle slash person so we will do the square brackets don't forget the square bracket okay and person if I don't put these square brackets for example see what happens we will have a problem going back to our browser did it refresh we can force the refresh just to make sure and now when we click nothing happens okay and you can see that the console is even triggering some errors okay and the reason is because next can't match that template the edge ref template to any route in the system right so let's put whoops wrong place let's put the square brackets back and now we have dead template matching exactly what we have here so it should just work so let's just refresh go back to our elements just for you to see that the page it doesn't have a full refresh or a full reload and clicking here as you see the only thing that changed was the body there was not a full reload next router took care of it so that's exactly what we wanted the last thing that I think we may need from the next router is for us to do dynamic routing even though this is not from next this is our code but it's probably something that you may be asking so let me just create people it's an array of people and we will have a V which is the vehicle let's say car and we will have name which is the person's name so let's have three people it's just good enough ok so we will have oops our bike and airplane good enough right Bruno John and Mick I don't know if we pronounce it Mick or Mike whatever Mick for now so in here we need to just change this so we will have loops we will have instead of having a normal string we will have our famous backwards okay so string templates and here we will just do the following so people oops people dot map and now we will receive the element ok and from that element we are going to return this bit ok and so let's keep e and he let's put a dot V which is the vehicle and in the name let's put dollar e dot 9 ok we can also change this here because it makes sense for us to change this here so a that name and a dot vehicle ok and now we will have completely dynamic a completely dynamic routing system right so imagine that you were receiving this from an API endpoint or some other place so you can now navigate dynamically and the only thing you need to do is to have some string literals for sting templates I never know how it's called but now if we go to details again you will see that we have 3 URLs even though they look bad let's just make them look better before we click in them so let's just put for example I did just to force them to go to the next page ok let's delete this door ok now they are in different pages so we can you get to Bruno's car we can navigate to John's bike and we can navigate to mix airplane everything you need from routing I think it's here in this bit right so by now you should have a good understanding how the next j/s rotor works I should just warn you for one last thing if you remember I told you that every single file you have inside pages will be a route to the outside so imagine you have these a unit test for index dot spec Duchesse so these specs are usually files that we want to keep to ourselves we don't want to open a route out of it right but if you come to our page now and we call it index dot spec now that thing is an open road even though it will file but it's an open route if you don't mind about this then you are good to go but if you care about this usually what I do is all my components ok that should be exposed in routes and know about the router so we do the Const rotor equals to use router I usually put them inside a containers folder so let's say that we will do that only for the index let's call it home page on page docks back sorry dot J's and let's do export function on page and return h1 as hello ok so this is our home page and in order for us to use our home page we will come here and we will do import on page from on Tanners oops and Bruno container slash on page ok now we just need to export it as default export default home page ok so doing that now our index folder is now our home page and I can now come here at the unit tests I want or even having any helper functions and they will not be exposed in my pages so my pages will become just the routing nothing else okay so we can delete this one from here because we already have an on page what spec Dutch yes and it even has the benefit of if you want to use the same component in more than one route for example imagine that you want your clients to go to example calm and example.com slash on page and you want to show exactly the same thing you don't want to redirect you just want to show the exact same thing so you can come here on page dot je s and so we can come here and do the following so now going back we will have an on page here okay on page here okay so with this on page you are just fine everything will just work the the router for me it's it's quite easy in XJS okay it's super easy for you to add new route to check the parameters from routes it's super super easy so next week we will take care of these synchronous operations in next year's for example doing HTTP calls in your server rendering that component and sending that component back to the client or the client your browser okay so if you want to watch the second part of this tutorial please subscribe to the channel and I hope to see you next week bye bye

Channel: Bruno Antunes

Views: 84,343

Keywords: javascript, react, next.js, React, ReactJS, Reactjs, ReactJS Tutorial, ReactJS Tutorial for Beginners, Next.js Tutorial, Nextjs Tutorial, Nextjs for beginners, React next, React Next.js, React nextjs, react next js, server side rendering, ssr, react server-side rendering, react ssr, next ssr, next router, react router, react routing, next.js router, learn javascript, javascript tutorial for beginners, javascript for beginners

Id: 7J4iL1HDshQ

Length: 19min 15sec (1155 seconds)

Published: Mon Feb 17 2020

Reddit Comments

[u/prshnt]

Thank you. I really needed video about nextjs new router method. Also, can you help with routing for amp and amp implementation in Nextjs.

[u/bmvantunes]

The second part of the tutorial is now available: Next.js Tutorial - Part 2 | Fetch Data using getInitialProps

https://www.youtube.com/watch?v=Os3JZc2CtwY&feature=share

[u/bmvantunes]

Part 3 of the tutorial about TypeScript Migration is now available: https://www.youtube.com/watch?v=v3lI29trIN8