App directory (App Router) in NextJS - Step-by-Step Execution

Concept Flow - App directory (App Router)

Start: User Request URL

↓

Next.js App Router reads /app directory

↓

Match URL to folder/file in /app

↓

Load Server Component for route

↓

Render Server Component to HTML

↓

Send HTML to Browser

↓

Browser hydrates Client Components

↓

User interacts -> Client Components update

↓

Next.js handles navigation with client routing

↓

Repeat for new routes

This flow shows how Next.js App Router uses the /app folder to match URLs, render server components, send HTML, and hydrate client components for interactive pages.

Execution Sample

NextJS

app/page.tsx
export default function Page() {
  return <h1>Welcome to Next.js App Router</h1>;
}

This code defines the root page component in the /app directory that renders a heading on the homepage.

Execution Table

Step	Action	Input/State	Output/Result
1	User requests '/' URL	URL: '/'	Next.js starts routing process
2	App Router reads /app directory	Folder structure: /app/page.tsx	Matches '/' to /app/page.tsx
3	Load Server Component 'Page'	Component code loaded	Component ready to render
4	Render Server Component to HTML	JSX: <h1>Welcome to Next.js App Router</h1>	HTML: <h1>Welcome to Next.js App Router</h1>
5	Send HTML to browser	HTML sent	Browser receives static HTML
6	Browser hydrates Client Components	Hydration scripts run	Page becomes interactive
7	User clicks link to '/about'	Navigation event	Next.js intercepts and loads /app/about/page.tsx
8	Repeat render and hydration for new route	New component loaded	New page rendered without full reload
9	Exit	No more navigation	Page stays interactive

💡 User stops navigation or closes page, ending routing cycle

Variable Tracker

Variable	Start	After Step 3	After Step 4	After Step 6	After Step 8	Final
URL	/	/	/	/	/about	/about
Component Loaded	None	Page (root)	Page (root)	Page (root)	About Page	About Page
HTML Output	None	None	<h1>Welcome to Next.js App Router</h1>	<h1>Welcome to Next.js App Router</h1>	<h1>About Page</h1>	<h1>About Page</h1>
Hydration State	Not hydrated	Not hydrated	Not hydrated	Hydrated	Hydrated	Hydrated

Key Moments - 3 Insights

Why does Next.js render the page on the server first before sending HTML to the browser?

Next.js renders on the server to send fully formed HTML quickly, improving load speed and SEO, as shown in execution_table step 4 and 5.

What happens during hydration in the browser?

Hydration attaches JavaScript to the static HTML so the page becomes interactive, as seen in execution_table step 6.

How does Next.js handle navigation without full page reloads?

Next.js intercepts link clicks and loads new components client-side, updating the page smoothly, demonstrated in steps 7 and 8.

Visual Quiz - 3 Questions

Look at the execution_table, what HTML is sent to the browser at step 5?

A <div>Loading...</div>

B <h1>About Page</h1>

C <h1>Welcome to Next.js App Router</h1>

D No HTML sent yet

💡 Hint

Check the Output/Result column at step 5 in execution_table

At which step does the browser make the page interactive by running JavaScript?

A Step 4

B Step 6

C Step 2

D Step 8

💡 Hint

Look for hydration in the Action column in execution_table

If the user navigates to '/about', which variable changes in variable_tracker after step 8?

A URL changes to '/about'

B Component Loaded stays 'Page (root)'

C HTML Output remains the same as root page

D Hydration State becomes 'Not hydrated' at step 6

💡 Hint

Check the URL and Component Loaded rows after step 8 in variable_tracker

Concept Snapshot

Next.js App Router uses the /app directory to map URLs to React Server Components.
Server Components render HTML on the server and send it to the browser.
The browser hydrates components to add interactivity.
Client-side navigation loads new components without full reload.
This improves performance and user experience.

Full Transcript

The Next.js App Router uses the /app directory to organize routes. When a user requests a URL, Next.js matches it to a folder or file inside /app. It loads the corresponding React Server Component and renders it to HTML on the server. This HTML is sent to the browser quickly for fast page loads and SEO benefits. Then, the browser runs hydration scripts to make the page interactive. When the user navigates to another route, Next.js intercepts the navigation and loads the new component client-side, updating the page without a full reload. This process repeats for each route, providing a smooth and fast user experience.

Practice

1. In Next.js App Router, what does a folder containing a page.js file represent?

easy

A. A route in the application

B. A layout wrapper for pages

C. A server API endpoint

D. A static asset folder

Solution

1. Step 1: Understand the role of page.js in App Router

   In Next.js App Router, each folder with a page.js file defines a route that users can visit.

2. Step 2: Differentiate from other files

   Files like layout.js define layouts, not routes. API routes are in api/ folders, and static assets are in public/.

3. Final Answer:

   A route in the application -> Option A

4. Quick Check:

   Folder + page.js = route [OK]

Hint: Folder with page.js always means a route [OK]

Common Mistakes:

• Confusing layout.js with page.js
• Thinking page.js is for API routes
• Assuming static assets are routes

2. Which of the following is the correct way to define a layout in the Next.js App Router?

easy

A. Create a layout.js file inside the route folder

B. Create a page.js file inside the route folder

C. Create a _app.js file in the root folder

D. Create a server.js file in the route folder

Solution

1. Step 1: Identify layout file naming in App Router

   Layouts are defined by creating a layout.js file inside the folder representing the route.

2. Step 2: Exclude old or unrelated files

   The _app.js file is used in the old pages router, not App Router. page.js defines pages, not layouts. server.js is unrelated.

3. Final Answer:

   Create a layout.js file inside the route folder -> Option A

4. Quick Check:

   layout.js = layout file [OK]

Hint: Layouts use layout.js, not page.js or _app.js [OK]

Common Mistakes:

• Using _app.js instead of layout.js
• Confusing page.js with layout.js
• Trying to define layout in server.js

3. Given this folder structure in the app/ directory:

app/
  layout.js
  page.js
  dashboard/
    layout.js
    page.js

What happens when a user visits /dashboard?

medium

A. Only the root layout wraps the dashboard page, dashboard layout is ignored

B. Only the dashboard layout wraps the dashboard page, root layout is ignored

C. The root layout wraps the dashboard layout, which wraps the dashboard page

D. No layout is applied, only the dashboard page renders

Solution

1. Step 1: Understand nested layouts in App Router

   Layouts in parent folders wrap layouts and pages in child folders. So root layout wraps dashboard layout, which wraps dashboard page.

2. Step 2: Confirm layout application order

   Visiting /dashboard applies root layout first, then dashboard layout, then renders dashboard page inside.

3. Final Answer:

   The root layout wraps the dashboard layout, which wraps the dashboard page -> Option C

4. Quick Check:

   Layouts nest from root to child [OK]

Hint: Layouts nest from parent to child folders [OK]

Common Mistakes:

• Thinking only one layout applies
• Ignoring root layout when inside subfolder
• Assuming layouts do not nest

4. You wrote this code in app/dashboard/page.js:

export default function DashboardPage() {
  return 
Dashboard
}

But when you visit /dashboard, you get a blank page. What is the most likely cause?

medium

A. The page.js file must be named index.js

B. The DashboardPage component must be a class component

C. You forgot to export the component as default

D. Missing layout.js in app/ folder

Solution

1. Step 1: Verify root layout presence

   In Next.js App Router, a root layout.js file in the app/ directory is required to render any pages, including nested ones.

2. Step 2: Confirm naming and export correctness

   The page.js file name is correct, and the component is exported as default. Class components are not required.

3. Final Answer:

   Missing layout.js in app/ folder -> Option D

4. Quick Check:

   Root layout required for all pages [OK]

Hint: Root layout.js required for nested pages [OK]

Common Mistakes:

• Renaming page.js to index.js incorrectly
• Forgetting default export
• Thinking class components are required

5. You want to create a nested route /blog/[slug] using the App Router. Which folder and file structure is correct?

hard

A. app/blog/_slug/page.js

B. app/blog/[slug]/page.js

C. app/blog/slug/page.js

D. app/blog/[slug].js

Solution

1. Step 1: Understand dynamic route syntax in App Router

   Dynamic routes use square brackets around the parameter name as folder names, e.g., [slug].

2. Step 2: Confirm correct file placement

   The dynamic folder [slug] contains a page.js file to render the dynamic route. Other options use incorrect naming or file placement.

3. Final Answer:

   app/blog/[slug]/page.js -> Option B

4. Quick Check:

   Dynamic routes use [param] folder with page.js [OK]

Hint: Dynamic routes use [param] folders with page.js inside [OK]

Common Mistakes:

• Using _slug instead of [slug]
• Placing dynamic param in filename instead of folder
• Omitting page.js inside dynamic folder