Skip to content

· 2 min read

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.

Resources

🖼️ Credit cover image: unDraw