App directory (App Router) in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the rendered output of this Next.js App Router component?

Consider this React Server Component in the app/page.tsx file:

export default function Page() {
  return (
    <main>
      <h1>Welcome to Next.js App Router</h1>
      <p>This is the home page.</p>
    </main>
  )
}

What will the browser display when visiting the root URL?

NextJS

export default function Page() {
  return (
    <main>
      <h1>Welcome to Next.js App Router</h1>
      <p>This is the home page.</p>
    </main>
  )
}

A A page with a heading 'Welcome to Next.js App Router' and a paragraph 'This is the home page.'

B A blank page with no content

C An error page because the component is missing a layout

D A page showing only the paragraph 'This is the home page.' without the heading

💡 Hint

Think about what the component returns inside the main tag.

The component returns a main element containing an h1 and a p. This renders exactly as described in option A.

📝 Syntax

intermediate

Which option correctly defines a layout in the Next.js App Router?

In the Next.js App Router, you want to create a layout that wraps all pages in a folder. Which of these code snippets correctly defines a layout component?

A

export default function Layout({ children }) {
  return children
}

B

export default function Layout() {
  return <div>No children here</div>
}

C

export default function Layout(children) {
  return <div>{children}</div>
}

D

export default function Layout({ children }) {
  return <div>{children}</div>
}

💡 Hint

Layouts receive a children prop as an object property.

Option D correctly destructures children from props and returns it wrapped in a div. Option D does not accept children, so it won't wrap pages. Option D returns children directly but misses wrapping. Option D treats children as a direct parameter, which is incorrect.

❓ lifecycle

advanced

When does a React Server Component in Next.js App Router re-run on the server?

Given a React Server Component in the Next.js App Router, under which condition will it re-run on the server to fetch fresh data?

A Only once at build time and never again

B When the user navigates to the page or refreshes the browser

C Every time the user clicks a button inside the component

D Only when the component's client-side state changes

💡 Hint

Think about when server components run in Next.js App Router.

React Server Components run on the server each time the page is requested or refreshed. Client-side state changes or button clicks do not trigger server re-runs unless they cause navigation or data fetching.

🔧 Debug

advanced

Why does this Next.js App Router page cause a runtime error?

Examine this app/page.tsx code:

export default function Page() {
  const data = fetch('https://api.example.com/data')
  return (
    <div>{JSON.stringify(data)}</div>
  )
}

What is the cause of the runtime error?

NextJS

export default async function Page() {
  const data = await fetch('https://api.example.com/data')
  return (
    <div>{JSON.stringify(data)}</div>
  )
}

A fetch returns a Promise, but the code tries to use it synchronously without awaiting

B fetch is not allowed in server components

C JSON.stringify cannot convert objects returned by fetch

D The component is missing a useEffect hook to fetch data

💡 Hint

Remember that fetch returns a Promise and needs to be awaited.

fetch returns a Promise. Without awaiting it, data is a Promise object, which JSON.stringify cannot serialize properly. This causes a runtime error.

❓ state_output

expert

What is the output after clicking the button in this Next.js App Router client component?

Consider this client component in app/counter/page.tsx:

'use client'
import { useState } from 'react'

export default function Counter() {
  const [count, setCount] = useState(0)

  function handleClick() {
    setCount(count + 1)
    setCount(count + 1)
  }

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Increment Twice</button>
    </div>
  )
}

What will the count display after clicking the button once?

NextJS

'use client'
import { useState } from 'react'

export default function Counter() {
  const [count, setCount] = useState(0)

  function handleClick() {
    setCount(count + 1)
    setCount(count + 1)
  }

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Increment Twice</button>
    </div>
  )
}

A Count: NaN

B Count: 0

C Count: 1

D Count: 2

💡 Hint

Remember how React batches state updates with the same value.

Both setCount calls use the same stale value of count (0), so the state updates to 1 only once. To increment twice, use the functional update form.

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