So now that we got started with NextJS
and we at least have a first basic understanding
of why we might want to use it,
it's time to create our first NextJS project.
Now for that,
you can run the command you find here on NextJS.org.
Though for this command to succeed,
you need to have NodeJS installed on your system.
We're not going to write too much NodeJS code,
though we will use some NodeJS later in the course.
But NextJS needs NodeJS under the hood.
And this command here, which we wanna run,
also needs NodeJS to be installed because under the hood,
this command will use the Node Package Manager
for installing dependencies like the NextJS framework.
Therefore, from nodejs.org, you should download the latest,
or the latest LTS version, doesn't really matter.
And install NodeJS on your system.
It is available for all operating systems.
Simply download it from this page,
walk through the installer.
And once you have NodeJS installed,
you can run this command here.
So for that, copy this command.
And then in your terminal,
your default system command prompt,
navigate into the folder with the CD command
where you want to create your NextJS project.
And once you are in that folder,
you can execute this command.
Now when you execute this command,
you might be asked to confirm
that you wan to install some dependencies,
and then thereafter, as a first step,
you will be asked which name you want to assign
to your project.
And here I'll simply pick nextjs-course.
Though the name of course is up to you.
Now after you confirmed this name,
you will be asked a couple of other questions as well.
For example,
whether you want to use TypeScript for this project.
And here I'll choose no so that everyone can follow along
with this course.
Because whilst you can use NextJS with TypeScript,
it's of course not a must-do.
And I want to make sure that everyone can get the most
out of this course,
no matter if you do know TypeScript or not.
Hence, I'll choose no here.
I'll also choose no for ESLint
and for a Tailwind CSS, which we could use for a styling.
But I will provide some finished CSS code
to you as part of this course.
I will also choose no for this source directory.
This option would simply change the structure
of the created project folder, and I don't want that.
And then here for the App Router,
I'll actually also choose no,
even though it says that it's recommended to use it.
But I'll get back to this in the next lecture
and explain why I won't use the App Router just yet,
and why this of course might change in the future.
But for the moment, you should choose no here.
And you can also choose no for the follow-up question.
And then after going through all these questions,
finally the NextJS project will be created for you.
And with that process completed,
you will now have a new folder in that folder
into which you navigate it here in your terminal
that carries this name.
Now you could now navigate
into this folder with the CD command
and then run the development server by running npm run dev.
But I will not yet do that here.
Instead, I now opened this project in Visual Studio Code,
the IDE, the editor I'm going to use in this course.
Now you don't have to use Visual Studio Code.
It is a great IDE for web development though.
It's completely free and it's amazing.
But you can use whatever
your favorite web development IDE is.
If you do want to use the same editor as I do here though,
you can visit code.visualstudio.com,
and from there you can download Visual Studio Code.
It is available for all major operating systems.
Simply download the installer and walk through it.
And once you have downloaded and installed it,
you can open that NextJS course folder
which we created with the command here
in the terminal with Visual Studio Code.
Now here I'm using the dark theme.
You can change this under preference, this color theme.
Here I am using the Dark+ theme
and I also adjusted the appearance.
You can do that under View, Appearance,
and simply adjust it as you want.
And for example, show or hide the status bar.
I'm hiding it,
but that is something you can configure however you want.
Now regarding extensions,
that's a great feature of Visual Studio Code.
You can install extensions there.
And the only extension that I'm using here
and that I recommend that you install
is the Prettier extension.
You can simply search for Prettier here,
and that's an extension that will help you
with code formatting.
So it's automatically transforming your code to look cleaner
and to be more formatted and structured.
Once you installed that extension,
you just need to make sure
that you go to your keyboard shortcuts
and there, search for Format Document,
and make sure that you have that shortcut set up
because that's a shortcut which I will press all the time
which will then auto-format my code and use Prettier.
And to make sure that I do use Prettier,
under Preferences, Settings,
in your user or workspace, so project-specific settings.
You can also search for format and make sure
that under default formatter, you do pick Prettier here.
Here it is.
So with that all set up,
you will have the same setup as I do,
and that is the setup I will use in this course.
That is the setup we will use throughout all the lectures.
And it is the setup which we'll now use to dig a bit deeper
into this project we just created.