Page.tsx as route definition in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What does this Next.js Page component render?

Consider this Next.js 14 Page.tsx file in the app directory. What will the user see when visiting this route?

NextJS

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

A <main><h1>Welcome to Next.js 14!</h1><p>This is the home page.</p></main>

B <div><h1>Welcome to Next.js 14!</h1><p>This is the home page.</p></div>

C <main><h2>Welcome to Next.js 14!</h2><p>This is the home page.</p></main>

D <main><h1>Welcome!</h1><p>This is the home page.</p></main>

💡 Hint

Look carefully at the tags and text inside the returned JSX.

The component returns a

element with an

containing exactly 'Welcome to Next.js 14!' and a

with 'This is the home page.'. Only option A matches this exactly.

📝 Syntax

intermediate

Which option correctly exports a Next.js Page component in TypeScript?

Choose the correct way to define and export a Page component in Next.js 14 using TypeScript.

A export function Page() { return <div>Hello</div>; }

B export default const Page = () => <div>Hello</div>;

C function Page() { return <div>Hello</div>; } export Page;

D export default function Page() { return <div>Hello</div>; }

💡 Hint

Next.js expects a default export for the page component.

Option D correctly defines and exports the Page component as the default export. Option D exports a named function, which Next.js does not recognize as a route. Option D has invalid export syntax. Option D has invalid syntax mixing export default and const.

❓ state_output

advanced

What is the rendered output after clicking the button?

This Next.js Page component uses React state. What text is shown after clicking the button once?

NextJS

import { useState } from 'react';

export default function Page() {
  const [count, setCount] = useState(0);
  return (
    <main>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </main>
  );
}

A <main><p>Count: 1</p><button>Increment</button></main>

B <main><p>Count: 0</p><button>Increment</button></main>

C <main><p>Count: NaN</p><button>Increment</button></main>

D <main><p>Count: -1</p><button>Increment</button></main>

💡 Hint

The button increases count by 1 on each click.

Initially count is 0. Clicking the button calls setCount(count + 1), so count becomes 1. The rendered text updates to 'Count: 1'.

❓ lifecycle

advanced

When does the useEffect run in this Next.js Page component?

Given this component, when will the console.log inside useEffect execute?

NextJS

import { useEffect } from 'react';

export default function Page() {
  useEffect(() => {
    console.log('Page mounted');
  }, []);
  return <main><h1>Hello</h1></main>;
}

A Every time the user clicks anywhere on the page.

B Every time the component re-renders.

C Only once after the component first renders on the client.

D Only on the server during initial render.

💡 Hint

An empty dependency array means the effect runs once after mount.

useEffect with an empty dependency array runs only once after the component mounts on the client side. It does not run on server or on re-renders.

🔧 Debug

expert

Why does this Next.js Page component cause a runtime error?

Examine this Page.tsx code. What causes the error when visiting this route?

NextJS

export default function Page() {
  const message = 'Hello';
  return (
    <main>
      <h1>{message.toUppercase()}</h1>
    </main>
  );
}

A The variable 'message' is not declared.

B The method 'toUppercase' is not defined on string, should be 'toUpperCase'.

C JSX elements must have a single parent element.

D The function is missing a return statement.

💡 Hint

Check the spelling of string methods used inside JSX.

JavaScript strings have a method 'toUpperCase' with a capital 'C'. Using 'toUppercase' causes a runtime TypeError because it's undefined.