Topic 20 of 47

Framework vs React Library

Overview

React is a UI library that provides rendering primitives, but leaves routing, data fetching, and SSR up to the developer. Next.js is an opinionated framework built on top of React that provides a complete, production-ready architecture with built-in routing, SSR/SSG, and optimizations out of the box.

Syntax

tsx

// React (Client-Side Rendering only)
import { BrowserRouter, Route, Routes } from 'react-router-dom';
function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
      </Routes>
    </BrowserRouter>
  );
}

// Next.js (Built-in File-Based Routing + SSR)
// app/page.tsx -> Automatically maps to "/"
export default function Home() {
  return <h1>Welcome Home</h1>;
}

Common Pitfalls

Don't try to use standard React routers like 'react-router-dom' in Next.js. Use the built-in file system router.
React alone creates Single Page Applications (SPAs) which are bad for SEO. Next.js solves this with server-side rendering.

Real-World Example

Next.js provides a unified structure for both frontend and backend logic, unlike standard React:

example

tsx

// Next.js handles both UI and API in one project structure
project-root/
├── app/
│   ├── page.tsx        // UI component (Server/Client)
│   ├── layout.tsx      // Global layout shell
│   └── api/
│       └── route.ts    // Backend API endpoint
├── next.config.ts      // Framework configuration
└── package.json

Take Next.js Quiz