How to setup Routing with Link - Next JS tutorial

hello my name is Eric I'm a software engineer in this video series I'm challenging myself to slow down break down coding examples and really deep dive into documentation that folks have spent a lot of time and energy on so that people like me and probably you can utilize their library to its fullest extent welcome to documentation Nation low documentation Nation today we're going to be diving into the next JS documentation to start learning this framework if you're not familiar with nexjs it declares itself on nextjs.org as the react framework for production next.js gives you the best developer experience with all the features you need for production hybrid static and server rendering typescript support smart bundling route pre-fetching and more no config needed next.js by mercel bringing the power of full stack to the front end so that's that's pretty interesting right it should make making a full stack application which react a little easier for us to handle I I at this point haven't had the opportunity to use next JS so I'm really excited to dive into this one and learn a little bit more about it building react server components app now make server first the default which is awesome so I'm not going to spend too much time on this little bad boy uh I want to really get into the documentation and get started and there's a learn next.js step by step and earn points I don't know what kind of points we're talking about here but I'm intrigued Let's uh let's go ahead and get started and jump into this create a next JS app to build a complete web application with react from scratch there are many important details you need to consider has to be bundled you need to do production optimizations you might want to statically pre-render some pages for a performance and SEO server side rendering client-side rendering you might have to write some server-side code to connect your react app to your data storage it's something I've done numerous times already so I'm very curious to see how that makes that a little bit easier for us to handle next.js the react framework enter nextjs the react framework next.js provides a solution to all the above problems but more importantly it puts you and your team in the pit of success when building react applications what is the pit of success so we have been linked out to another article here that I'm not going to read through even though most of it just seems like comments but um bit of success just sounds like the opposite of pit of despair so we're there xgs aims to have Best in Class developer experience and many built-in features such as an intuitive page-based routing system with support for dynamic routes so if you've programmed in react you know you if you want to use Dynamic routing or routing in general you want to use react router or something similar unless you're building a single page application in which case no need pre-rendering for both static generation and server-side rendering support on a per page basis automatic code splitting built-in CSS and SAS support API routes or Roots if you prefer to build API endpoints with serverless function about this tutorial this free interactive course will guide you through how to get started with next.js in a tutorial you'll learn nxjs Basics by creating a very simple blog application here's an example of the final result let's go take a look and see what we're going to be building okay we have a landing page with a little summary introduction and then links out the blogs and we can see up here our URL routes to slash post slash I can't tell this is a I guess this is just a specific title right if I go back to the other one it's not like a yeah it's just titles that are here which are nice and there's some information here about static generation and pre-rendering cool we'll keep that open in case we want to refer back to it this tutorial assumes basic knowledge of JavaScript check and react checked if you've never written react code you should go through the official react tutorial first okay so they've got documentation here that links out but I I think I want to go through this tutorial first rather than just documentation and we'll refer back to that if we think we need anything from there let's get started set up first let's make sure that your development environment is ready I do have node.js installed so I'm good and we'll use our own text editor and I'm going to use vs code if anybody needs a node.js tutorial I'm sure there are I know there are tons available if you would prefer to see one from me in the future let me know and I'll make sure I put one together for you to create an xjs app open your terminal CD into the directory you'd like to create the app in and run the following command npx create next app at latest xjs blog all right so we're going to be using their example code probably a starter pack under the hood this uses a tool called create next app bootstraps and XTS app for you uses this template through the example flag yeah let's go ahead and do that so I've already got a folder that I've created here specifically for this project I'm going to just copy this okay if it doesn't work take a look at this page let's take a look at that page oh it's just a little bit slow we're good okay to proceed yes okay after a bit of time we've got this all downloaded and let's see if we can get started here so let's go into the folder that I just set up for us and well again run Dev let's look at this folder before we actually start just blindly following instructions here we see our node modules we've got a Pages folder that has an index public folder with a favicon and an SVG add in some styles Global CSS what's that look like nothing crazy just a little bit of just a small amount of CSS here home.module.css let's look at our index file and here I can see they're importing that CSS file that's make sense and this is just looking like react code to us right except we've got something called Head in here we've got a main section H1 some divs and a footer and then they've got a style object to some kind of at the bottom here so we'll see what all that is about so npm run Dev and let's open this thing up and take a look it's taking a long time this is why I like invite is very fast okay look at this compiled client and service successfully in 33.6 seconds 150 modules and it still has an actually loaded so let's give that another minute to pick up quick review what text you see on this page so far nothing I see the favicon is a little car icon I think there we go welcome the next JS that took a really long time hey we've got welcome to next Js correct good job awesome cool moving on to see a page like this this is a starter template page which shows some helpful information about nexjs let's try to edit this page so I'm gonna explore on this a little bit first before I do anything do these just link out and I so um yeah these definitely just link out to clearly right because all we have is an index here that shows are our links to things over here so nothing too crazy really for us to dive into in the code let's continue editing the pages try editing to start a page make sure the next Js development server is running it is open the index.js with your editor we're there I'm going to close the terminal for now all right so it just wants us to do a quick update from welcome two to learn right so and then save and see the yeah it's just showing us how this is going to update right as we make changes we say oops learn and Save and there it goes not it's not as long as an update this time but I also saw a little icon in the corner that kind of showed us um what was that icon yeah I guess that's the little loading down there that's oh I'm blocking it actually so you can't let's shift me up top here for a second sorry if that's jarring and I just wanna show off that little icon we make another adjustment here and save and there you go in our bottom little corner here we can see that icon for the saving is completed so that's interesting best refresh enabled and you make changes to files next.js automatically applies the changes to the browser which we're used to from other Frameworks so let's continue or live server if you're using that extension talk about creating Pages uh navigate between page well I guess I shouldn't skip over this and I'll go to the bottom you should keep the development server running but if you want to restart it hit Ctrl C to stop the server which if you've used other Frameworks you know you should be familiar with for this point in your terminal if you're not using the integrated terminal in vs code I know there's a number of bootcamp courses out there that continue to use an external or separate terminal server I guess just for visibility purposes really but you've got a terminal within vs code and it's very nice to use but I'm not going to close or cancel this server or Stop This Server because it took forever to start up for us so we'll just continue on navigate between pages so far the next JS app we created only has one page websites and web applications generally have many different pages let's explore how to add more pages to our application yes please create a new page using integrated file system routing let's look at what that is learn how to use the link component to enable client-side navigation between Pages learn about built-in support for code splitting and pre-fetching here's a detailed documentation on that let's open that too just in case we want to refer out to anything I do want to see this first though all right let's bring me to the same thing twice sure did so we're going to keep this open we're not going to read through this just quite yet but we'll refer back to that in a few minutes if we think that is necessary we're continuing we can skip this page all right navigate between pages in xjs a page is a react component exported from a file in the Pages directory so we've got our Pages directory here which is where index lives pages are associated with a route based on their file name for example in development Pages index is the slash route or the your main route and then Pages posts first post is associated with post first post route okay I already have pages so let's create Pages slash posts post JS so it wants us right now to go within our Pages directory make a subdirectory called posts and within that subdirectory we're going to make a first post.js file and it's instructing us to use js.jsx so that's an interesting note all right we're there and let's set up our functional component all right this is no different than react if we're familiar with that and used to that and we're just going to return an H1 which Emmett please help me here we go all right there's our first posts page I don't have any name you must exporting as a default export which we are used to already make sure that development server is running and we can navigate right to it right so let's go do that I'm going to move our there's our page all the way at the end slash posts slash first Dash post and here we go we've navigated to our page without any kind of routing setup which is super nice to just be able to just plug and play with that that's a really simple and easy this is how you can create different pages in xjs simply create a JS file under the Pages directory and the path to the file becomes the URL path that is really nice in a way this is similar to building websites using HTML or PHP files instead of writing HTML you write jsx and use react components let's add a link to the newly added page that we can navigate to it from the home page quick review let's do it if you wanted to add a new route slash author slash me what would the file name be including the directory boy authors slash me.js uh including the main directory Pages slash authors slash me.js right correct good job we did it we're learning this is fun learning is fun like a component when linking between pages on websites use the you know you use the anchor tag in next.js you can use the link component next slash link to link between pages in your application link allows you to do client-side navigation and accepts props they give you better control over the navigation Behavior okay I open this for a second just to see if there's anything interesting in here and I think this is going to walk us through the same basic thing so we'll hold that open just for the time being using link first open pages index so we'll go back to our index file and we need to import this right just like the imported head so we import link from next slash link and then down here we replace our anchor tag with link on both ends I do have a extension that handles that for me and we're changing our href to our just our location for this post slash first post and we're going to link back to home so we're going to do the same kind of thing import link from next slash link we've got our first post we're going to expand this out and I guess we're going to render a bunch of stuff here and we know we're going to need a fragment because we're going to have an H1 and an H2 let's put a fragment there thank you let's get inside my return put that fragment let's put in H2 and we're going to link again what if I do I wonder I'm going to have to do yeah there we go link to within that length this is a prop I guess it's saying it accepts or href just to back to be one page and back to home save that so this is saying same kind of deal we just replaced the anchor tags link and that's easy enough used to require rapping in a Manker tag so if you look at some older code we might expect to see that and now if we go look at what we've got over here just like that it's that easy so let's continue on the link component enables client-side navigation between two pages in the next JS app the client-side navigation means that the page transition happens using JavaScript which is faster than default navigation done by the browser code splitting and pre-fetching next.js does code splitting automatically so each page only loads what's necessary for that page that means when the home page is rendered the code for other pages is not served initially this ensures that the homepage loads even if you have hundreds of pages all right okay I see this is the super interesting part right here in a production build of nexjs whenever link components appear in the browser's viewport next.js automatically prefetches the code for the linked page in the background by the time you click the link the code for the destination page will already be loaded in the background and the page transition will be near instant that is very cool that means we're almost feeling like we're using a single page application that has all the code already loaded in our browser but it's not right so if you've got multiple pages you're gonna pre-load the pages that are available to be clicked from whatever page you're on that's very interesting and we just use outside routing the same way as we typically would with just an anchor Tech awesome quick review a user opens their browser and navigates to your blog.com post slash first post what JavaScript is initially loaded for this page only JavaScript for posts first post is loaded or JavaScript the entire application or should be only that page right assuming no links on there correct good job excellent next lesson we're rocking and rolling over here because we're definitely going on to another section here right and I think doing these in smaller chunks might be nice here okay so we have our basic introduction now to next.js we have learned how to handle uh links and routing and we learned the benefit of links and routing within xjs so we'll pick this up next time with assets metadata and CSS and we'll continue on this little course thank you for joining the long documentation Nation we'll see you soon

Channel: EricWinkDev

Views: 164

Keywords: nextjs, next.js, nextJS, next.JS, documentation, nation, documentation nation, documantation, learn nextjs, how-to, how-to nextjs, tutorial, nextjs tutorial, how to code, programming, react, reactjs

Id: ZdOWFYeKmKs

Length: 19min 17sec (1157 seconds)

Published: Tue Dec 27 2022