Next.js Tutorial for Beginners | Next.js 13

Introduction & Prerequisites

Let's learn about Next.js, the React framework for the web.

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.

The Core Benefits of Using Next.js

With the prerequisite discussion out of the way, the main question is, why Next.js? Why do people use it?

Well, I asked ChatGPT, "What are the benefits of using Next.js?" and it said Next.js 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:

1. Server-side rendering: Next.js enables the server-side rendering of web pages, which can improve website performance by pre-rendering. That's a term that we will get into, pre-rendering. By pre-rendering pages and sending fully formed HTML to the browser.
2. Automatic code splitting: It splits the code into smaller chunks, which makes it easier to load and more performant.
3. SEO optimization: SEO stands for search engine optimization, and Next.js supports that. Server-side rendering 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.
4. 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.
5. Built-in support for TypeScript, which is definitely something that is required more and more often in the industry.
6. 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 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 Next.js.

Pre-rendering Demystified: SSG vs. SSR

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.

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.

How CDNs Boost Performance

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 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.

Navigating the Next.js 13 Beta Docs

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.js 13 was recently released, and there's some major changes. And so any previous Next.js tutorials before Next.js 13, 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 macOS, Windows, and Linux as well, so you should be fine there. Make sure you have Node.js up to date.

Setting Up Your First Next.js 13 Project

Let's scroll down on this page and we see automatic installation. And this is what we're going to do. It has the --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@latest --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 and the backtick. Now I'm going to right-click to just paste that in. So we have npx create-next-app@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 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.

Exploring the New App Directory Structure

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-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 .gitignore 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, 'Note: this file should not be edited.' So do not edit the next-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 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 a React app, maybe you've used React Router before; you won't have to do that with Next.js, it's already built in.

Running the Dev Server & Hot Reloading

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'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 server's 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.

Conclusion & Next Steps

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.