All language subtitles for 004 Key Feature 2_ Simplified Routing with File-based Routing_en

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.