Let's start with nextjs, you can simply google for nextjs and then pick the github repository
link you find. On this page you'll find detailed instructions on how to use it,
a link leading to another page where you can dive even deeper into it and also instructions how to
install it.
But what is nextjs?
Here it's saying nextjs is a minimalistic framework for a server rendered react applications.
Now server side rendering is quite an advanced react concept,
there are therefore courses focusing entirely on that.
In a nutshell, server side rendering simply means that when a user enters a URL leading to your react
app or one of your pages of your react app, it will pre-render that page on the server so that the
server returns that pre-rendered html code,
let me show you what I mean.
If we have a look at our normal setup,
we have a server and a client
and of course our react app code and with that, I mean both the build code in this build folder we had
in that create react app application and also the raw code in your source folder.
If you now visit your server for the first time, so you load the page for the first time, the server would
typically ship you the index.html file and your code and then you would load it as a single page application
in your client.
The problem can be that if your page needs to be crawlable by search engines, crawlers like the google
crawler might not really understand or read your page correctly, especially if you are using asynchronous
code to load the initial content.
So if you have a page where the first thing you do in javascript is you reach out to a server and then
render the results to the screen when the data is back,
that might happen super fast to the user but the crawler will only see the spinner or whatever you are
showing until the data is there.
Now with server side rendering, for the first page load which is always what the crawler sees,
the server will fetch and render the react app so it won't just fetch and return it,
it also renders it for that page you visited and then it returns that pre-rendered page along with the
react app bundle so that from this point on, you still have a single page application
so you then still work as before.
It's just about that initial page load essentially, now nextjs is a package helping you with server
side rendering because that is super tricky to set up.
And besides just helping you with it, it gives you a custom or a specific structure to work in.
This structure takes advantage of enforcing a strict folder structure you have to use
though we're only talking about one folder mainly which has to be named in a certain way, so that all
the routes of your application are actually generated automatically.
Let me show you what I mean and how we start such a nextjs project over the nextjs lectures.