All language subtitles for 009 A First Demo_ NextJS In Action__Downloadly.ir_en

Now, we are going to dive super deep

into NextJS throughout this entire course.

Nonetheless, I think it's also pretty nice

to get our hands dirty now already

and to at least explore how a NextJS app works and behaves.

And for this, in this project, which we created,

in this terminal navigated into this project folder,

we can now run npm run dev.

This runs one of the built-in scripts,

which we find here in the package.json file

and npm run dev spins up our development server.

That is a built-in server,

which serves our NextJS pages and the overall application.

It will watch our code

and whenever we save changes to files,

it will automatically reload and update the pages we see

in the browser and it will, in general,

give us a great development experience.

Later, once we're ready to deploy our application,

we're going to run npm run build

to build it for production

to produce an optimized output for deployment

and npm start later then to start this optimized server

because we are working with a real server here,

a Node.js-based server,

since we need that page pre-rendering,

which happens on the server.

But that is already a little bit too much right now.

We are going to dive into that throughout the course

and we are going to learn how to deploy and so on.

And therefore right now,

let's use this dev script

and spin up that development server.

Now, this will then serve this Next application

by default on localhost:3000

as you see in the output down there.

And therefore, you can visit localhost:3000

and you should see something like this.

The exact starting screen could change over time

but it should be something like this

and if you are using my attached snapshot,

you will definitely see this.

Now, what we see on this screen

is actually the result of this index.js file

in the pages folder.

In there, we have a regular React component,

a functional component,

which returns JSX just as we know it from React

but this component here is actually now pre-rendered

and hence, if we view the page source here

in localhost:3000, we find all that content,

which we see on the screen, all that text and so on,

here in the HTML Markup

because this page was pre-rendered

because I did mention that this would be one

of the key features offered by NextJS,

this built-in page pre-rendering,

which we don't have in standard React apps.

So out of the box, we got this

and we can now start working on this project here

or on this page.

And since it is a regular React component,

we can do whatever we can do with React components.

Manage state, render different JSX content

for different states and so on.

But since we're going to dive way deeper

into all these core features

and how we build a NextJS application

with multiple pages and with other React components,

since we are going to dive into all of that,

I will keep this first example very simple

and I will simple clear all the content we have

in this main div here,

all that content, I'll clear it

so that only the div is left

and get rid of this import,

which we don't fully understand yet

but which we will reintroduce later.

And then here in this div,

I'll just add a h1 tag

where I say Hello Next World!

And if we now save this,

the save is picked up,

the dev server updates the page

and we now see this on the screen.

And again, if we view the page source,

we also find this text content here

in the source code so that pre-rendering still works out

of the box.

And that's our first NextJS application,

our first NextJS project.

Arguably not too exciting

but we are going to dive way deeper into NextJS

in the next course sections now.