So let's start setting up a Next.js project.
You can find all the instructions on that Github page and that is a great place to dive deeper.
As you can see there, Next.js and the latest version at the point of time I'm recording this requires
React 16 which under the hood introduced some breaking changes and which is the version we used throughout the
course.
So we're fine, we'll be using that version here too
and now let's install Next.js, this package with this command. As you see,
you also still installed React and React DOM. Now to run this, you need an empty project
and here I got one loaded in my IDE already,
the only thing I have in here is a gitignore file because I'll be using Git. Now
first of all to be able to run npm commands, we need to put this project under control of npm.
You do this by running npm init, then you are asked a couple of questions which you can simply answer
with yes by just hitting enter.
Once you went through all these questions, you get a package.json file which is used to manage the
dependencies.
I do talk about creating this file in a bit more detail in the module where we create our own project
setup from scratch.
Now we can run the command you saw on the Github page here, npm install --save with these three
packages,
Next, React and React DOM
because Next.js is a library building up on React, it gives you extra features but behind the scenes
or also from a code perspective what you're going to write, it's still all React. Once this command finished
and all these packages are installed in their latest versions,
we can go back to that Github repository to find more instructions.
We should now add this scripts section to package.json,
so let's do this. In the package.json file, we actually have a script section, we can replace it with
the one we just grabbed from our Github file here, so scripts should be added like this.
With that, we can start using it
and now we have that important file system thing
I was talking about. In Next.js, the file system is our main API,
we don't use React router with Next.js to create routes and allow the user to visit /auth/user
and so on,
instead we create folders and files to reflect our URLs in the file system
and Next.js, the package will automatically pass that and use its own internal router to handle all the
heavy lifting.
Now along the way, it pre-renders the content we load as pages on the server, it automatically
code splits, so lazy loads that, all of that out of the box without us configuring anything,
that is why Next is such a great package and could be worth a look in your next project.
A lot of stuff is just working out of the box there at the price of having to keep a certain file structure,
that file structure is mostly about that pages folder,
let's create it. You create it directly in the root folder next to node modules and the other files here,
so there you create a new folder, pages and in there you now create your Javascript files which will
be React components which will hold and export React components and these file names
now define the different paths you have. You can also have a sub-folder like auth there and in there, add for example
user.js, you would reach this file at your domain/auth/user. If you name this is index.js, you
would reach it at /auth. Let's also add an index.js file under the pages folder.
Now we have something like example.com/ and would reach that file and /auth and would reach
that file.
Now let's add a component in both and typically here, you use functional components that don't manage
state, so stateless components but you can also add class-based components with the state keyword or
functional components with the useState hook here,
so let's create a functional one here. I'll name this index page, the name is up to you though and you know
that syntax here where you could receive props return something,
now what I'll do is I'll import React from React,
so just like you learned in this course, that doesn't change because we're still using JSX here,
well not yet but we'll do so in a second and I export index page as a default,
that's important you still need to export this otherwise Next.js can't do anything with that.
So now let's simply add some code here like a div where we say h1, the main page, like this. Now I'll
copy all that code and put it into the other index.js
file, I'll name this auth index page and of course therefore export this constant and there I'll say
the auth index page.
Now let's save that and now let's execute one of the scripts we added, dev.
Now if you run npm run dev, this will spin up a development server, building your application and server
side rendering it, also giving you stuff like hot reloading, so
a really nice development environment. If you now go back to the browser, you can actually load this in a new tab
under http://localhost:3000, there you should see your page and if you now go to /auth, you'll
see the auth index page.
So without us setting up any routing, we can load these two different components as pages and as I said,
these components doesn't have to be functional components,
they could be class-based components too.