Next.JS
Next.js Tutorial #1 - Introduction & Setup
Next js is a react framework that allows us to create pre-rendered react websites. It is a
framework that can be used via server-side rendering or static site generation. In this series i
'm going to show you how to use next to create a simple ninja list website. Before you start
this course you should already have at least a basic to good understanding of react now if
you do n't definitely check out my full react tutorial right here on youtube. You will need
node. js installed on your computer you 'll need version 10. 13 or later installed. 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. Next 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.
We also have this app. js file and this is kind of like the root component. All of our pages go
in the pages folder and we have this public folder.
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 gon na 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.
Next.js Tutorial #2 - Pages & Routes
Each page component has its own file inside the pages folder so the file name and location
of each page component is tied to the route for that particular page for example if i create a
new file inside this called about. js then next we 'll automatically create a route forward slash
about which is the name of the file to serve up this components so we create a react
component for this page. For example i could create page components inside here and let 's
do one called test. js and we 'll create a stateless functional component for this called test.
Then inside here i'm just going to do a div and then inside that an h1 that says test like so
and save it. Next js generates routes automatically for these pages.
Next.js Tutorial #3 - Adding Other Components
In next you can have dropping components that are not page components so things like a
navbar component or a contact form component which we can then reuse in multiple
different page components if we need to. These dropping components we do not place
inside the pages folder we create them somewhere else and i 'm going to create a new
folder in the project root. React components are not page components but instead are
dropped in to page components and that can be reused we could reuse those components
in multiple different page components if we wanted to and remember we do n't create those
reusable dropping components inside the pages folder we create them in a separate folder
somewhere else in the project structure.
Next.js Tutorial #4 - Linking Between Pages
The way we do this in next applications is by using a special components called the link
component. The link component adds the ability to do client-side navigation in the browser
meaning that different pages are loaded in via javascript and not new html page requests to
the server so it results in a much quicker website experience when going between pages. By
default next automatically code splits our application so the only the javascript code that 's
Next.js Tutorial #1 - Introduction & Setup
Next js is a react framework that allows us to create pre-rendered react websites. It is a
framework that can be used via server-side rendering or static site generation. In this series i
'm going to show you how to use next to create a simple ninja list website. Before you start
this course you should already have at least a basic to good understanding of react now if
you do n't definitely check out my full react tutorial right here on youtube. You will need
node. js installed on your computer you 'll need version 10. 13 or later installed. 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. Next 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.
We also have this app. js file and this is kind of like the root component. All of our pages go
in the pages folder and we have this public folder.
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 gon na 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.
Next.js Tutorial #2 - Pages & Routes
Each page component has its own file inside the pages folder so the file name and location
of each page component is tied to the route for that particular page for example if i create a
new file inside this called about. js then next we 'll automatically create a route forward slash
about which is the name of the file to serve up this components so we create a react
component for this page. For example i could create page components inside here and let 's
do one called test. js and we 'll create a stateless functional component for this called test.
Then inside here i'm just going to do a div and then inside that an h1 that says test like so
and save it. Next js generates routes automatically for these pages.
Next.js Tutorial #3 - Adding Other Components
In next you can have dropping components that are not page components so things like a
navbar component or a contact form component which we can then reuse in multiple
different page components if we need to. These dropping components we do not place
inside the pages folder we create them somewhere else and i 'm going to create a new
folder in the project root. React components are not page components but instead are
dropped in to page components and that can be reused we could reuse those components
in multiple different page components if we wanted to and remember we do n't create those
reusable dropping components inside the pages folder we create them in a separate folder
somewhere else in the project structure.
Next.js Tutorial #4 - Linking Between Pages
The way we do this in next applications is by using a special components called the link
component. The link component adds the ability to do client-side navigation in the browser
meaning that different pages are loaded in via javascript and not new html page requests to
the server so it results in a much quicker website experience when going between pages. By
default next automatically code splits our application so the only the javascript code that 's
