Next.js Tutorial #1 - Introduction & Setup

hey gang and welcome to your very first next js tutorial [Music] 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 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 at the way let's get on with the tutorial all right 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 and 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 now from that point onwards the application can behave more like an spa a single page application in the 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 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 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 all right 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 see the 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 hyphen 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 ninjalist in my case 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 and then dot 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 git ignore 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 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 local host 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 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 gonna 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 and generation so anyway that's the project at a glance next we're going to dive into how next handles routing and pages

Channel: The Net Ninja

Views: 129,362

Keywords: next js, next, next tutorial, next js tutorial, nextjs, next.js tutorial, nextjs tutorial, next react, next.js react, next js react, react, react tutorial, ssr, react ssr, react static site, ssg, ssg vs ssr, next.js, tutorial, tutorial for beginners, next.js tutorial for beginners, next.js for beginners

Id: A63UxsQsEbU

Length: 8min 43sec (523 seconds)

Published: Mon Jan 25 2021