Page.tsx as route definition in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a simple Next.js page component.

NextJS

export default function [1]() {
  return <h1>Hello, Next.js!</h1>;
}

Drag options to blanks, or click blank then click option'

Apage

BPage

CHomePage

DApp

Attempts:

3 left

💡 Hint

Common Mistakes

Using uppercase function names like 'Page' which is allowed but not the recommended convention.

Naming the function 'App' which is reserved for the root app component.

The default export function name can be anything, but 'page' is the convention for Next.js route files named Page.tsx.

2fill in blank

medium

Complete the code to import React and define a page component with a heading.

NextJS

import [1] from 'react';

export default function page() {
  return <h2>Welcome to Next.js!</h2>;
}

Drag options to blanks, or click blank then click option'

AReact

BComponent

CuseState

DuseEffect

Attempts:

3 left

💡 Hint

Common Mistakes

Importing hooks like useState or useEffect when they are not used.

Importing 'Component' which is for class components, not functional ones.

Importing 'React' is necessary for JSX to work in some setups, although Next.js 13+ may not require explicit React import.

3fill in blank

hard

Fix the error in the page component export syntax.

NextJS

const page = () => {
  return <p>This is a Next.js page.</p>;
};

export [1] page;

Drag options to blanks, or click blank then click option'

Aconst

Bnamed

Cdefault

Dfunction

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'export named' which is invalid syntax.

Forgetting to export the component at all.

Next.js expects the page component to be the default export from the file.

4fill in blank

hard

Fill both blanks to create a page component that returns a main section with a heading.

NextJS

export default function [1]() {
  return (
    <[2]>
      <h1>My Next.js Page</h1>
    </[2]>
  );
}

Drag options to blanks, or click blank then click option'

Apage

BPage

Cmain

Dsection

Attempts:

3 left

💡 Hint

Common Mistakes

Using uppercase 'Page' as function name which is allowed but not conventional.

Using 'section' instead of 'main' which is less semantic for main content.

The function name 'page' matches Next.js route convention, and 'main' is the semantic HTML element for main content.

5fill in blank

hard

Fill all three blanks to define a page component that uses a React hook and renders a button with a click handler.

NextJS

import React, { [1] } from 'react';

export default function [2]() {
  const [count, setCount] = [3](0);

  return (
    <button onClick={() => setCount(count + 1)}>
      Clicked {count} times
    </button>
  );
}

Drag options to blanks, or click blank then click option'

AuseState

Bpage

CuseState()

DPage

Attempts:

3 left

💡 Hint

Common Mistakes

Not importing 'useState' or calling it incorrectly.

Using uppercase 'Page' as function name which is allowed but not conventional.

Forgetting parentheses when calling 'useState'.

Import 'useState' hook, name the function 'page' for route, and call 'useState()' to create state.

Practice

1. In Next.js App Router, what does a Page.tsx file represent?

easy

A. A route that renders the default exported React component

B. A configuration file for server settings

C. A CSS stylesheet for styling components

D. A utility file for API calls

Solution

1. Step 1: Understand the role of Page.tsx in Next.js App Router

   A Page.tsx file automatically defines a route based on its folder location.

2. Step 2: Identify what the file exports

   The default export of Page.tsx is the React component rendered when visiting that route.

3. Final Answer:

   A route that renders the default exported React component -> Option A

4. Quick Check:

   Page.tsx = route component [OK]

Hint: Page.tsx file = route + component [OK]

Common Mistakes:

• Thinking Page.tsx is for styling or config
• Confusing Page.tsx with API route files
• Assuming Page.tsx exports multiple components

2. Which of the following is the correct way to define a route component in Page.tsx?

easy

A. export default function Page() { return Hello }

B. function Page() { return Hello }

C. export function Page() { return Hello }

D. const Page = () => { Hello }

Solution

1. Step 1: Check for default export

   Next.js requires the route component to be the default export from Page.tsx.

2. Step 2: Verify the function returns JSX correctly

   The function must return JSX explicitly; arrow functions need a return statement or parentheses.

3. Final Answer:

   export default function Page() { return <div>Hello</div> } -> Option A

4. Quick Check:

   Default export + returns JSX = export default function Page() { return
   Hello } [OK]

Hint: Default export function returning JSX is correct [OK]

Common Mistakes:

• Missing default export
• Arrow function without return statement
• Named export instead of default

3. Given this folder structure in Next.js App Router:
/app/about/Page.tsx exports a component showing <h1>About Us</h1>.
What will be rendered when visiting /about in the browser?

medium

A. An error because Page.tsx is missing

B. About Us

C. A blank page

D. The content of the root Page.tsx

Solution

1. Step 1: Map folder to route

   The folder /app/about corresponds to the route /about.

2. Step 2: Render the default export from Page.tsx

   The Page.tsx inside /about exports a component rendering <h1>About Us</h1>.

3. Final Answer:

   <h1>About Us</h1> -> Option B

4. Quick Check:

   Folder name = route, Page.tsx renders component [OK]

Hint: Folder name = route URL, Page.tsx renders content [OK]

Common Mistakes:

• Confusing root Page.tsx with nested routes
• Expecting error if Page.tsx exists
• Thinking route needs explicit config

4. What is wrong with this Page.tsx file?

export default function Page() {
  
Welcome

}

medium

A. Function name must be lowercase

B. Page.tsx cannot export a function

C. JSX must be wrapped in a fragment

D. Missing return statement inside the function

Solution

1. Step 1: Check function body for return

   The function body has JSX but no return keyword, so it returns undefined.

2. Step 2: Understand JSX rendering requirement

   React components must return JSX explicitly or implicitly; missing return causes no render.

3. Final Answer:

   Missing return statement inside the function -> Option D

4. Quick Check:

   JSX without return = error [OK]

Hint: Always return JSX from component functions [OK]

Common Mistakes:

• Assuming JSX auto-returns without return
• Thinking function name case matters
• Believing JSX must be wrapped in fragment always

5. You want to create a nested route /dashboard/settings in Next.js App Router. Which folder and file structure correctly defines this route?

hard

A. /app/dashboard-settings/Page.tsx

B. /app/dashboard/Page.tsx and /app/settings/Page.tsx

C. /app/dashboard/settings/Page.tsx with default export component

D. /app/dashboard/settings.tsx

Solution

1. Step 1: Understand nested route folder structure

   Nested routes are created by nesting folders inside /app matching the URL path segments.

2. Step 2: Identify correct file placement

   The route /dashboard/settings requires /app/dashboard/settings/Page.tsx with a default export component.

3. Final Answer:

   /app/dashboard/settings/Page.tsx with default export component -> Option C

4. Quick Check:

   Nested folders + Page.tsx = nested route [OK]

Hint: Nested folders match nested routes, Page.tsx inside last folder [OK]

Common Mistakes:

• Placing Page.tsx in wrong folder
• Using dash instead of nested folders
• Naming file settings.tsx instead of Page.tsx