Maximilian: So now that we know what NextJS is,
and now that we at least have a first idea
of why we might wanna use NextJS,
let's get started with it
and let's create a first NextJS project.
For this, we just need to run one simple command
in the end, this command here,
but to run this command,
we need to have Node.js installed.
Now we're not going to write any Node.js code,
at least not right now.
We will write some basic code later
but we'll not write it right now.
But Node.js ships together with the Node Package Manager
which is a extra tool
which is the defacto standard tool for installing
and managing libraries in JavaScript projects.
And we will use that tool to create the next project.
And that created next project under the hood,
Will also need node.js to execute.
For example, for that built-in
server-side rendering that uses Node.js under the hood.
And for all those reasons, we need to install Node.js
and for that, you can simply visit nodejs.org
and from that page,
you can install the latest version of Node.js,
Whatever that version is when you're viewing that.
Just install the latest version,
simply click on there and download Node.js.
It is available for all major operating systems
and then walk through that installer,
once that download finished.
Now, once you have Node.js installed,
you are ready to run this command
and therefore we can now go
to the terminal to your regular command prompt
which is built into your operating system.
And there you can cd and navigate
into the folder where you want to create your next project.
And then simply run this command,
npx create-next-app.
Run this command by hitting enter
and this will now create a new next project
in that folder where you ran that command.
Now you might be prompted to confirm
that you're installing extra packages
and hence I will confirm this here.
And now it is, will temporarily install
the create-next-app tool,
and then start creating that project.
Now for this, we first of all
need to give this project a name
and I'll just use NextJS-course here
as a name but you can of course,
pick any name you want.
Hit enter and now this project will be created here
and it will set up a base folder
for that project and install all the core dependencies
this project will need.
Now, once it's done, you can run the commands
shown here to start your development server
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 visuals to do 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 as color theme.
Here I am using the dark plus theme,
and I also adjusted the appearance.
You can do that under view appearance
and somebody's adjusted 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 extension 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 extension that will help you
with code formatting.
So with 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 shortcuts 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 work space,
so project specific settings,
you can also search for format
and make sure that under default formatter,
or you do pick Prettier here,
here it is.
So with that all set up,
you will have the same set up as ideal
and that is the set-up I will use in this course.
That is the set-up we will use
throughout all the lectures
and this is the setup which we'll now use
to dig a bit deeper into this project we just created.