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.