Made withNext.jsClip

Next.js Tutorial #1 - Introduction & Setup

N

Net Ninja

Creator on the Next.js channel

Watch on YouTube ↗

377K viewsJan 25, 20218:43 runtime

Learn the fundamentals of Next.js, a powerful React framework for building high-performance, SEO-friendly web applications. This tutorial introduces the core concepts of pre-rendering, including server-side rendering (SSR) and static site generation (SSG), and contrasts them…

Chapters

#nextjs#clip#frameworks

What is Next.js?

Next.js is a React framework for creating pre-rendered websites. It enables developers to build fast, SEO-friendly applications by rendering React components into HTML on the server before they reach the browser.

Core Concepts: Pre-Rendering

Next.js moves the rendering process from the client's browser to the server, which has significant benefits.

Server-Side Rendering (SSR): React components are rendered into HTML pages on the server after a page request is made. The fully-rendered page is then sent to the browser.
Static Site Generation (SSG): Components are rendered into HTML pages at build time. These static files can then be deployed to a CDN for fast delivery.
Benefits over Client-Side Rendering (CSR):
- Improved Performance: Less work is required by the browser, as it receives pre-rendered HTML instead of a blank page and a large JavaScript bundle to process.
- Better SEO: Search engine crawlers can easily index the content because the server returns a fully-rendered, content-rich HTML page.

Note
After the initial load, a Next.js application can behave like a Single-Page Application (SPA), handling routing on the client-side for a smooth user experience.

Getting Started

Important

Prerequisites

A basic to good understanding of React.

Node.js version 10.13 or later installed.

To create a new Next.js project, run the following command in your terminal:

npx create-next-app <project-name>

Project Structure Overview

A new Next.js project includes several important directories:

pages/: This is the most important folder. Each file inside corresponds to a route in the application.
- pages/index.js: The component for the homepage (/).
- pages/_app.js: A root component that wraps all page components. It's used for shared layouts and state.
- pages/api/: Used for creating API endpoints.
public/: For static assets like images, fonts, and favicons.
styles/: Contains CSS files, including support for global styles and CSS Modules.

Development Workflow

Start the development server: Navigate into your project directory and run:
```
npm run dev
```
Preview: The application will be available at http://localhost:3000.
Live Reload: The development server features hot-reloading. Any changes saved to your component files will automatically refresh in the browser.

Tip

Course Files

All source code for this tutorial series is available on GitHub. Each lesson has its own branch for easy reference.

Introduction & Channel Support

Hey gang and welcome to your very first Next.js tutorial. Now just really quickly before we start the tutorial, for those of you who want to support the channel and join the gang officially, you can do so by clicking that join button right here. It's just 99 cents or pence per month, and you get these cool little ninja loyalty badges next to your name in the comments down below when you leave a comment. You can also join by clicking the button right beneath the video if you're watching one now, which I'm guessing you are. It does exactly the same thing. All right, so now that's out of the way, let's get on with the tutorial.

What is Next.js?

Alright then, so what is Next.js and why would we use it?

Well, basically it's a React framework that allows us to create pre-rendered React websites, whether that be via server-side rendering or static site generation. Now, server-side rendering is when React components are rendered into HTML pages on the server after a page request comes from the browser. And static site generation is when components are rendered into HTML pages at build time, so that we can just deploy the web pages and JavaScript bundles to the web.

Next.js allows us to easily do both of these things, meaning that our React components are already rendered into HTML pages by the time they reach the browser.

Benefits of Next.js: Performance & SEO

Now from that point onwards, the application can behave more like an SPA, a single page application, in that all routing can be handled on the client side in the browser. Now in contrast to this, without Next, React renders components in the browser instead, and this is known as client-side rendering.

Now the benefits of server-side rendering and static site generation are that, firstly, it can improve a website's performance because components are pre-rendered, meaning less work in the browser. And secondly, it results in better SEO than traditional single page applications because the response from the server is a fully rendered HTML page rather than just a blank one, which is what would be returned in a regular React application without Next.

So in the eyes of search engine crawlers, it makes our site much more palatable.

Project Overview and Prerequisites

So in this series, I'm going to show you how to use Next to create a website like this. It's a ninja list website which just lists a load of different people, or ninjas if you like, and you can click on these to see information about that ninja. We also have an about page as well. So it's a very simple website, but it is going to teach you all of the basics of Next, things like routing, how to fetch data, etc. And by the end of it, you should be in a good position to make something a bit more complex. I'm also going to show you how to deploy this to the web at the end as well.

Now before you start this course, you should already have at least a basic to good understanding of React. Now if you don't, definitely check out my full React tutorial right here on YouTube first of all. The link is going to be down below. And also, you will need Node.js installed on your computer. You'll need version 10.13 or later installed. So if you don't have that, head to nodejs.org to download a later version right here and install that on your computer first of all.

Accessing the Course Files on GitHub

Also, because I'm a super ninja, I've uploaded all of the course files to this repo right here. It's called next-js-tutorial, so the link to this is going to be down below as well. And each lesson has its own branch right here. So if you want to see the code for lesson four, for example, you select the lesson 4 branch right here and you're going to see all of the code here. So you can download this by going to the code button and then downloading a zip or cloning the repo to your computer, whatever you prefer.

Creating a New Next.js App

Alright then. So now that introduction is all out of the way, let's start by creating a new Next application. Now the easiest way to get started with Next is to use a command called create-next-app, much like create-react-app for making React applications. So I'm going to open up a terminal and I'm going to navigate to a directory that I want to create this. By typing cd, and then we'll go into documents, and then we'll cd into tuts after that.

So I'm going to create my project in this folder. Now to do this, I'm going to use npx which allows us to run code directly from the internet instead of installing packages on our computer first of all. And the code I want to run is the create-next-app command, and then after that I'm going to call my project ninja-list, but you can call it what you want. So then press enter and it's going to boilerplate a new Next application for us called ninja-list in my case.

Exploring the Project Structure

All right then, so once that's done I'm going to navigate into that new directory it's created. So cd ninja-list, press enter, and then I want to open this project up in Visual Studio Code. And to do that, I'm going to type code . to open it up in this directory, and we can see that right here. And by the way, you can use whatever text editor you wish, it doesn't have to be VS Code. So this right here my friend is the starter Next project that that command has generated for us.

So I just wanted to give you a quick walkthrough of all of the different folders and files we have in this starter project so you've got a rough idea of what they are. So first of all, we have the node_modules at the top, that's where all the dependencies are stored. This pages folder, this is where all of our different page components are going to be created. The idea being that every page in Next has its own components, its own React components.

Now, at the minute, the only page component we have is this index component and this is going to be for the home page. And we see we have all of this content inside this component right here. We'll see what that looks like in a browser shortly. But we also have this _app.js file, and this is kind of like the root component and all of our different page components are rendered right here. So all of our pages go in there.

We also have this api folder as well, which is for API endpoints. After the pages we have this public folder. This is where all of our public assets like images go. We'll see that later on. Then down here we have a styles folder for different CSS files, including CSS modules. And again, I'm going to talk about those later on. We also have this .gitignore file for version control and we have the package files to keep track of our different dependencies. And we also have these scripts right here. So we have this one that we're going to use in a second which is dev and that runs next dev.

Running the Development Server

And what that does is spin up a local development server for us, so we can preview our application in a browser. We have a build command as well right here but we're not going to use that just yet. So let me run this one right here, this dev command. So to do that, I'm going to say npm run and then the name of the command which is dev. Press enter. Like I said, it spins up a local development server for us.

Oops, it's not allowed us to do that. So let me see why. I'm going to scroll up and it says port 3000 is already in use. So it turns out that I had something else running on port 3000 on my computer. I've cancelled that now, and I'm going to run this command again: npm run dev. And now it should spin up a local development server so we can preview the website now at this address right here: localhost port 3000. So I'm going to control-click this to open it up in a browser and we can see the website over here.

Editing the Homepage & Pre-rendering Explained

So this content right here is all created inside that component, that index component, which we see over here. So this is the index page.

Now, if I was to get rid of all of this stuff right here, let me just delete it all and I'm going to replace it with just a div, and then inside that div we're going to do an h1 that says 'Home Page' or something like that. I'm going to save it. It's going to automatically refresh in the browser and now we can see this new content.

Now remember, this component is being pre-rendered before it even reaches the browser. During development, this is done via server-side rendering. So the server renders the component then sends the HTML file to the browser and that happens on each page request from the browser. So if I type in a different URL, it will look for the component for that URL, pre-render it, and send it to the browser. Later on in the course though, we'll see how to have the pages rendered at build time for production, a process called static site generation.

So anyway, that's the project at a glance. Next we're going to dive into how Next handles routing and pages.