Original subtitles

So we did create that NextJS project

here in the terminal with NPX create-next-app,

and that gave us a folder which looks like this,

which has this kind of content.

Attached, you also find that starting project

in case it changes over time or looks slightly different

because the starting template was changed, for example.

So attached, you find that exact project snapshot,

which I have here.

If you do download the attached snapshot though,

there is one extra step you need to go through.

You need to open the terminal,

and you can use the one built into Visual Studio Code,

which is your default terminal.

Your default command prompt

which ships with your operating system,

just already integrated into Visual Studio Code,

and conveniently, also already navigated

into this project folder.

So any commands you run here

will execute in the context of your project folder.

And here you then need to run npm install

if you use that attached snapshot.

Because that will then install

all the dependencies of this project

as defined here in package.json,

and store them and their dependencies

in the node modules folder.

So that's also a folder in which will never work.

The three important folders for us here

are pages, public, and styles,

though pages is by far the most important one.

Styles, as you might guess, holds some style files.

We can ignore that for now.

We'll work on that soon.

And public simply holds public resources our page might use.

Something like images, for example.

Now one thing you might see here in public though,

is that unlike in a regular React app,

which you, for example,

created with create React app with that extra tool,

that there in a standard React app,

you have a index HTML file in the public folder.

Here in the NextJS app, you don't have that.

And the reason for this

is that NextJS has this built in pre-rendering.

And whilst it gives you a single page application,

that single page is dynamically pre-rendered

when a request reaches the server

so that you do return an initial page with content.

That is what I talked about earlier in this course as well.

This server-side rendering and the pre-rendering of pages.

And hence for us,

the pages folder will be the most important folder

because that is where we will set up

that file based routing,

and that is there for the folder,

which is important for us to define the different pages

that should make up our application here.