Made withNext.jsClip

Next.js 13 Crash Course Tutorial #1 - Introduction & New Features

N

Net Ninja

Creator on the Next.js channel

Watch on YouTube ↗

182K viewsAug 10, 202314:44 runtime

This crash course introduces the core concepts and new features of Next.js 13, focusing on the modern `app` directory approach. Learn about the fundamental differences between server components and client components, and when to use each for better performance. The tutorial…

Chapters

#nextjs#clip#frameworks

What is Next.js?

Next.js is a meta-framework built on top of React, providing a robust set of features for building web applications. It enhances React with capabilities that are essential for production-grade applications.

Key features include:

File-based Routing: Simple page and route creation based on the file system.
Rendering Strategies: Support for Server-Side Rendering (SSR) and Static Site Generation (SSG).
API Routes: Ability to create serverless API endpoints within your Next.js application.
Server Components: A new paradigm for rendering components on the server by default, reducing client-side JavaScript.

Note
A basic understanding of React (components, hooks like useState, props) is recommended before starting this course.

Core New Features in Next.js 13

Next.js 13 introduces a new way of building applications, primarily centered around the app directory.

Server Components vs. Client Components

By default, components inside the app directory are Server Components. They are rendered entirely on the server and do not ship JavaScript to the client, leading to better performance.
Use cases for Server Components:
- Fetching data.
- Accessing sensitive information (API keys, tokens).
- Using large dependencies without impacting the client bundle size.
Client Components are used for interactivity. You need to explicitly mark a component as a client component with the "use client"; directive.
- Use cases for Client Components:
  - Using state (useState) and effects (useEffect).
  - Handling browser events (e.g., onClick).
  - Using the client-side router.

The `app` Directory

The new recommended way to structure projects, enabling features like Server Components and layouts.
All pages, components, route handlers, and styles live inside this directory.
It co-exists with the older pages directory, but this course focuses on the app directory.

Other Key Improvements

Simplified Data Fetching: Server Components can be async functions, allowing you to use await directly for data fetching.
UI Streaming: Use React Suspense to stream parts of your UI to the browser as they become ready, preventing long data fetches from blocking the entire page.
New Components: An improved <Image> component, <Link> component, and a new Font system for optimizing custom fonts.
Server Actions & Route Handlers: Modern ways to handle server-side logic and create API endpoints.

Project Setup

To create a new project with a consistent version for this tutorial, use the following command:

npx [email protected] <project-name>

Important
Locking the version to 13.4.9 ensures your project behaves exactly as shown in the video, avoiding potential issues from newer updates.

Key configuration choices during setup:

TypeScript: No
ESLint: Yes
Tailwind CSS: Yes
src Directory: No
App Router: Yes

Project Structure & Cleanup

After creation, your project contains several key folders and files:

app/: The core of your application.
- layout.jsx: The root layout that wraps all pages.
- page.jsx: The entry point for a route (e.g., the homepage).
- globals.css: For global styles and Tailwind CSS directives.
public/: For static assets like images.

To start, the boilerplate code is removed from app/page.jsx and most styles are cleared from app/globals.css, leaving only the necessary Tailwind directives.

Tip
It's a good convention to rename .js files containing JSX to .jsx. This helps quickly identify which files are React components.

Welcome to the Next.js 13 Crash Course

All right then, so I am a little bit late to the Next.js 13 party, but we're here now, which is the most important thing. And this series is going to be a crash course all about this newer version of Next.js and the new way that we work with it, which I think is really nice. And that all heavily leans on this new app directory which Next 13 gives to us to put all of our application pages, components, route handlers, and styles inside of. So we'll be looking at all of that and using it to build a small project that's going to cover all of the basics of this new approach and some more advanced things as well.

Now for this crash course, I will be using JavaScript because I wanted to keep the intro barrier low for those that don't know or use TypeScript. But there will also be a project build tutorial coming very soon on this channel that uses TypeScript with Next.js as well, so that way everyone's happy.

And by the way, this crash course right here is actually the first chapter of my Next.js masterclass on Net Ninja Pro. So if you want to take your Next.js skills to the next level and build out a more advanced application using API routes, a database and authentication, then definitely check out that course. I will leave the link to that video, or that course rather, down below this video. Anyway, let's take a look at what Next.js is now and how this newer version is different from previous versions.

What Is Next.js and Who Is This For?

So for those completely new to Next.js, it's what's known as a meta framework, and it allows us to easily make web applications using React. And it comes with a bunch of features that React on its own doesn't include, like a file-based routing system that makes it incredibly simple to make pages and routes, server-side rendering and pre-rendering of components, static site generation, and also the ability to create API routes, and also server components now out of the box so you can run server code as well as do things like interact with a database directly. So it's a really powerful framework with lots of nice features and it provides a pretty nice developer experience as well.

Now don't worry if some of those features like server-side rendering or static site generation or server components goes over your head at the minute. I'm going to be talking about all of those things more as we go through the course. For now, I just wanted to paint a general picture of what Next.js can do for us. What I would say though is before you go any further in this course, I would expect you already to have a basic understanding of React. So you already know what a React component is, you understand some React hooks like useState or something like that, and you know how to use props and event handlers.

Server Components vs. Client Components

Now if you don't know any of that, then I would highly recommend you watch my React course first of all, and I'll leave a link to that down below the video. So then, like I said, we're going to be using the latest version of Next.js in this series, version 13, which comes with a few new features. And one of those features is the ability to use server components.

Now in previous major versions of Next.js, any components that you made were essentially all client components, meaning that we had to ship additional JavaScript for those components to the client, the browser, for them to be hydrated. And by hydrated, I mean we had to run that additional JavaScript in the browser to make the page interactive. But in version 13 of Next.js, we now have access to server components by default. And server components are just components that live on and are fully rendered on the server. And then they don't need to be hydrated in the browser at all. And that means that the overall size of the JavaScript bundle sent to the browser is much less, leading to hopefully a better performance in the browser.

Now that is not to say that you won't be using client components in Next.js 13. You absolutely will be doing for any component that requires things like state, client effects, the client router, or interactive events like click events. You will be using client components for, but for components that don't need that, you'll probably be using server components to reduce the JavaScript bundle size and increase performance in the browser. So what kind of things would we use server components for?

Well, we could use them to fetch data, which would then show in the components. We could use them when we need to use sensitive information like API keys and access tokens because they'll be hidden away from the front end that way. And we can also use them when we need to use large dependencies for components to then reduce the amount of client-side JavaScript we need for them.

So there's a few benefits to using them, but it does mean that you need to think a little bit more about how you're structuring your application and deciding which components need to be client components and which ones need to be server components. Now hopefully that's something that you're going to pick up and kind of get used to as we work through the course, but I will also spend a whole video later on discussing why, how, and when we'd use client components or server components.

Overview of New Next.js 13 Features

So anyway, that's the first new feature of Next.js 13: server components. Second one is that we can use this new app directory now to put all of our pages and components inside of, instead of the older pages directory. And it's inside this app directory that we can make client components and server components, whereas in the older pages directory from previous versions, we'd just be using client components as standard. But the new app directory supports server components out of the box.

Now the way we make routes and pages is a little bit different inside this app directory, but we're going to get into that later on. But essentially, this new app directory gives us quite a different way to make and structure our applications, and it supports some of the newer features. Now you can still use the pages directory in Next 13, they've not gotten rid of it or anything, but for the purpose of this course, we're going to be using the newer app directory instead to take advantage of its newer features.

Another addition is the ability to stream content to the browser using suspense boundaries in pages. So say for example, in one section of a page we show some data which needs to be fetched on the server. Well, instead of showing a loading message for the entire page whilst the data loads, we can now serve up the rest of the page first of all, and then only show a loading message in the single sub-component which is responsible for fetching and showing that data. And this way we're not blocking the rest of the page from reaching the browser whilst that fetch is ongoing.

Now speaking of data fetching, in Next 13 we have a really simplified way to fetch data in server components, in that they can now be declared as async functions, meaning that we can use await directly inside them. And therefore easily consume any promise-based APIs, which makes it really, really simple to fetch data and just inject it into a component on the server. And on top of all this, there's a few smaller updates and new improved tags or components. So we've got a new image component, a new link component, and we have a brand new font system for bringing in and optimizing any kind of custom fonts we have. Server actions, which are basically functions that run on a server but that you can directly create and call within components. And then there's also a new way to structure API routes as well with something called route handlers. So there's loads of new additions and changes to the framework and we're going to cover a lot of them in this course.

Setup Prerequisites and Course Files

Now before you try making a website with Next.js, you need to make sure you have Node.js installed on your computer first of all. And you can get that from nodejs.org. Just click on this button right here to download the current version. And you don't need to really know how to use Node.js or make node applications, you just need it installed on your computer so that you can run and build your applications on your computer.

I've also created course files for this entire course as well, which you can find at this GitHub repo, Next.js Masterclass. The link to this repo is going to be down below the video. Now every lesson in this course has its own branch in the repo. So if you want to see or download the code for a specific lesson you need to select that lesson from the branch dropdown and then you can browse the code right here or download the code for that lesson by hitting the green code button and downloading a zip folder. And now let's go ahead and make our first Next.js project.

Creating a New Next.js 13 Project

So I'm just on the Next documentation over here, and I want to mention one thing before we get started and create a new project. And that's this little thing over here in the top left. So there's two options: we can use the app router, and also use the pages router. So this is two separate parts of the documentation. Now all the new stuff is inside the app router section, that's the stuff we're going to be focusing on, all the next js13 stuff, and all the pages router stuff is all the older stuff before Next.js 13. So we're going to be using this, I just want you to bear that in mind.

All right, so this is how we create a new Next.js application using npx create-next-app and then @latest, but we're not going to use @latest. We're going to lock in a specific version, and that's so that your code is going to be predictable. When you're writing the same stuff as mine, it's going to be exactly the same as mine, otherwise there might be small changes and the code might be slightly different. Okay, but this is the command that we're going to use right here, create next app.

So let's copy that, head to the desktop, then open up a terminal and I'm going to paste that in and get rid of latest and instead we're going to use version 13.4.9 and then press enter. Okay, so we need to give this project a name, so I'm going to call this Gojo-helpdesk, but you can call it whatever you want, doesn't matter. We're not going to use TypeScript. Would you like to use ESLint? Yes. Tailwind? Yes, we want to use Tailwind. The Source directory, well, that's something that typically we would use for next applications in older versions. We don't have to, everything goes in the app folder. So I'm going to say no for this, but you can choose yes if you wish, but I'm going to select no. And then the new app router? Yes, we want to use that. And then you want to customize the default import alias? No, I don't want to do that.

All right, and now that's created, we can CD into the new project directory, and then we can open that up in VS code by typing code and then full stop. And then this right here my friends is our new starter project.

Exploring the New Project Structure

All right then. So before we start playing around with any code and actually making a website, let's have a little look at the starter project we just generated and all the different folders and files in the file tree over here. So the node_modules folder is for all the dependencies that get installed for the project or any future dependencies that we install for the project. And it's not really something we need to focus on too much.

The public folder is for any files that we want to make public on the website. So things like images or other static assets, and they'd be made available at the root of the domain. So it would be yoursite.com forward slash and then whatever the file name is inside the public folder. The app folder is where all the application code goes, like the pages, components, style sheets, and route handlers. And this is where you'll be doing about 99% of your work. You can see already that we have a few files in here which we'll come back to in a minute.

And then down here we've got some config files for things like Next itself, Tailwind, etc., as well as our package files too. So obviously we're going to be diving into all of this a little bit more as we go through the course. But for now, I just want to kind of view this starter in the browser. And to do that, we can open up the terminal, and we can type npm run dev and that's going to spin up a local dev server on localhost port 3000 so that we can preview this in a browser. And it looks something like this. So this is the starter project that Next.js creates for us when we use create-next-app, and all of this content is being driven by the page file that we saw in the app folder, and also the layout file as well. So let's go back and have a little look at those.

Cleaning Up the Boilerplate Code

So inside the app folder, we can see we have these different folders. We've got a global.css file which we'll take a look at shortly. We have the favicon, layout file, and the page.js file. Now the layout file wraps all of our different pages. We're going to talk about layouts later on, but most of the content is being driven by this page.js file. So you can see that this is just a React component right here. We are importing a Next component called image and it's being used down here somewhere in the template right here. What I want to do is actually delete all of this template that comes along for the ride when we make a new application.

So let's get rid of all of that right here. And I'm going to get rid of all of these class names. And these class names, by the way, are Tailwind classes which came pre-installed when we made this project because remember when we made the project, we said yes, we would like to use Tailwind. And when we selected that, it installed Tailwind for us and gave us this config file. And then also in the global CSS file, it used these directives which we need as well. So I'm going to get rid of all these classes like so. And inside here, I'm just going to do an H2 that says "Dashboard". So that's going to be our homepage, the dashboard.

So I'm going to save that. I'm going to get rid of this import as well because we don't need that at the minute, and we'll scoot this up here. So a dead simple home component now for the home page. What I am going to do also is I'm going to rename the extensions of these files because currently, the JavaScript files are .js. What I'd like to do is rename them to .jsx, and that's just a little convention that I like to follow because at a glance, I can see that these are then components rather than just standard JavaScript files. I know that there's going to be a template in here like this, but you don't have to do that if you don't want to. All right.

So now what I'm going to do is head to the globals.css file and I'm actually going to delete all of these different styles that came along for the ride as well because we don't need any of those. That was just for the starter project. However, we are going to keep these three directives so that we can use Tailwind in the future. All right, so now we've changed that page.jsx file, it should look totally different in the browser now. All right then, so that's all looking good now, well not good, but we can see those changes that we made in the browser at least, which is good. Everything's working as it should so far. So then, now we've got a Next.js site up and running. In the next lesson, before we start coding any components and making any more pages, I want to talk a little bit about how Next works to serve up content. And by that, I mean I want to talk a little bit more about static site generation, the server-side rendering. So that's coming in the next lesson.