So NextJS has these server components,
components that are rendered and converted to HTML,
which is then sent to the browser.
And as I mentioned, the file name here matters
because it's that file name that tells NextJS
that we want to have this as a page.
But how could we now add a second page to this website?
Let's say we also want to be able
to reach a page, localhost:3000/about.
If that is what we want to do, we have to find some way
of letting NextJS know about our intentions.
Now, if we were using just React without NextJS,
we could use React Router for that.
But in NextJS projects, you don't do that.
Instead here, this app directory plays an important role
because in this app directory,
you can add new paths, which you wanna handle as routes
by adding new folders.
So if we want to support a /about route,
we have to add an about folder.
However, on its own, this folder won't do anything.
If I just add this folder
and I then go to /about,
I get this default 404 page,
and I'm getting this here
because NextJS doesn't know about this about route yet,
adding a folder is not enough.
Instead, you always also must add such a page.JS file
if you want to render a page,
which kind of makes sense, I guess.
So now we don't just have that root page.JS file,
which is responsible for the homepage, the starting page,
but we also have this nested page.JS file
in this about folder.
And that will be responsible for rendering the content
of the about route.
So it's now in here where we can export
a new component function that could be called about page,
though this name does not matter,
it can be anything you want.
And then you have to return the JSX code that,
in the end, should be rendered as page content.
So here we could say about us
and then add more content if we wanted to,
and we'll get to that meals app soon enough,
but for this demo and these basics,
let's stick to this simple page.
With that added and saved,
if you now go to localhost:3000/about,
you therefore now see about us on the screen.
And here, I'll now just wrap it into a main element
for styling purposes like this.
This ensures due to the styles I set up
that this will be centered.
So that is how we can add a new route by adding a folder
with a page.JS file inside of it.