So we have this first starting project here,
and what's really important about this project is
that if you inspect the page source in your browser,
you'll see a bunch of code in there.
But most importantly, if you take a closer look,
you'll see the actual page content
somewhere in that source code.
And that's important
because that means that the actual content
that's visible on the screen,
so this text here in this case, was part of the HTML code
that was sent back from the server.
And that's special because that's not the case
in a standard client site React app.
There, if you inspect the source code,
you will just see basically empty page
and some script imports,
but you won't see the actual content
that's visible on the screen in that source code.
And the reason for that is that
a standard React app is manipulated on the client
site in the browser.
React.js by default is a client site JavaScript library,
which means it runs in the browser and it edits
and manipulates the page in the browser.
And that's amazing
because that means that the page can be edited
after it's been loaded.
We can update the state of that page
after it's been loaded without having to fetch a new page.
But the disadvantage is that, for example,
search engine crawlers don't see the actual page content
if they visit the page for the first time.
And that's the difference here with NextJS.
Here, we got all the content,
not just visually on the screen,
but in the actual source code.
Because with NextJS,
you no longer have a client-side application.
Instead you have a full stack application
with NextJS projects, you have code that runs on the client
and you have a lot of code that runs on the server.
NextJS simply is both.
It's not just client-side, not just backend, it's both.
And NextJS seamlessly blends client
and server-side so that you can use React
to build amazing full stack applications.
And that's what we'll do now.