Static rendering (default) in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to export a React component that renders a heading.

NextJS

export default function Home() {
  return <h1>[1]</h1>;
}

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

A<h1>Welcome</h1>

BWelcome to Next.js!

C"Welcome to Next.js!"

D{Welcome to Next.js!}

Attempts:

3 left

💡 Hint

Common Mistakes

Not using quotes around the text inside JSX.

Trying to return plain text without JSX tags.

The component must return valid JSX. The heading text should be a string inside quotes.

2fill in blank

medium

Complete the code to statically export a page component in Next.js.

NextJS

export default function [1]() {
  return <main>Static content</main>;
}

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

APage

BHome

CApp

DComponent

Attempts:

3 left

💡 Hint

Common Mistakes

Using reserved words as function names.

Leaving the function unnamed.

The default export function name can be anything, but 'Home' is a common convention for the main page.

3fill in blank

hard

Fix the error in the static page component by completing the return statement.

NextJS

export default function About() {
  return [1];
}

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

AAbout us

Bdiv>About us</div>

C"About us"

D<div>About us</div>

Attempts:

3 left

💡 Hint

Common Mistakes

Returning plain text without JSX tags.

Missing the opening tag in JSX.

The return must be valid JSX. It needs to be wrapped in a tag like <div>.

4fill in blank

hard

Fill both blanks to create a static page that renders a section with a heading.

NextJS

export default function Contact() {
  return <[1]><h2>[2]</h2></[1]>;
}

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

Asection

Bdiv

CContact us

DGet in touch

Attempts:

3 left

💡 Hint

Common Mistakes

Using non-semantic tags like <div> for main sections.

Using incorrect heading text.

The outer tag should be <section> for semantic meaning, and the heading text should be 'Contact us'.

5fill in blank

hard

Fill all three blanks to create a static Next.js page with a header, main, and footer.

NextJS

export default function Layout() {
  return (
    <>
      <[1]><h1>Site Title</h1></[1]>
      <[2]><p>Welcome to our site.</p></[2]>
      <[3]><small>© 2024</small></[3]>
    </>
  );
}

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

Aheader

Bmain

Cfooter

Dsection

Attempts:

3 left

💡 Hint

Common Mistakes

Using non-semantic tags like <div> or <section> incorrectly.

Mixing up the order of header, main, and footer.

Use semantic HTML5 tags: <header> for the top, <main> for main content, and <footer> for the bottom.