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
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.
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.
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.
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.,
The convention to create a route group is by wrapping the folder name in parenthesis;
What I Did
I created a folder for each route—about, blog, and contact—in the
I moved all files in the
appfolder 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
The HTML had good styling before I moved the routes into the app folder. The
<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 😀.
- Create a navbar and a footer.
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