Why Next.js over plain React - See It in Action

Why Next.js over plain React

📖 Scenario: You are building a simple website that shows a list of blog posts. You want to understand why using Next.js can help you more than just using plain React.

🎯 Goal: Build a basic Next.js app that fetches blog post data on the server and displays it, showing how Next.js handles server-side rendering and routing compared to plain React.

📋 What You'll Learn

Create a Next.js page component that fetches blog posts data

Use server-side data fetching with getServerSideProps

Render the list of blog posts on the page

Add a simple navigation link using Next.js Link component

💡 Why This Matters

🌍 Real World

Many websites need fast loading and good SEO. Next.js helps by rendering pages on the server and managing routes easily.

💼 Career

Understanding Next.js is valuable for web developers because it is widely used in industry for building scalable React applications with better performance.

1

Create initial blog posts data

Create a constant called posts that is an array of objects with these exact entries: { id: 1, title: 'Hello Next.js' } and { id: 2, title: 'Learn React' }.

NextJS

// Create a constant called posts with two blog post objects
// Your code here

Hint

Use const posts = [ ... ] with two objects inside the array.

2

Add server-side data fetching with getServerSideProps

Add an async function called getServerSideProps that returns an object with props containing the posts array.

NextJS

const posts = [
  { id: 1, title: 'Hello Next.js' },
  { id: 2, title: 'Learn React' }
];

// Add getServerSideProps function below
// Your code here

Hint

Define getServerSideProps to return { props: { posts } }.

3

Create the Next.js page component to display posts

Create a default exported function component called Blog that receives posts as a prop and returns a <ul> with each post's title inside a <li>. Use post.id as the key in the map.

NextJS

const posts = [
  { id: 1, title: 'Hello Next.js' },
  { id: 2, title: 'Learn React' }
];

export async function getServerSideProps() {
  return {
    props: { posts }
  };
}

// Create Blog component below
// Your code here

Hint

Use posts.map inside the component to create list items.

4

Add navigation link using Next.js Link component

Import Link from next/link and add a <nav> above the list with a <Link> to /about that shows the text About Page.

NextJS

import Link from 'next/link';

const posts = [
  { id: 1, title: 'Hello Next.js' },
  { id: 2, title: 'Learn React' }
];

export async function getServerSideProps() {
  return {
    props: { posts }
  };
}

export default function Blog({ posts }) {
  return (
    // Add navigation link above the list
    // Your code here
  );
}

Hint

Use import Link from 'next/link' and wrap the link text inside <Link>.

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