What Is Next.js?
Next.js is an open-source React framework maintained by Vercel that adds the production infrastructure React itself does not ship with: file-based routing, server-side rendering, static site generation, API endpoints, image and font optimization, and a build pipeline tuned for performance. Where React is a UI library for composing components, Next.js is an opinionated framework that decides how those components get compiled, routed, and delivered to the browser.
Cricket analogy: React is like a batter with pure technique, but Next.js is the full support system around Virat Kohli — coaches, analysts, and a scheduled net session — that turns raw talent into a professional, tournament-ready setup.
Why Use Next.js Over Plain React?
A plain React app created with a bundler like Vite gives you components and state, but you must wire up routing, code-splitting, SEO metadata, and a deployment strategy yourself. Next.js provides these as first-class, convention-driven features: create a file in the app directory and it becomes a route; export a metadata object and it becomes your page's SEO tags. This reduces boilerplate and enforces patterns that scale to large teams.
Cricket analogy: Setting up plain React routing yourself is like a club team building its own scoring app from scratch, while Next.js is adopting the BCCI's existing broadcast and scoring infrastructure already proven across IPL seasons.
Core Features
Next.js bundles several capabilities that would otherwise require separate tools: server-side rendering (SSR) generates HTML per request, static site generation (SSG) pre-renders pages at build time, incremental static regeneration (ISR) refreshes static pages on a timer, and API routes let you write backend endpoints inside the same project using route.ts files. The next/image and next/font components also automatically optimize images and web fonts without extra configuration.
Cricket analogy: SSR is like a live ball-by-ball commentary generated fresh each delivery, while SSG is like a pre-recorded match highlights reel from a 2011 World Cup final, ready before anyone asks to watch it.
// app/page.tsx
export default function HomePage() {
return (
<main>
<h1>Welcome to Next.js</h1>
<p>This file automatically becomes the route "/".</p>
</main>
);
}
// app/blog/[slug]/page.tsx
export async function generateStaticParams() {
const posts = await fetch('https://api.example.com/posts').then(r => r.json());
return posts.map((post: { slug: string }) => ({ slug: post.slug }));
}
export default async function BlogPost({ params }: { params: { slug: string } }) {
const post = await fetch(`https://api.example.com/posts/${params.slug}`).then(r => r.json());
return <article><h1>{post.title}</h1><p>{post.body}</p></article>;
}Next.js is created and maintained by Vercel, and while it can be deployed anywhere Node.js runs (or as a static export), it is tightly integrated with Vercel's hosting platform for features like Edge Functions and automatic preview deployments.
Rendering Strategies at a Glance
Next.js lets you choose a rendering strategy per route rather than committing an entire app to one approach. Static rendering (SSG) produces HTML at build time and is ideal for marketing pages or blog posts that rarely change. Dynamic rendering (SSR) produces HTML per request, suited to personalized dashboards. Client-side rendering still happens for interactive components marked with the "use client" directive, and streaming lets parts of a page render as data becomes ready instead of blocking on the slowest fetch.
Cricket analogy: Choosing rendering per route is like a captain like Rohit Sharma setting a different field for a pace bowler versus a spinner — the strategy adapts to what each specific over demands rather than using one fixed plan.
A common misconception is that Next.js is only for static websites. In reality it supports fully dynamic, personalized, request-time rendering just as well as static generation — the framework's value is in letting you mix strategies per route, not in forcing you into one.
- Next.js is a React framework that adds routing, rendering, and backend capabilities on top of the React library.
- It is created and maintained by Vercel and integrates closely with Vercel's deployment platform.
- Core features include SSR, SSG, ISR, API routes, and automatic image/font optimization.
- Routing is file-based: creating a file in the app directory automatically creates a route.
- Rendering strategy can be chosen per route rather than applied to the whole app.
- Streaming allows parts of a page to render as data becomes available.
- Next.js reduces the boilerplate that a bare React + bundler setup would require.
Practice what you learned
1. What is the primary relationship between React and Next.js?
2. Which rendering strategy generates HTML for a page at build time?
3. What does Incremental Static Regeneration (ISR) allow you to do?
4. Where do you typically define an API endpoint in a Next.js app using the App Router?
5. Which statement about Next.js rendering strategies is accurate?
Was this page helpful?
You May Also Like
The App Router vs Pages Router
A comparison of Next.js's two routing systems — the legacy Pages Router and the modern App Router built on React Server Components.
Creating a Next.js Project
How to scaffold a new Next.js application with create-next-app, understand its generated project structure, and run the development server.
File-Based Routing
How Next.js derives an application's routes automatically from the folder structure inside the app directory, including dynamic segments and navigation.
Related Reading
Related Study Notes in Web Development
Browse all study notesWebSockets Study Notes
Web Development · 30 topics
Web DevelopmentWebAssembly Study Notes
WebAssembly · 30 topics
Web DevelopmentgRPC Study Notes
Protocol Buffers · 30 topics
Web DevelopmentSpring Boot Study Notes
Java · 30 topics
Web DevelopmentFlask Study Notes
Python · 30 topics
Web DevelopmentDjango Study Notes
Python · 30 topics