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