Learn the concept
Next.js Fundamentals
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:
App Router vs Pages Router:
app/ directory) is the recommended approach for new projectspages/ directory) is the legacy system, still supported but not recommended for new appsCaching in Next.js 16:
Next.js 16 introduced the "use cache" directive for explicit, opt-in caching. Unlike earlier versions, fetch requests are not cached by default — you must explicitly opt in using "use cache" at the component or function level.
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'));Build a high-performance marketing site with SSG for fast page loads, SEO-optimized metadata, and image optimization — all without configuring a separate build pipeline.
Create a storefront with server-rendered product pages for SEO, dynamic cart functionality with client components, and API routes for checkout processing.
Ship a personal portfolio with statically generated project pages, MDX blog posts, and automatic image optimization for screenshots and demos.
Build the same app (a blog with routing, data fetching, and images) in both plain React and Next.js. Compare bundle size, Lighthouse scores, SEO output, and developer experience side by side.
Build a todo app using Next.js App Router with server components for the list, client components for interactivity, and route handlers for the REST API — demonstrating the full-stack capability in one project.
Vercel's own website and documentation are built with Next.js, showcasing SSG for docs pages, ISR for blog posts, and edge functions for dynamic content.
Netflix uses Next.js for their jobs portal, leveraging server-side rendering for SEO and fast initial page loads across global job listings.