So now that we know that NextJS
is pretty awesome and gives us a couple of advantages,
it's time to get our hands dirty
and create a new Next project.
And for that, you can visit the official website,
nextjs.org, and on there you'll find this command
that can be executed to create new Next projects.
Though I will say right away that attached to this lecture
and to many other lectures throughout this course,
I provide a starting snapshot
that actually uses CodeSandbox,
so that you can follow along with this course
and learn NextJS without installing anything on your system,
because maybe you're in an environment
where you can't install software on your system
or you simply don't want to.
Well, in that case, you don't have to.
You can simply use that CodeSandbox starting snapshot.
Now, if you wanna set up a NextJS project
locally on your system, that's the command to run.
And since that command, just like NextJS itself,
will use Node.js under the hood,
you should therefore install that on your system.
So, download and install Node.js,
for example, this LTS version.
Now with that installed, you can copy that command
and then run it in your default terminal or command prompt.
Just make sure that before running it,
you navigate into a folder
where you wanna create your new Next project.
You can then hit Enter,
and you'll then be asked a couple of questions,
like for example, what the name of this project should be,
and here I'll simply pick first-app.
Now, with that chosen,
you'll then be asked a couple of other questions.
Like for example, whether you want to use TypeScript or not.
And whilst TypeScript is amazing
and I can only recommend Learning TypeScript,
I'll not use it for this course, since of course,
not all students know TypeScript or want to use TypeScript.
Now, I will choose yes for ESLint, but no for Tailwind.
Tailwind is an amazing CSS library
that allows us to style NextJS applications with ease,
but when using it,
we also have to add a bunch of CSS classes to our JSX code.
And I don't wanna waste your time,
that's why I'm not using it here in this course,
though I will take a look at different styling options
you have in NextJS projects a little bit later.
Now, you could then go for a different folder structure,
but I'll choose No here as well.
And then we got an important question,
whether you want to use the App Router or not.
And this simply refers to two different ways
of building NextJS applications,
two different approaches you can use.
That's why in the official documentation,
you are also able to choose
between these two different approaches.
Now, I'll get back to the differences later.
In this course, I cover both,
but here we'll choose the recommended option,
which is to use the App Router.
Then you could change this setting,
but I'll stick to No here.
And with that, finally, the project is being created.
Now, once the creation finished, you can navigate
into that newly created NextJS project folder
and run npm run dev to start a development server
that allows you to review your NextJS website.
On CodeSandbox, you don't have to do that,
there, this server is automatically running
and you should already be seeing the preview.
Now, for a new NextJS project,
if you visit this address
that's showing up in the terminal here,
you will likely see a page that looks something like this,
though on CodeSandbox, you are seeing a different page,
because I actually prepared
a slightly edited starting project,
which we can use as a starting point for this section
and this overall course.
And you'll find this edited starting project
attached to this lecture. (graphic crunching)
I overwrote the content of the app folder,
the public folder,
and the content of this eslintrc.json file,
and then you should see this page on the screen.
And that's now our first NextJS app up and running.