Next.js is a full-stack React framework that adds server-side rendering, file-based routing, and API routes on top of React, which is just a UI library for building components.
React vs Next.js:
React is a JavaScript library for building user interfaces. It handles:
Next.js is a framework built on top of React that adds:
When to use each:
// React requires manual routing setup
import { BrowserRouter, Routes, Route } from 'react-router-dom';
function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
<Route path="/posts/:id" element={<Post />} />
</Routes>
</BrowserRouter>
);
}
// Manual code splitting
const LazyComponent = React.lazy(() => import('./HeavyComponent'));