What is Next.js?
Next.js is a full-stack React framework that adds routing, rendering, and a build system on top of React.
app/page.tsx → the / routeNext.js is a React framework maintained by Vercel. React on its own is only a library for building user interfaces — it does not tell you how to route pages, fetch data on a server, or optimize your build. Next.js fills those gaps and gives you a complete foundation for production apps.
What Next.js adds to React
- Routing based on the file system — no router config to write.
- Server rendering and streaming for fast first loads and SEO.
- Server Components that run on the server and ship zero JavaScript.
- Data fetching, caching, and mutations built in.
- Optimizations for images, fonts, and scripts.
This tutorial teaches the modern App Router (Next.js 15+), which is built around React Server Components.
Example
// A page in Next.js is just a React component.
// app/page.tsx
export default function HomePage() {
return <h1>Hello, Next.js!</h1>;
}When to use it
- A startup builds its marketing site with Next.js to get server-side rendering for SEO without managing a separate server.
- An e-commerce team uses Next.js so product pages are pre-rendered and load instantly for shoppers on slow connections.
- A developer replaces a create-react-app SPA with Next.js to gain built-in image optimisation and automatic code splitting.
More examples
Minimal Next.js page
A single file inside app/ is enough to serve the root URL with no router setup required.
// app/page.tsx
export default function Home() {
return <h1>Hello from Next.js</h1>;
}Async server component
Next.js Server Components can be async and fetch data directly, keeping the bundle small for the client.
// app/posts/page.tsx
async function getPosts() {
const res = await fetch('https://jsonplaceholder.typicode.com/posts');
return res.json();
}
export default async function PostsPage() {
const posts = await getPosts();
return <ul>{posts.slice(0, 5).map((p: any) => <li key={p.id}>{p.title}</li>)}</ul>;
}Basic next.config.ts
next.config.ts is the single place to configure the build pipeline and runtime features.
// next.config.ts
import type { NextConfig } from 'next';
const config: NextConfig = {
reactStrictMode: true,
images: { domains: ['cdn.example.com'] },
};
export default config;
Discussion