React Frameworks: Next.js, React Router and When to Use Them

React itself is a library for building user interfaces. A full website or app also needs routing (several pages), data loading, server rendering for speed and search engines, and a way to build and deploy everything. Frameworks bundle these decisions on top of React.

Two ways to build a React app#

1. A client-side app (single-page application) built with Vite. The server sends one almost empty HTML page plus JavaScript; React builds the page in the browser. You add a router and a data library yourself.

• Great for dashboards, internal tools and apps behind a login, where search engines do not matter.
• Simple to host: the dist/ folder is static files.

2. A framework such as Next.js or React Router in framework mode. Pages can be rendered to HTML on the server or at build time, so users see content before JavaScript loads and search engines can read it.

• Better for public websites, content and e-commerce, where first load speed and SEO matter.
• Routing, data loading and code splitting are built in.

The React documentation recommends a framework for new full apps, and describes building from scratch with a tool such as Vite when a framework does not fit your needs.

Rendering strategies#

With SSR and SSG, React then hydrates the HTML in the browser: it attaches event handlers so the page becomes interactive. This site, for example, generates its lesson pages ahead of time with Next.js; the live previews you have been using are client components that run in your browser.

Next.js in brief#

Next.js (by Vercel) is the most widely used React framework.

npx create-next-app@latest my-site

Key ideas of its App Router:

• File-based routing: app/page.tsx is /, app/about/page.tsx is /about, app/products/[id]/page.tsx is /products/42.
• Layouts: app/layout.tsx wraps every page (header, footer) and keeps its state while you navigate.
• Server Components by default: components run on the server, can read databases or call APIs directly with await, and send only HTML and data to the browser, with no JavaScript for that component.
• Client Components: add "use client" at the top of a file for components that need state, effects or event handlers.

// app/products/page.tsx: a Server Component (no "use client")
import AddToCartButton from "./add-to-cart-button";

export default async function ProductsPage() {
  const res = await fetch("https://api.example.com/products");
  const products: { id: number; name: string; price: number }[] = await res.json();
  return (
    <ul>
      {products.map((p) => (
        <li key={p.id}>
          {p.name} — ₹{p.price} <AddToCartButton id={p.id} />
        </li>
      ))}
    </ul>
  );
}

// app/products/add-to-cart-button.tsx: a Client Component
"use client";
import { useState } from "react";

export default function AddToCartButton({ id }: { id: number }) {
  const [added, setAdded] = useState(false);
  return <button onClick={() => setAdded(true)}>{added ? "Added ✓" : "Add to cart"}</button>;
}

The page fetches data on the server with plain async/await (no useEffect, no loading flash), while only the small interactive button ships JavaScript to the browser. (These files only run inside a Next.js project with that API available, so they are shown as code.)

React Server Components#

Server Components are a React feature, which frameworks such as Next.js implement:

• They run only on the server (or at build time), so they can use secrets and databases safely and add zero JavaScript to the browser bundle.
• They cannot use state, effects or browser APIs; those belong in Client Components.
• Server Components can render Client Components, passing serialisable props (and JSX as children).

Think of the server part as the data and structure and the client parts as islands of interactivity.

Other options#

• React Router (framework mode): the successor to Remix, with loaders and actions for data and server rendering. In library mode it is a simple client-side router (see Routing).
• Astro: content-focused sites that use React (or other libraries) only for interactive islands.
• Expo / React Native: the same React knowledge for iOS and Android apps.

How to choose#

• Learning React, or building a dashboard or tool behind a login: Vite + React Router.
• Public website where speed and SEO matter, or you want front end and back end in one project: Next.js (or React Router framework mode).
• Mostly static content with a little interactivity: Astro or Next.js static export.
• Mobile app: React Native with Expo.

Everything in this course (components, props, state, hooks) works the same in all of them.

Common mistakes#

Key takeaway#

Next, the projects: Project: To-Do App.