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.