Another very nice feature
added by NextJS is file-based routing.
Now what does this mean?
In traditional React, you don't even have a router.
And just to be clear,
routing means that we give the user the illusion
of having multiple pages.
When we navigate around and we load different pages,
then that's the job of a router.
Typically we use React Router for that.
This router basically watches the URL, and when it changes,
it basically prevents the browser default
of sending a request to some backend server,
and instead renders different content
on the page with React.
A different component in the end.
That's what routing is.
We change what's visible on the screen
based on the URL without sending a extra request to a server
because we stay in that single page application
which we typically build with React.
Now that's routing, and typically with React,
routing is set up in code.
That code could look something like this,
depending on the version of React Router you're using.
Now this works and it's not bad, not wrong.
React Router is a great package,
but it is extra code which you have to write.
And then often you end up storing your components
that act as pages in a separate folder,
which kind of replicates your route set up in code.
So if you have three pages set up as pages and code,
you have three page components
in that pages component folder.
Makes sense, I guess.
Now since that's the case,
NextJS gets rid of that in-code route definition.
Instead, with NextJS,
you would define pages and routes with files and folders.
You have a special pages folder in NextJS apps
which has to be named pages,
and then you are structuring that folder,
defines the routes and paths your page supports.
And of course,
we're also going to learn how that works in this course.
Now that simply allows us to get rid of that extra code,
and hence we have to write less code,
we have less work, and it's a highly understandable concept
because it's very close
to how we all started with web development.
When you're getting started with just HTML
and CSS and some basic JavaScript maybe,
then you build basic websites
by adding multiple HTML files,
and the names of these files
or the folders in which they sit
define how you can navigate between these files.
How you can link these files together.
And NextJS basically allows us to go back
to this very basic, yet understandable concept of routing.
And NextJS still supports all the features we might want,
like nested routes or dynamic routes with dynamic parameters
and all of that.
And we're going to see that in this course, of course.