Next.js Fundamentals

what Next.js is

Next.js is a React-based framework created by Vercel (formerly ZEIT). It was first released in 2016. Unlike React, which is a UI library, Next.js is a full-stack framework that provides routing, rendering strategies, and performance optimizations out of the box.

Next.js uses React as its core rendering layer, but extends it with server-side capabilities and build-time optimizations.

why Next.js was created

React was designed as a client-side UI library. Its responsibility is to describe how the UI changes in response to state and props. It intentionally does not solve problems such as:

As React applications grew larger and more product-facing, teams had to build custom solutions for these problems using additional tooling and infrastructure.

Next.js was created to standardize and simplify these patterns by providing a framework that solves them in a consistent, production-ready way.

why react alone is not enough in some cases

A typical React application renders entirely in the browser:

  1. the browser downloads a mostly empty HTML file
  2. JavaScript is loaded
  3. React executes and renders the UI

This approach is known as client-side rendering (CSR).

While CSR works well for highly interactive applications, it has drawbacks:

For applications where performance, discoverability, or content visibility matter, CSR alone is often insufficient.

what problem Next.js solves

Next.js addresses these limitations by enabling multiple rendering strategies:

This allows developers to choose the most appropriate rendering model per page, rather than forcing a single approach for the entire application.

browser vs server responsibilities

in a traditional React app (CSR)

in a Next.js app

This separation allows Next.js to optimize both initial load and interactivity.

why SEO matters

Search engines prioritize:

Although modern search engines can execute JavaScript, doing so is:

Pages that ship meaningful HTML early are indexed more reliably and rank better.

server-side rendering (SSR)

Server-side rendering means generating HTML for a page on the server for each request.

flow:

  1. request arrives
  2. server fetches data
  3. React renders HTML
  4. HTML is sent to the browser
  5. browser hydrates the page

SSR is useful when:

trade-offs:

example:

// pages/product.tsx
export async function getServerSideProps(context) {
  // runs on the server for every request
  const res = await fetch(`https://api.example.com/product/${context.params.id}`);
  const product = await res.json();

  return {
    props: { product }
  };
}

export default function Product({ product }) {
  return (
    <div>
      <h1>{product.name}</h1>
      <p>{product.description}</p>
    </div>
  );
}

static site generation (SSG)

Static site generation means generating HTML at build time.

flow:

  1. pages are rendered during build
  2. HTML files are stored on a CDN
  3. requests are served instantly

SSG is ideal when:

Next.js also supports incremental static regeneration (ISR), allowing static pages to be updated after deployment without rebuilding the entire site.

why google prefers HTML

HTML allows search engines to:

Although Google can execute JavaScript, it does so in a secondary rendering pass, which may delay indexing and ranking.

Providing pre-rendered HTML improves:

how Next.js improves performance

Next.js includes several built-in performance optimizations:

1. code splitting per page

Each page only loads the JavaScript it needs:

pages/
  home.tsx    → only loads home.js
  about.tsx   → only loads about.js
  blog.tsx    → only loads blog.js

2. automatic static optimization

Next.js automatically determines which pages can be statically generated.

3. image optimization

import Image from 'next/image';

<Image
  src="/photo.jpg"
  width={800}
  height={600}
  alt="description"
/>

automatic:

4. prefetching of linked pages

Links in the viewport are prefetched automatically:

import Link from 'next/link';

<Link href="/about">About</Link>
// prefetched when visible

5. server-side data fetching

Data can be fetched on the server, reducing client-side requests.

when to use Next.js

Next.js is a good choice when:

it may be unnecessary when:

hydration explained

Hydration is the process where Next.js attaches React event handlers to server-rendered HTML.

flow:

  1. server renders HTML - full content visible
  2. HTML sent to browser - user sees content
  3. JavaScript loads - in parallel
  4. React hydrates - adds interactivity
  5. page becomes interactive - buttons work, state updates

why hydration matters:

summary

Next.js is a React framework created to solve rendering, performance, and SEO limitations of client-side React applications. By supporting server-side and build-time rendering strategies, it enables faster, more discoverable, and more scalable web applications without requiring custom infrastructure.

core benefits:

when to choose Next.js:

when to stick with React: