Why Next.js over plain React - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a Next.js page component that renders a heading.

NextJS

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

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

A<Welcome to Next.js!>

BWelcome to Next.js!

C"Welcome to Next.js!"

DWelcome to Next.js

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting quotes around the string

Using angle brackets instead of quotes

The heading text must be a string inside quotes in JSX.

2fill in blank

medium

Complete the code to import the Next.js Link component for navigation.

NextJS

import [1] from 'next/link';

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

ALink

BRouter

CNavLink

DNavigation

Attempts:

3 left

💡 Hint

Common Mistakes

Using React Router components instead

Misspelling the component name

Next.js uses the Link component from 'next/link' for client-side navigation.

3fill in blank

hard

Fix the error in this Next.js server component export statement.

NextJS

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

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

AApp

Bpage

CPage

Dhome

Attempts:

3 left

💡 Hint

Common Mistakes

Using uppercase 'Page' instead of lowercase

Using generic names like 'App' or 'home'

In Next.js App Router, the default export for a page file must be named page (lowercase) to be recognized as a server component.

4fill in blank

hard

Fill both blanks to create a server action that updates state and triggers a re-render.

NextJS

import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);

  async function increment() {
    await [1](count + 1);
  }

  return (
    <button onClick=[2]>Count: {count}</button>
  );
}

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

AsetCount

Bcount + 1

C() => increment()

Dincrement()

Attempts:

3 left

💡 Hint

Common Mistakes

Calling increment directly in onClick

Passing count + 1 directly to onClick

The increment function calls setCount to update state. The button's onClick needs a function, so we pass () => increment().

5fill in blank

hard

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

NextJS

export async function [1](req, res) {
  const data = { message: 'Hello from API' };
  res.[2](200).[3](data);
}

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

AGET

Bstatus

Cjson

Dsend

Attempts:

3 left

💡 Hint

Common Mistakes

Using lowercase 'get' instead of uppercase 'GET'

Using 'send' instead of 'json' to send JSON response

Next.js API routes export HTTP method functions like GET. The response uses status(200) to set status and json(data) to send JSON.

Practice

1. What is a key advantage of using Next.js instead of plain React?

easy

A. Next.js automatically handles routing and server-side rendering.

B. Next.js requires manual setup for every feature.

C. Next.js does not support React components.

D. Next.js only works for mobile apps.

Solution

1. Step 1: Understand Next.js features

   Next.js adds routing and server-side rendering automatically, unlike plain React which needs manual setup.

2. Step 2: Compare with plain React

   Plain React requires extra setup for routing and server rendering, making Next.js easier and faster to build apps.

3. Final Answer:

   Next.js automatically handles routing and server-side rendering. -> Option A

4. Quick Check:

   Next.js = automatic routing + server rendering [OK]

Hint: Next.js simplifies routing and server rendering automatically [OK]

Common Mistakes:

• Thinking Next.js needs manual routing setup
• Believing Next.js doesn't support React components
• Assuming Next.js is only for mobile apps

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

easy

A. Write HTML files and link them manually.

B. Manually configure routes in a separate routing file.

C. Use a special Route component inside App.js.

D. Create a file in the pages folder with a React component export.

Solution

1. Step 1: Recall Next.js routing convention

   Next.js uses the pages folder where each file automatically becomes a route.

2. Step 2: Identify correct page creation method

   Creating a React component in pages exports a page; no manual routing needed.

3. Final Answer:

   Create a file in the pages folder with a React component export. -> Option D

4. Quick Check:

   Next.js pages = files in pages folder [OK]

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

Common Mistakes:

• Trying to manually configure routes
• Using React Router inside Next.js
• Writing plain HTML files for pages

3. Given this Next.js page component, what will be rendered on the screen?

export default function Home() {
  return <h1>Welcome to Next.js!</h1>
}

medium

A. A blank page with no content.

B. A heading that says 'Welcome to Next.js!'.

C. A button labeled 'Welcome to Next.js!'.

D. An error because of missing import.

Solution

1. Step 1: Analyze the component output

   The component returns an <h1> element with text 'Welcome to Next.js!'.

2. Step 2: Understand React rendering in Next.js

   Next.js renders React components as HTML; no import needed for React in latest versions.

3. Final Answer:

   A heading that says 'Welcome to Next.js!'. -> Option B

4. Quick Check:

   Component returns <h1> text = heading shown [OK]

Hint: Return JSX element to render content on page [OK]

Common Mistakes:

• Expecting import React is always required
• Confusing element type (heading vs button)
• Assuming blank page without return

4. You wrote this Next.js page but get a runtime error:

export default function About() {
  return (
    <div>
      <h2>About Page</h2>
      <p>Learn more about us.</p>
    </div>
  )
}

What is the likely cause?

medium

A. No error; code is correct and should work.

B. Using HTML tags instead of React components.

C. Missing parentheses around JSX return.

D. Forgetting to import React explicitly.

Solution

1. Step 1: Check JSX syntax

   The JSX is correctly wrapped in parentheses and uses valid HTML tags inside React component.

2. Step 2: Consider React import requirement

   Since React 17+, explicit import of React is not required for JSX in Next.js.

3. Final Answer:

   No error; code is correct and should work. -> Option A

4. Quick Check:

   Valid JSX + no React import needed = no error [OK]

Hint: React import not needed in Next.js for JSX [OK]

Common Mistakes:

• Assuming React import is always required
• Thinking JSX needs special wrapping here
• Confusing HTML tags with React components

5. Which feature of Next.js helps improve SEO compared to plain React apps?

hard

A. Using client-side routing only without server rendering.

B. Requiring manual setup of meta tags in every component.

C. Server-side rendering that sends fully rendered HTML to browsers.

D. Disabling JavaScript to speed up page load.

Solution

1. Step 1: Understand SEO needs

   Search engines read HTML content; server-side rendering sends full HTML for better SEO.

2. Step 2: Compare Next.js and plain React

   Plain React apps render mostly on client side, which can delay content visibility to search engines.

3. Final Answer:

   Server-side rendering that sends fully rendered HTML to browsers. -> Option C

4. Quick Check:

   Server-side rendering = better SEO [OK]

Hint: Server-side rendering improves SEO by sending full HTML [OK]

Common Mistakes:

• Thinking client-side routing alone improves SEO
• Believing manual meta tag setup is required everywhere
• Assuming disabling JavaScript helps SEO