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 theapp
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
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! π