Why Use a Framework?
A framework saves you from wiring together routing, bundling, rendering, and data fetching by hand.
You can build a React app with just a bundler, but you quickly need answers to hard questions: How do URLs map to components? How do I render on the server for SEO? How do I fetch data without waterfalls? How do I cache it? A framework provides tested answers so you can focus on your product.
Problems Next.js solves for you
| Concern | Next.js answer |
|---|---|
| Routing | File-system based (app/ folders) |
| SEO / first paint | Server rendering & streaming |
| Data fetching | async Server Components + caching |
| Mutations | Server Actions |
| Assets | next/image, next/font |
Because these pieces are designed together, they compose cleanly instead of fighting each other.
Example
// Without a framework you assemble these yourself:
// react-router + webpack/vite + express + a caching layer ...
// Next.js gives you an integrated version of all of them.When to use it
- A team eliminates weeks of webpack configuration by adopting Next.js and using its pre-configured bundler.
- An agency gets automatic route-based code splitting out of the box instead of maintaining dynamic import logic manually.
- A developer gains built-in API routes for form submissions without spinning up a separate Express server.
More examples
File-based route no config
Creating a folder and page.tsx is all it takes to add a new URL, no route registration required.
// app/about/page.tsx
export default function About() {
return <p>About page — zero router config needed.</p>;
}Built-in API endpoint
Next.js Route Handlers replace a standalone Express server for simple JSON endpoints.
// app/api/hello/route.ts
import { NextResponse } from 'next/server';
export function GET() {
return NextResponse.json({ message: 'Hello from the API' });
}Typed metadata export
Next.js manages the head tag through a typed export, removing the need for a third-party Helmet library.
// app/layout.tsx
import type { Metadata } from 'next';
export const metadata: Metadata = {
title: 'My App',
description: 'Built with Next.js',
};
export default function RootLayout({ children }: { children: React.ReactNode }) {
return <html><body>{children}</body></html>;
}
Discussion