Building Portfolio with Next.js: Add Pages

Hello Friends 👋,

I executed the plan to add pages to the portfolio project. I love how convenient routing handling is in Next.js.

What I Learned

App Router

• In version 13, Next.js introduced the new App Router that is built on React Server Component.

• 📎 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.

Pages

• Next.js uses a file-system-based router where folders are used to define routes. For example, if my app folder has this structure:
  

  app
  ├── global.css
  ├── layout.js
  ├── page.js
  └── blog
      ├── page.js
      └── post-one.md
  

  Then the route to post one will be website.com/blog/post-one.

  The breakdown of the route:

  • The page.js under the app folder is the route to the first slash (/) after website.com.
  • The page.js that lives under the blog folder is the route to blog/.
  • The post-one.md is the route to post-one.

  Read the Routing Fundamentals section in the docs for a thorough explanation.

• page.js is used to make the route publicly accessible. The URL path from a folder without page.js won't be accessible to the public.

Link

• Like the anchor (<a>) tag in HTML, <Link> also uses the href attribute/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.js file in the app folder. 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 pages folder in the root and added about-me.js, blog.js, and 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>
    

Some Thoughts

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 😁.

Next Plan

• Read the docs and see if I should fix anything regarding the pages.

• Create a navbar and a footer.

Resources

• Next.js docs

• Learn Next.js

🖼️ Credit cover image: unDraw

Thank you for reading! Last, you can find me on Twitter, Mastodon, and BlueSky. Let's connect! 😊