Original subtitles

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.