All language subtitles for 006 Page Routes_en

We created an initial home page for our website.

And note that I always have the dev

server running in the terminal,

even though I usually keep it hidden.

Now, the HomePage is in a file called "page.jsx",

inside the "app" folder.

And it gets displayed as the root of our website.

Let me copy the full URL here,

since Chrome these days only shows part of it.

The URL contains "http" that is the protocol,

then "localhost" that's the server,

3000 as the port,

and then we have the "path",

that for the home page is "/", that

means the root of our website.

Now, what if we want to create another page?

Where should we put it, and

what should we call it?

Since this website is about game reviews,

let's say we want a page where

we list all the reviews.

Inside the "app" folder,

we can create another folder, called "reviews".

And inside that new folder create a file,

called "page.jsx".

So, all pages will be named "page.jsx",

but each one will be in a different folder,

that will correspond to the

URL path for our website.

And each "page.jsx" needs to

export a React component,

so I'll just copy and paste the

HomePage as a starting point,

but we can change the name in

the new file to ReviewsPage.

We can also modify the heading,

again to say "Reviews".

And in the paragraph for now let's just write

"Here we'll list all the reviews."

Ok. We can now save this file,

and it should be visible at the

"/reviews" path on our website.

You can see our new page in the browser.

So, note how the URL path is the same as

the folder path inside our project.

Any folder that contains a "page.jsx" file

will be exposed as a URL path on our website.

Now, suppose we want to create another page,

where we'll write a review for

the Stardew Valley game.

We'll want each individual review page

to be under the "/reviews" path.

So what we should do is create another

folder nested inside "reviews",

and then put a "page.jsx" file in there.

Now, in Visual Studio Code we can actually create

both the folder and the file at the same time,

by writing the folder name, like "stardew-valley",

followed by "/" and the file name,

that is "page.jsx".

You can see that we have the page file inside

the new "stardew-valley" folder.

"page.jsx" will again need to

contain a React component,

so I'll copy the code from another page,

and rename the component to "StardewValleyPage".

Same for the heading: this

should be the game title.

And here we should write the actual review,

but for now I'll just put some placeholder text.

If we save, we should now

be able to open this page

as the "/reviews/stardew-valley" path.

We can in fact see our new page here.

Again, note how the path of the

folders inside our project

becomes the path for the URL

returned by the server.

Next.js uses file-based routing,

which means that the files in our project will

automatically be mapped to URL paths.

There is no configuration file where

we have to write all the mappings,

like with some other framework or library.

Using the new Next.js App Router,

all the routes are inside the "app" folder.

The "page.jsx" file directly inside "app"

becomes the root path of our website,

also known as the home page.

The "reviews" folder inside "app" is mapped

to the "/reviews" path in the URL,

as long as it contains a "page.jsx"

file of course.

And we can create nested folders, like

"stardew-valley" inside "reviews"

that will result in "/reviews/stardew-valley"

as the URL path.

I'm sure you can see the pattern by now.

Given a path inside the "app" folder

that contains a "page.jsx" file,

the URL path will be formed by all

the folders excluding "app",

and it always starts with a "/".

Now, each individual folder is

called a "route segment".

This will be relevant when we talk

about nested layouts for example.

The "/" at the front is a bit special.

It's called the "root segment".

We've already seen how the RootLayout component,

that is the "layout.jsx" file directly

inside our app folder,

applies to all the pages in our application.

The last folder, the one that contains "page.jsx",

is sometimes called the "leaf" segment,

as in the leaf of a tree.

Now, for a route to display an HTML page,

as we've seen it must contain a "page.jsx" file.

But you can also call it "page.js" instead,

if you prefer,

or "page.tsx" if you use TypeScript.

They're all valid extensions for the page file.

If you're wondering why we need a

separate folder for each route,

rather than just using a different file name,

as was the case with the old Next.js Pages Router,

I'll explain that in the video

about nested layouts.