All language subtitles for 008 Adding First Pages_en

Now let's get started

with writing some NextJS code here.

And for this I'll shrink the terminal a little bit.

And in this pages folder,

we can ignore this _app.js file for the moment.

We can delete the api folder in there.

And in the styles folder

we can also delete the Home.module.css file.

We can keep the globals.css file

if we want though.

Now we got this index.js file.

And in this file,

* in the end just have a standard React component.

But to make this even clearer

let's delete this file as well

so that the only remaining file in the pages folder

is the _app.js file.

And now let's say to get started with NextJS

we wanna build a simple website with three kinds of pages,

a starting page let's say,

then a news page with a list of news

and then a page for the news details.

So when we click on a news item

and we're taken to the full page

for that specific news item.

And if we wanted to create a structure like this,

in NextJS in the pages folder here,

we would create three files.

The index.js file will be our route page.

So if a request reaches our domain slash nothing

just index.js will be loaded.

That is in line with standard websites,

if I may call it like this

where we also have index.html files

which are typically served as route pages,

if a request just targets slash nothing after the domain.

And here it's index.js, which will be served

if a request reaches just our domain slash nothing.

Then we might also have a news.js file

for requests that reach our domain slash news.

And that's important with the exception of the index name

which is a special name,

which is served whenever

we have a request to just slash nothing,

the file name will be used as a path name.

So news.js the content in here,

the React component in here,

would be served for requests to our domain slash news,

for example.

So not news.js, but just news.

Then then news.js file would be served.

And I'll comment this out to leave that in here.

index.js would be served for just our domain.com/nothing.

And I'll come back to the page

for a single news item later.

For the moment, these are the two pages we have.

And now what goes in those page files,

I mentioned it before,

our standard React component,

the React components that should be loaded

for that specific page.

So here in index.js

we can create a component just as we know it

typically as a function

and we could name it as HomePage.

The component name is up to you.

Now you must export this component

so that NextJS is able to find it, so to say.

And then in this component function

you return JSX code

just as you're used to.

You return your JSX code,

for example, a h1 tag where we say "The Home Page."

That could be a very simple first page.

Of course we're going to add more meaningful content

in a second.

Now we can copy this to news.js

and add it here.

As a side note,

if you're wondering why we don't have any import statement

like this at the top,

where we import React from react.

NextJS projects support this modern React setup

where you can omit this import

and it's added behind the scenes, so to say.

And with that here

in the news.js file

we would have let's say NewsPage component

and of course also export the news page,

and here we could say "The News Page."

And if we do that,

if we add these two pages

then in the terminal,

in this integrated terminal here

which has already navigated into this project folder

we can start the development server with NPM and run dev.

And that development server

is given to us by that NextJS project setup.

So with npm run dev,

we start this development server.

Here you see the URL where you can visit your page

and therefore if I now visit localhost:3000

I see the homepage.

And if we instead would visit localhost:3000/news

we see the news page.

And now what's interesting is

that the content is just some dummy content,

but if we view the page source here

off the loaded page,

then we see that in there

we don't just have an empty skeleton,

but if we look up at closer,

we find the actual page content in here.

And that's an important difference

to a standard React app

where the page is not pre-rendered on the server.

This HTML code which we see here

is the HTML code sent back by the server.

And since it contains that content here

that means that the entire page was pre-rendered.

And that's why the content ends up in here

and the advantage's

that we don't have any flickering on the page

whilst we're waiting for it.

And in addition,

search engines would also see that content here.

They see what our users see

and that of course can be a great advantage.

And this is how we can get started

with this file based routing.

And as you see, by looking at the page source,

in addition to that file based routing,

we also already use that

built-in server-side rendering feature

without any extra setup

because it works out of the box.

With that, let's now dig a bit deeper

and let's see what else we can do here.