All language subtitles for 003 What Is _File-based Routing__ And Why Is It Helpful__Downloadly.ir_en

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.