Next.js Tutorial for Beginners | Next.js 13

let's learn about next JS the react framework for the web [Music] hello and welcome I'm Dave today we'll get started with the react framework next JS and I'll provide links to all resources in the description below I'll also provide a link for you to join my Discord server where you can discuss web development with other students and you can ask questions that I can answer and receive help from other viewers too I look forward to seeing you there before we go any further in this tutorial I need to clarify what beginners means in the title of this next JS tutorial series it means you're a beginner with next JS but it does not mean you're an absolute beginner in web development these tutorials require that you already know HTML CSS JavaScript and react we'll also be using typescript and Tailwind CSS along the way I have full courses for all of these topics on my YouTube channel and I'll link to each one in the course resources if you don't have this prerequisite knowledge please work through those courses first and then come back to this one when you're ready that will help ensure your success with the prerequisite discussion out of the way the main question is why next JS why do people use it well I asked chat GPT what are the benefits of using xjs and it said nexjs is a popular open source framework for building server-side rendered react applications now we'll get into what all of that means but let's quickly go down these bullet points server side rendering and that means next.js enables the server-side rendering of web pages which can improve website performance by pre-rendering and that's a term that we will get into pre-rendering by pre-rendering pages and sending fully formed HTML to the browser number two is automatic code splitting so it splits the code into smaller chunks which makes it easier to load and more performant SEO optimization SEO stands for search engine optimization and next.js supports that server-side rendering screen and pre-rendering that we talked about and we're also going to talk about static site Generation all of those things really help it perform in search engines better than a traditional react app would faster development next.js includes many features that can speed up development it really has a great developer experience overall and that was the next bullet point and then built-in support for typescript which is definitely something that is required more and more often in the industry and then scalability next.js is built to handle large-scale applications and that's because of features like automatic code splitting caching and support for serverless functions and of course it says overall next JS can help improve website performance streamline development and offer a better experience for both developers and end users so if we go down on the page for nextjs.org we can scroll down and we can see many companies are actually using next JS already and you can can see all of these different brands scroll through that you may be familiar with many of them and if we go down a little bit further they even have a showcase here where it shows some of the many sites and applications built with nexjs so now let's revisit those terms pre-rendering static site generation server side rendering those are things we need to talk about as the benefits of next JS as we get into next JS and so it says by default next JS pre-renders every page and that means that next JS generates HTML for each page in advance instead of having it all done by client-side JavaScript and that's what react does react sends down this huge bundle of JavaScript well sometimes not so huge but a big bundle of JavaScript and then everything is rendered in the client which the client is the browser that's client side but pre-rendering does this on the server and it can result in not only better performance but better search engine optimization and then each generated HTML is associated with minimal JavaScript code instead of a large bundle only the code that is necessary for the page and then when the page is loaded by the browser the JavaScript code runs and makes the page interactive and that process is called hydration so let's quickly look at the two forms of pre-rendering and you'll hear more and more about these as we go but there's static generation which you'll also see referred to as SSG which stands for static site generation and then the HTML is generated at build time and will be reused on each request this is what's recommended it's the most efficient it's built on the server and then it can be sent out and we're going to talk about cdns as well which is a Content delivery Network and that's where the static generation becomes very useful the server side rendering is also very useful but it's not as recommended as the static site generation here the HTML is generated on each request it's still generated from the server not on the client side however both of these can be combined with client-side data fetching as well which lets us create a Hybrid next JS app and we can kind of have the best of both worlds when that happens so why is this static generation so important let's look at what is a CDN I'm on cloudflare now and I'll put this link in the course resources as well but they have a good definition here of how does a CDN work again a Content delivery network is a network of servers linked together with the goal of delivering content as quickly cheaply reliably and securably securely securely as possible and in order to improve speed and connectivity a CDN will place servers at exchange points between different networks so if we have generated our site statically our site can be cached at these different servers and ready to serve faster I'll scroll here where we can see this map which really tells us what's Happening Here we have this origin server right here but there's all of these CDN servers that are blue that we see here and the user just has to go to this CDN server so if we've cached our site out at these other servers they don't have to go all the way here and they get more performance essentially faster load times okay now that we've completed a quick discussion of the benefits of next JS and really what separates it from a traditional react application this react framework has many benefits for us let's go ahead and look at the documentation which they have great docs but let's see it has a link here that says see the new beta docs now this is an important note because next js13 was recently released and there's some major changes and so any previous next JS tutorials before next js13 they've changed things quite a bit so we want to look at the new beta docs and we can do that right here and one thing I like about the beta docs is dark mode it's identifying that I already have dark mode as a preference on my Windows computer and of course then it just provides dark mode already and I really do like that so the first thing that we need to have is node.js and it's not that you have to know node.js already but you do need it installed on your system and it says node.js 16.8 or later well let's go ahead and check the node.js website currently they're on 18.14.0 for long-term support so you could download and install that if you don't have it already because you're going to need at least node.js version 16.8 or later you can see there is support for Mac OS windows and Linux X as well so you should be fine there make sure you have no JS up to date let's scroll down on this page and we see automatic installation and this is what we're going to do it has the dash dash experimental app at the end but that's just because we're still in beta and the app directory and everything that's really new about it is still considered experimental however they are moving forward with that and that's what we want to learn we're going to go ahead and copy this this npx create next app at latest and then dash dash experimental app I'll just copy that with Ctrl C then I'm going to drag this over to the right side of my screen and lock it in there and I'll bring Visual Studio code over here to the left let me get it in that spot there we go hide the file tree I just have an empty folder I'm going to open a terminal window with control in the back tick now I'm going to right click to just paste that in so we have npx create next app at latest experimental app go ahead and press enter and this will install next JS but it's going to ask us a few questions so I'm just going to call this next01 here as the first lesson for our next JS series after that it says would you like to use typescript and yes in the beta docs even the examples are in typescript so I'm going to Arrow over here to yes and then just press enter I could probably just do the y or n it would probably work as well but now that I'm already on yes at eslint I'll go ahead and say yes for that also do I want to use the source directory no I don't I want to use the new app directory so we'll just say no to the source directory import Alias yes we're just going to press enter and go with the default there so now it's going to install the application I'm going to drag this over so we have Visual Studio code in the full screen and go ahead and show that file tree once again because we'll want to look at all of the new files that we get and now we've created our application and we have the directory here so what I really want to do we could CD into this here but I'm just going to close this and I'm going to go to the file menu and I'm going to open folder which would be Ctrl K Ctrl o as well and from there I'm going to open up this next series and there's our next01 open that and now we can see everything that was installed over here in the file tree let's quickly discuss what we see here of course there is a readme file and you could look to see what is provided in here it's just some directions like we have npm run Dev to go ahead and start our application if we want to do that it's going to be on localhost 3000 you could look at the other things here as well after that we have a package Json file now notice we have some scripts here we're interested in the dev script so we would type npm run Dev when we want to start our development environment the build and the start those are things that would be done on the server there's something for lint as well so we're only going to be using this one right here and you can see the dependencies that were automatically added for us here such as typescript and next and eslint all of those things okay after that package Dash lock Json that's something you have probably seen before in react as well then there is a next config file and we'll get into that in the future there is also an eslint Json file and you can see it's already got something in that and we can close out of that too there's the tsconfig.json you should have seen this before if you've used typescript before so nothing really new there but there the file is so we've got a lot of config files now let's talk about the public directory oh and I did skip over the get ignore file and that's of course with Git any file that you want to ignore and some are already listed in here and then there is a grayed out file and that's a file that you should not change and it says no this file should not be edited so do not edit the next Dash env.d.ts file we'll just leave that one alone the public directory though this is where some images are some svgs and an icon file this is where we would put any static resources that we would want and images are a good example of that after that there is a Pages directory and inside of pages is an API folder and inside the API folder is a hello TS file now this would be when we want to request some data and we'll definitely get into this in the future we're not going to right away though but this is the area that we would be using those requests in right there okay then we have our node modules folder which you should be familiar with and then the new app directory and this is where we see our basic Pages now I know this can be confusing because we have a Pages directory but I said it's more for the API here here is where we have the basic page not an index.tsx and that's what we're using here for typescript TSX files but this is the basic page that we'll see once we start our application and then there is some CSS here in a module page.module.css there's also some Global CSS that we have right here and then there is a head.tsx notice it has some meta content in it and we'll discuss how those work with Pages as well and there is a layout.tsx now this is important to note that next JS supports routing which we will be covering very soon so with the react app maybe you've used react router before you won't have to do that with next JS it's already built in so let's go ahead and open a terminal window once again and I'm going to type npm run Dev and we'll start our basic application you can see it starting up and I'm just going to say allow for now and let that go by and then after we've started it up we see all of this information here in the terminal but here is the URL we want so you can press control and then just click to follow that click and it's going to launch that in Chrome and here we have our basic page over here so I could drag this to the left or we could look at this in full screen if we wanted to and I think I will so here we have the full page that has started and this was that page.tsx that we saw inside of the app directory now as cool as this looks let's go ahead and make some changes so I'll drag this back to the right and let's take this back to full screen I'll close the terminal window it will continue to run but let's just get rid of everything that we have here so I'll select everything between the main elements in the jsx returned and we'll delete that and after that I'm just going to put in an H1 and say hello world put that right there and then after that I want to go ahead and drag this once again over here to the left and then for next JS here let me see if I can open the console window so we can see well that doesn't look too great maybe I could dock it somewhere else like at the bottom and then bring this down okay so we we're definitely going to change the page here we can't see a whole lot of it but what I want you to see and I'm going to hide the file tree too I haven't saved this file yet when I save this file you should see that our Dev environment reloads the page quickly I'll save and then we see fast refresh rebuilding and there we have it so when we change our files and our Dev servers running everything updates immediately and now we have our hello world page instead of what we previously had and it happens that fast but you will get this message in here from the hot reloader client as it says okay so you've learned more about what next JS is and why companies are using it and you've learned how to start the basic next JS Dev environment and get your first app going in the next tutorial we'll be looking at pages and layout remember to keep striving for Progress over Perfection and a little progress every day will go a very long way please give this video a like if it's helped you and thank you for watching and subscribing you're helping my channel grow have a great day and let's write more code together very soon

Channel: Dave Gray

Views: 119,490

Keywords: next.js tutorial for beginners, next.js, beginners next.js, next.js tutorial, next 13, next.js 13, next.js 13 tutorial, next.js 13 for beginners, beginners next.js 13, next.js introduction, next.js intro, what is next.js, next.js prerendering, next.js static generation, next.js ssg, next.js ssr, server-side rendering, what are the benefits of next.js, next tutorial for beginners, js, beginners next, nextjs, nextjs beginners, beginners nextjs, next js, next js tutorial

Id: 6h649f2fB9Q

Length: 16min 44sec (1004 seconds)

Published: Fri Feb 17 2023