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.