Next.js is a popular React-based framework for building full-stack web applications with features like:
š Core Features
-
Server-Side Rendering (SSR)
Renders pages on the server at request time ā great for SEO. -
Static Site Generation (SSG)
Pre-renders pages at build time ā ideal for speed and caching. -
API Routes
Create backend endpoints directly in your app under/api
. -
File-based Routing
Easy routing structure by placing files in thepages/
directory. -
Incremental Static Regeneration (ISR)
Rebuild static pages on-demand without a full redeploy. -
Built-in Image Optimization
Via the<Image />
component ā lazy-loading, resizing, etc. -
App Router (New)
/app
directory with React Server Components (RSC) and nested layouts.
š Folder Structure (Classic vs App Router)
Pages Router (pages/
)
bash/pages
index.js # Homepage
about.js # /about
blog/[slug].js # Dynamic routing
App Router (app/
)
bash/app
layout.js # Shared layout
page.js # Main page
blog/[slug]/page.js # Dynamic routing with segments
š ļø When to Use Next.js
-
SEO-friendly blogs or e-commerce sites
-
Complex dashboards with API integration
-
Hybrid apps (SSG + SSR)
-
Projects requiring flexibility between static and dynamic content
š¦ Key Commands
bashnpx create-next-app@latest
npm run dev # Start development server
npm run build # Build for production
npm run start # Run production build