We've seen how our HomePage is rendered
into a static HTML file by Next.js.
But we still have a single page
in our application.
What if we want to add another page
to our blog website?
For example we may want an "About" page,
visible at the "/about" path.
If we try this now
of course we'll get a 404 not found.
Now, a typical React app
is a Single Page Application
but you can use something like
"React Router"
to display a different component
based on the URL path.
This requires defining a "Route",
that specifies that "path"
and the component to render,
in this case the "About" component.
So there's some amount of
let's call it configuration involved.
In a Next.js app
creating a new route is
actually a lot simpler.
All we need to do is
add a new file under the "pages" folder.
Just like we already have
the "index.js" file.
So we can just create a new file,
and call it "about.js",
so the name is the same as the path
where we want it to be visible at.
As we know, a page in Next.js is
simply a React component.
In fact we could even copy
everything from our HomePage,
and then rename "HomePage"
to "AboutPage".
Incidentally, you can call your component
whatever you like,
as long as it's the default export
it makes no difference to Next.js.
So you could call it simply "About"
instead of "AboutPage",
but I find it more descriptive
to call them "SomethingPage".
Now, let's change the heading
to say "About" as well.
Save this file, and go and
reload it in the browser.
And just like that,
our new page is visible
under the "/about" path.
Really really simple.
No configuration required.
This works because Next.js uses
a filesystem-based router.
What this means is that the Next.js server
looks inside the "pages" folder,
and automatically exposes each file in there
under a URL path.
So our "about.js" file is automatically mapped
to the "/about" path.
It's basically the name of the file
without the extension.
As for the "index.js" file,
that's a bit of a special case
because that's not visible
at "/index"
but simply at the root path.
We need a way to show a page
at the root of our website,
so Next.js uses "index.js"
for that purpose,
which should be pretty intuitive.
But apart from this special case,
any JavaScript file you put
inside the pages folder
will be visible as a web page
under the same path as the file name.
You can try creating another page yourself
with a name of your choosing
and verify that
you can open it in the browser.