Ayu AdiatiHello 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
appfolder in the App Router feature.Each folder in the
appfolder defines a route.Each folder should have a
page.jsfile 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
appfolder.I moved all files in the
pagesto theappfolder and put them in their folder.I changed all files' names to
page.jsto 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
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! 😊
