What is Next.js - Interactive Quiz & Practice

Practice - 5 Tasks

1fill in blank

easy

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

NextJS

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

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

A<div>Hello</div>

Bconsole.log('Hello')

C"Welcome to Next.js!"

D12345

Attempts:

3 left

💡 Hint

Common Mistakes

Returning a console.log statement instead of JSX.

Returning a number without JSX tags.

The main content of a Next.js page is returned as JSX inside the component function.

2fill in blank

medium

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

NextJS

import [1] from 'next/link';

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

ARouter

BLink

CNav

DRoute

Attempts:

3 left

💡 Hint

Common Mistakes

Using Router instead of Link.

Using Nav or Route which are not Next.js components.

Next.js provides a Link component for client-side navigation.

3fill in blank

hard

Fix the error in this Next.js page export statement.

NextJS

export [1] function About() {
  return <p>About page</p>;
}

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

Adefault

Bconst

Clet

Dvar

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting to use default in the export.

Using variable declarations instead of function export.

Next.js pages must export a default function component.

4fill in blank

hard

Fill both blanks to create a server component that fetches data.

NextJS

export async function [1]() {
  const res = await fetch('/api/data');
  const data = await res.[2]();
  return data;
}

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

AgetServerSideProps

Bjson

Ctext

DgetStaticProps

Attempts:

3 left

💡 Hint

Common Mistakes

Using getStaticProps when dynamic data is needed.

Parsing response with text() instead of json().

getServerSideProps fetches data on each request, and res.json() parses the response as JSON.

5fill in blank

hard

Fill all three blanks to create a Next.js API route handler.

NextJS

export default function handler(req, res) {
  if (req.method === '[1]') {
    res.status([2]).json({ message: '[3]' });
  } else {
    res.status(405).end();
  }
}

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

APOST

B200

CHello from API

DGET

Attempts:

3 left

💡 Hint

Common Mistakes

Using POST instead of GET for this handler.

Using wrong status codes or missing JSON response.

This API route responds to GET requests with status 200 and a JSON message.

Practice

1. What is Next.js primarily used for?

easy

A. Writing backend server code without frontend

B. Creating mobile apps with native device access

C. Designing databases for web applications

D. Building React-based websites with routing and performance features

Solution

1. Step 1: Understand Next.js purpose

   Next.js is a framework built on top of React to simplify building websites.

2. Step 2: Identify key features

   It adds routing, faster loading, and SEO support to React apps.

3. Final Answer:

   Building React-based websites with routing and performance features -> Option D

4. Quick Check:

   Next.js = React websites + routing + speed [OK]

Hint: Next.js helps build React websites easily [OK]

Common Mistakes:

• Confusing Next.js with mobile app frameworks
• Thinking Next.js is only backend
• Assuming Next.js is a database tool

2. Which of the following is the correct way to create a page in Next.js?

easy

A. Write HTML files in the public folder

B. Add routes manually in a routing config file

C. Create a React component inside the pages folder

D. Use index.html in the root directory

Solution

1. Step 1: Recall Next.js page creation method

   Next.js uses the pages folder where each file is a React component representing a page.

2. Step 2: Compare options

   Only Create a React component inside the pages folder matches this pattern; others describe static or manual routing methods not used in Next.js.

3. Final Answer:

   Create a React component inside the pages folder -> Option C

4. Quick Check:

   Next.js pages = React components in pages folder [OK]

Hint: Pages are React components in the pages folder [OK]

Common Mistakes:

• Thinking HTML files in public folder create pages
• Believing manual routing config is needed
• Using index.html instead of React components

3. What will Next.js do when you create a file about.js inside the pages folder?

medium

A. Serve the page at URL /about automatically

B. Require manual route setup to access /about

C. Ignore the file unless imported elsewhere

D. Throw an error because pages must be in src folder

Solution

1. Step 1: Understand Next.js file-based routing

   Next.js automatically maps files in pages folder to URLs matching the filename.

2. Step 2: Apply to about.js

   The file about.js becomes accessible at /about without extra setup.

3. Final Answer:

   Serve the page at URL /about automatically -> Option A

4. Quick Check:

   File in pages = URL path [OK]

Hint: File name in pages = URL path automatically [OK]

Common Mistakes:

• Thinking manual routing is needed
• Assuming files outside src are required
• Believing files are ignored if not imported

4. You wrote a React component in pages/contact.js but visiting /contact shows a 404 error. What is the likely mistake?

medium

A. The file is placed inside public folder

B. The component is not exported as default

C. Next.js requires manual route registration

D. The file name must be Contact.jsx with uppercase

Solution

1. Step 1: Check Next.js page export rules

   Each page component must be the default export from its file to be recognized.

2. Step 2: Analyze error cause

   If the component is not exported as default, Next.js won't load it, causing 404.

3. Final Answer:

   The component is not exported as default -> Option B

4. Quick Check:

   Pages need default export [OK]

Hint: Always export page component as default [OK]

Common Mistakes:

• Placing pages in public folder instead of pages
• Thinking manual route setup is needed
• Using uppercase file names incorrectly

5. You want to improve SEO and loading speed of your React website. How does Next.js help achieve this?

hard

A. By pre-rendering pages on the server and generating static HTML

B. By running React code only on the client side after page load

C. By disabling JavaScript to speed up loading

D. By converting React components into plain HTML files manually

Solution

1. Step 1: Understand Next.js rendering methods

   Next.js pre-renders pages either at build time or on the server, creating static or server-rendered HTML.

2. Step 2: Connect to SEO and speed benefits

   Pre-rendered HTML loads faster and is better for search engines than client-only React apps.

3. Final Answer:

   By pre-rendering pages on the server and generating static HTML -> Option A

4. Quick Check:

   Next.js pre-renders for SEO and speed [OK]

Hint: Next.js pre-renders pages for SEO and speed [OK]

Common Mistakes:

• Thinking React runs only on client in Next.js
• Believing JavaScript must be disabled
• Assuming manual HTML conversion is needed