Lesson 1 +10 XP

Introduction to Next.js & Full-Stack React

Next.js is a premier React framework created by Vercel that enables developers to build full-stack web applications with zero configuration. While standard React applications execute solely on the client side (Single Page Applications or SPAs), Next.js executes code on both the server and the client.

Why Next.js?

Traditional React client-side rendering (CSR) downloads a minimal HTML document and a large JavaScript bundle. The browser then executes the JavaScript to build the DOM. This introduces two major challenges:

Search Engine Optimization (SEO): Search engine web crawlers may struggle to index content rendered purely via client JavaScript.
First Contentful Paint (FCP): Users see a blank screen or loading spinner while waiting for JavaScript bundles to download and execute.

Next.js solves these issues by pre-rendering HTML on the server before serving it to the client.

Feature	React SPA (Vite / CRA)	Next.js Full-Stack Framework
Primary Rendering	Client-side (Browser)	Server-Side & Client-Side
SEO Support	Requires third-party tools / Prerendering	Out-of-the-box Pre-rendering
Routing	Third-party (`react-router-dom`)	Built-in File-System Routing
Backend Capabilities	External API server required	Built-in Server Actions & API Route Handlers
Data Fetching	Client-side `useEffect` / TanStack Query	Direct Server Component async/await

Basic Page Example in Next.js

In Next.js, creating a full-stack page is as simple as exporting a default React component from a file:

// app/page.tsx
export default async function HomePage() {
  const serverTime = new Date().toISOString();

  return (
    <main className="p-8">
      <h1 className="text-3xl font-bold">Welcome to Next.js!</h1>
      <p className="mt-2 text-gray-600">
        This page was pre-rendered on the server at {serverTime}.
      </p>
    </main>
  );
}

Key Capabilities of Next.js

React Server Components (RSC): Fetch data close to your database with zero client-side bundle size.
Server Actions: Perform mutations and handle forms directly without writing boilerplate API endpoints.
Automatic Code Splitting: Each page only loads the JavaScript necessary for that specific route.
Built-in Optimizations: Automatic image, font, and script optimization to achieve top Lighthouse scores.

TL;DR

Next.js is a full-stack React framework by Vercel.
It delivers server-side pre-rendering out of the box, offering superior SEO and FCP performance.
Routing is file-system based, eliminating manual router configurations.
Server Components allow fetching data directly on the server with zero client bundle overhead.