In traditional React apps,
so in a React apps where you are not using Next.js,
you set up routing like this.
You have some code in one of your React components,
where you do add various route related components
from react-router-dom, which is a great library.
And there of course isn't necessarily anything wrong
with this setup, but this is not how we'll do it
with Next.js.
There, we don't install React router,
and we won't write any JSX code
or any JavaScript code at all,
when it comes to defining our routes and our page structure.
Instead with Next.js, we create React component files.
So regular React component files
in a special folder, as you will see,
and we will then let Next.js infer our routes
in our project from that folder structure we set up there.
We use the special pages folder for that
because Next.js will automatically look
into that pages folder to infer our route structure.
Now, how does this work?
Well, let's consider this example.
This example pages folder.
Here in this pages folder,
we would have an index.js file
and then as a sibling to that file,
we have the about.js file.
And then we have the products folder
as a sibling to the index and about JS files,
so as a sub folder in pages
and in products, we have two additional JavaScript files,
the index.js file again,
but now in products instead of just pages
and then a file with a rather strange file name,
square brackets
and then id inside of those square brackets dot JS.
Now we'll come back to this strange looking file name
in a second.
Let's first of all, have a look at what Next.js would do.
It would look at the pages folder,
and now infer a couple of routes we wanna support.
For example, based on index.js,
it would infer that this should be our main starting page
for requests to our domain slash nothing.
So for an empty path.
For about.js, it would infer that we, for example,
wanna load an about page here,
so it would in the end just render the component returned
in the about.js file
and it would load that component for our domain.com/about.
So it takes the file name as a path, as you can tell
with the exception of index.js, that's a special file name,
which will be assume as the route path for the given folder
in which you are.
So directly in the pages folder,
index.js would be our route path
and empty slash after the domain.
Inside of products, for example,
index.js would be loaded from my domain.com/products.
So not slash products slash index,
but just slash products slash nothing,
loads index just as just my domain slash nothing
loads index in the pages folder.
If we have a file named differently,
like about.js here,
then this file name is used as a path segment.
And alternative to naming a file about.js,
therefore, would also be to create a sub folder named about
with an index.js file inside of it,
that would lead to the same result,
because index.js files are treated in that special way,
I just explained.
And of course, we're going to see
all of that in action soon.
Now, what about this strange square bracket file name here?
This is a special notation we can use to add dynamic path.
So for example, if we have the product detail page here,
so if we show some content for a selected product,
then of course we wanna show that same page
for different products.
So our URL would look something like this,
our domain.com/products/and then the ID of a given product.
And of course we can have multiple products
and therefore multiple IDs.
And that's why this is dynamic.
The ID isn't always the same.
And as a developer,
we can't predefine our different detailed pages
for the different products,
because a, we might not know in advance
how many products we'll have,
and b, even if we knew, it's always the same page.
Just the data on the page will be different.
And that's why Next.js supports such dynamic paths as well,
with that special file name.
So that is the equivalent
to defining such a dynamic path with React router like this.