So we got this next project,
and how does this project now lead
to this being visible on the screen?
Well, to understand that,
let's take a look at that app folder
because that is the most important folder
in a modern NextJS project.
It's this app folder where you set up your different pages
that you want to have on your overall website,
and that's why in there, you also find a Page.js file.
Page.js is a reserved filename just as Layout.js
and a couple of other filenames
you'll encounter throughout this section.
And a file named Page.js simply tells NextJS
that it should render a page.
However, if you take a look at that file,
you see that in there,
it's in the end a React component function
that's stored in the file,
something you of course know as a React developer.
The special thing about this component here
just is that it's a so-called server component,
a type of component
that's not really easily built with just React,
but that is embraced and supported by NextJS.
Now, on the surface, it's a regular component.
There's nothing special about it,
but NextJS ensures that this component
is actually rendered on the server,
that this component function is executed on the server.
Hence, if you, for example,
add a console lock statement here where you say executing,
you will not see that here on the client side.
If you open your developer tools
and the JavaScript console,
you can refresh as often as you want,
you will not see that log statement here.
Instead, you can see it on the backend.
There, if you open the terminal
where you started the development server,
you see all these executing logs
and that proves that it's executing on the server
because this process
and the terminal is running the server,
all the logs here are coming from the server side.
So it's a regular React component,
but treated in a special way by NextJS.
It is treated as a server component
and executed on the server,
and it's then the returned JSX code
that's sent over the wire to the browser to be rendered
as HTML, so to say,
and that's why we can see what we see here,
thanks to this component.