# Building Portfolio with Next.js: Add Pages

Hello Friends 👋,

I executed [the plan to add pages](https://adiati.com/building-portfolio-install-nextjs-and-tailwind-with-pnpm#heading-next-plan) to the [portfolio project](https://github.com/adiati98/adiatiayu-portfolio). 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](https://nextjs.org/docs/app/building-your-application/routing#the-app-router) that is built on [React Server Component](https://nextjs.org/docs/getting-started/react-essentials#server-components).
    
* **📎 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**](https://nextjs.org/docs/pages) 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:
    
    ```plaintext
    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](https://nextjs.org/docs/app/building-your-application/routing) section in the docs for a thorough explanation.
    
* [`page.js`](https://nextjs.org/docs/app/building-your-application/routing/pages-and-layouts#pages) 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.
        
        ```javascript
        import Link from "next/link"
        ```
        
    * Applied the link to get back to the homepage.
        
        ```xml
        <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](https://nextjs.org/learn/basics/navigate-between-pages) 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](https://nextjs.org/)
    
* [Learn Next.js](https://nextjs.org/learn/foundations/about-nextjs?utm_source=next-site&utm_medium=homepage-cta&utm_campaign=home)
    

---

Thank you for reading! Last, you can find me on [**Twitter**](https://twitter.com/@AdiatiAyu), [**Mastodon**](https://hachyderm.io/@AdiatiAyu)**,** and [**BlueSky**](https://bsky.app/profile/adiati.ayu.bsky.social). Let's connect! 😊