📘 About Next.js
Next.js is a React framework with server-side rendering, API routes, edge functions, and a powerful routing model. Explore the core concepts categorized by skill level.
Routing (Pages & App Router)
Next.js uses a file-based routing system using the `pages/` or new `app/` directory. Dynamic routes and layouts are easy to manage.
Image Optimization
The built-in `Image` component provides automatic image optimization and resizing for fast performance.
Metadata API
Manage SEO metadata and Open Graph tags using a strongly typed `metadata` API in the `app/` directory.
API Routes
Build serverless functions inside the `pages/api/` folder to handle backend logic directly in your app.
Middleware
Run code before requests are completed with `middleware.ts` for tasks like auth, redirects, and rewrites.
Static Site Generation (SSG)
Use `getStaticProps` to pre-render pages at build time for fast delivery and scalability.
Edge Functions
Run your code close to users at the edge with low-latency functions using Next.js Edge runtime.
Server Components
Offload logic to the server with Server Components, reducing client-side bundle size and improving performance.
Incremental Static Regeneration (ISR)
Update static pages in the background while serving a cached version using ISR, with zero downtime.
App Directory Architecture
The new `app/` directory supports layouts, templates, loading UI, and nested routing in a modular way.