Building Portfolio with Next.js: Migrate to App Router

Hello Friends 👋,

As mentioned in the earlier post, I mistakenly read the Pages Router docs instead of 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? and 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:

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

Next Plan

Create a navbar and a footer.

Project Link

Codebase

Resources

Pages — Next.js docs
Route Groups — Next.js docs
Incrementally adopt the Next.js App Router by Lee Robinson
NextJS App Router: Learn Modern Web Development by Josh tried coding

🖼️ Credit cover image: unDraw

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

Building Portfolio with Next.js: Migrate to App Router

Comments

Building In Public: Building AdiatiAyu Portfolio with Next.js

Building Portfolio with Next.js: Add Navbar, Footer, and Metadata

More from this blog

I Was Skeptical of AI. Then It Saved Me Hours of Writing.

From Helping Out to Taking Ownership: The Art of Sticking Around

The Curated, Automated Open Source Portfolio: How It’s Going

Open Source Engagement: What's Working Now?

Beyond Hacktoberfest: Building a True Open Source Journey

What I Learned

Server and Client Components

Routes

Route Groups

What I Did

Some Thoughts

Next Plan

Project Link

Resources

Command Palette

Comments

Building In Public: Building AdiatiAyu Portfolio with Next.js

Building Portfolio with Next.js: Add Navbar, Footer, and Metadata

More from this blog

What I Learned

Server and Client Components

Routes

Route Groups

What I Did

Some Thoughts

Next Plan

Project Link

Resources