Why patterns improve architecture in NextJS - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the Next.js Link component correctly.

NextJS

import [1] from 'next/link';

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

Alink

BRouterLink

CLinkComponent

DLink

Attempts:

3 left

💡 Hint

Common Mistakes

Using lowercase or incorrect component names in import statements.

The Next.js Link component must be imported with the exact name Link to work properly.

2fill in blank

medium

Complete the code to create a functional component that returns a main HTML element.

NextJS

export default function Home() {
  return <[1]>Welcome to Next.js!</[1]>;
}

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

Adiv

Bsection

Cmain

Dheader

Attempts:

3 left

💡 Hint

Common Mistakes

Using generic div instead of semantic elements.

Using the main element improves accessibility by indicating the main content area.

3fill in blank

hard

Fix the error in the Next.js page component by completing the export statement correctly.

NextJS

function About() {
  return <p>About us page</p>;
}

export default [1];

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

AAbout

Babout

Cabout()

DAbout()

Attempts:

3 left

💡 Hint

Common Mistakes

Exporting lowercase or calling the function instead of exporting the function itself.

The component name About must be exported exactly as declared, without parentheses.

4fill in blank

hard

Fill both blanks to create a reusable button component with a click handler.

NextJS

export function Button({ onClick }) {
  return <button [1]=[2]>Click me</button>;
}

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

AonClick

BhandleClick

CclickHandler

DonPress

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect event attribute names or handler function names.

The button element uses the onClick attribute to handle clicks, and the handler function is passed as the onClick prop.

5fill in blank

hard

Fill all three blanks to create a Next.js page that fetches data server-side and displays it.

NextJS

import [1] from 'next';

export const getServerSideProps: [2] = async () => {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();
  return { props: { data } };
};

export default function Page({ data }) {
  return <pre>{JSON.stringify([3], null, 2)}</pre>;
}

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

A{ GetServerSideProps }

BGetServerSideProps

Cdata

Dprops

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong import names or rendering incorrect variables.

GetServerSideProps is the correct type for the server-side props function, and data is the prop passed to the component to display.