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

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

Comments

[Carlos Silva]

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.

That is not true

Next.js Rendering

By default, Next.js pre-renders every page. This means that Next.js generates HTML for each page in advance, instead of having it all done by client-side JavaScript.

You can even have a completely static site using pages router
Definitely you have client side rendering depending how you wrote your code.

[Ayu Adiati]

Thanks for pointing out! 😄