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.