Building Portfolio with Next.js: Migrate to App Router

Building Portfolio with Next.js: Migrate to App Router

Β·

3 min read

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

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

Did you find this article valuable?

Support Ayu Adiati by becoming a sponsor. Any amount is appreciated!