Building Portfolio with Next.js: Add Pages
Hello Friends 👋,
What I Learned
📎 Special note:
In the docs, two features are available, App Router and Pages Router. We can choose between two from the dropdown menu at the top sidebar. We must keep in mind which tab we choose as each of them is unique.
It's recommended to migrate to App Router to get the most out of React's latest features.
Next.js uses a file-system-based router where folders are used to define routes. For example, if my
appfolder has this structure:
app ├── global.css ├── layout.js ├── page.js └── blog ├── page.js └── post-one.md
Then the route to
post onewill be
The breakdown of the route:
appfolder is the route to the first slash (
page.jsthat lives under the
blogfolder is the route to
post-one.mdis the route to
Read the Routing Fundamentals section in the docs for a thorough explanation.
page.jsis used to make the route publicly accessible. The URL path from a folder without
page.jswon't be accessible to the public.
- Like the anchor (
<a>) tag in HTML,
<Link>also uses the
hrefattribute/prop. The difference is that we use
<Link>if we want to navigate between routes in our application, and we use
<a>when we want to navigate to an external URL path.
What I Did
By default, there is a
page.jsfile in the
appfolder. This file used to be called
index.js. I use it as the homepage of the website. For now, it only shows the homepage title.
I created a
pagesfolder in the root and added
contact.js. Like the homepage, there's only a title on every page for now.
I want every page to have a link back to the homepage so I don't need to type the URL path every time.
Import the Link.
import Link from "next/link"
Applied the link to get back to the homepage.
<p> Back to <Link href='/'>Homepage</Link> </p>
Now as I'm writing this post, I think I messed up between the two features—App Router and Pages Router—in the docs 😅.
The Learn Next.js tutorial on the Next.js website uses the Pages Router. So I probably read the Pages Router docs without switching to the App Router. Because I'm using the App Router, I think I should adjust something regarding the pages for the next step. Well, I need to reread the docs 😁.
Read the docs and see if I should fix anything regarding the pages.
Create a navbar and a footer.