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

Need a 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

Need a 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

Need a 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
  );
}

Need a hint?

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