# Building Portfolio with Next.js: Migrate to App Router

Hello Friends 👋,

As mentioned in [the earlier post](https://adiati.com/building-portfolio-with-nextjs-add-pages#heading-some-thoughts), I mistakenly read the [Pages Router](https://nextjs.org/docs/pages/building-your-application/routing) docs instead of the [App Router](https://nextjs.org/docs/app/building-your-application/routing#the-app-router). To use the App Router consistently, I have to move the files (routes) inside the `pages` folder into the `app` folder.

## What I Learned

### Server and Client Components

* Next.js 13 introduces App Router built on React Server Component. It means that by default, React renders the whole application server-side. While with Pages Router, React renders the whole application client-side.
    
* We can combine server and client components in App Router.
    
* With server components, the client-side JavaScript bundle size is reduced, so the initial page loads faster. Read the section [Why Serve Components?](https://nextjs.org/docs/getting-started/react-essentials#why-server-components) and [Rendering](https://nextjs.org/docs/app/building-your-application/rendering) in the docs for a more thorough explanation.
    
* Anything related to the user's interactivity and React hooks still needs to render on the client side.
    
* Think of keeping sensitive information on the server, working with data (fetching data, accessing backend resources directly), or working with large dependencies when choosing the server component.
    

### Routes

* All routes are live under the `app` folder in the App Router feature.
    
* Each folder in the `app` folder defines a route.
    
* Each folder should have a `page.js` file if we want to make the route public.
    

### Route Groups

* We can organize routes by grouping them in a special folder where the route will not be included in the URL path.
    
* Why do we want to group the routes?
    
    Our app or website might have many pages in the future with different purposes. For example, an e-commerce website usually has pages that the public can consume and pages that can only be accessed with authentication. We can organize the routes into folders, e.g., `(shop)`folder, `(dashboard)`folder, etc.
    
* The convention to create a route group is by wrapping the folder name in parenthesis; `(folderName)`.
    

## What I Did

* I created a folder for each route—about, blog, and contact—in the `app` folder.
    
* I moved all files in the `pages` to the `app` folder and put them in their folder.
    
* I changed all files' names to `page.js` to be accessed publicly.
    
* Because now I have three public folders—routes—and probably will have a dashboard in the future, I grouped the routes in the `(websitePages)` folder—I can't think of a better name for now 😆.
    

So currently, the `app` folder structure is like this:

```plaintext
app
├── (websitePages)
│   ├── about
│   │   └── page.js
│   ├── blog
│   │   └── page.js
│   └── contact
│       └── page.js
├── global.css
├── layout.js
└── page.js
```

## Some Thoughts

The HTML had good styling before I moved the routes into the app folder. The `<h1>` and `<h2>` have the proper size for headings.

But the styling is gone after I moved them to the app folder. The headings are the same size as the paragraph. I provide a GIF for comparing App Router and Pages Router. I don't know yet what caused it. If you know what happened, drop a comment below 😀.

![comparing pages and app routers ](https://cdn.hashnode.com/res/hashnode/image/upload/v1689752169412/a0bac4fa-f33d-4a1d-9360-1eb8f60d7a93.gif align="center")

## Next Plan

* Create a navbar and a footer.
    

## Project Link

* [Codebase](https://github.com/adiati98/adiatiayu-portfolio)
    

## Resources

* [Pages](https://nextjs.org/docs/app/building-your-application/routing/pages-and-layouts#pages) — Next.js docs
    
* [Route Groups](https://nextjs.org/docs/app/building-your-application/routing/route-groups) — Next.js docs
    
* [Incrementally adopt the Next.js App Router](https://www.youtube.com/watch?v=YQMSietiFm0) by Lee Robinson
    
* [NextJS App Router: Learn Modern Web Development](https://www.youtube.com/watch?v=Sbl04kOL1dM) by Josh tried coding
    

---

🖼️ Credit cover image: [unDraw](http://undraw.co)

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! 😊