# Next.js — The Full-Stack React Framework for the Web > Next.js is the most popular React framework for building full-stack web applications. It provides server-side rendering, static generation, API routes, file-based routing, and React Server Components — making React production-ready out of the box. ## Install Save in your project root: # Next.js — The Full-Stack React Framework for the Web ## Quick Use ```bash # Create a new Next.js app npx create-next-app@latest my-app cd my-app && npm run dev # Access at http://localhost:3000 ``` ```tsx // app/page.tsx — Server Component (default) export default async function Home() { const data = await fetch("https://api.example.com/posts").then(r => r.json()); return (

My Blog

{data.map((post: any) => (

{post.title}

{post.body}

))}

); } ``` ## Introduction Next.js is the React framework that transformed how web applications are built. Created by Vercel, it solves the problems React leaves to developers — routing, server rendering, data fetching, bundling, and deployment. With the App Router and React Server Components, Next.js provides a full-stack development experience where server and client code coexist naturally. With over 139,000 GitHub stars, Next.js powers websites for companies like Vercel, Netflix, TikTok, Notion, Nike, and Hulu. It is the most deployed React framework and the default choice for new React projects. ## What Next.js Does Next.js extends React with production features: file-based routing (pages map to URLs), multiple rendering strategies (SSR, SSG, ISR), API routes for backend logic, image and font optimization, middleware for edge computing, and built-in support for CSS Modules, Tailwind, and TypeScript. ## Architecture Overview ``` [Next.js Application] | [App Router (app/ directory)] File-based routing Layouts, loading, error boundaries | +-------+-------+-------+ | | | | [Server [Client [API Components] Components] Routes] Run on Run in route.ts server browser handlers async data useState REST/GraphQL fetch useEffect endpoints | [Rendering Strategies] SSR: Server-Side Rendering SSG: Static Site Generation ISR: Incremental Static Regen Streaming: Progressive rendering | [Edge / Node.js Runtime] Middleware, API routes at the edge or server ``` ## Self-Hosting & Configuration ```tsx // app/layout.tsx — Root layout 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 ( {children} ); } // app/api/users/route.ts — API Route import { NextResponse } from "next/server"; export async function GET() { const users = await db.query("SELECT * FROM users"); return NextResponse.json(users); } export async function POST(request: Request) { const body = await request.json(); const user = await db.insert("users", body); return NextResponse.json(user, { status: 201 }); } ``` ```javascript // next.config.js module.exports = { images: { domains: ["cdn.example.com"] }, experimental: { serverActions: true }, }; ``` ## Key Features - **App Router** — file-based routing with layouts, loading, and error states - **Server Components** — components that render on the server by default - **Server Actions** — mutate data directly from components without API routes - **SSR / SSG / ISR** — flexible rendering strategies per page - **API Routes** — build backend endpoints alongside frontend code - **Image Optimization** — automatic lazy loading, resizing, and format conversion - **Middleware** — run code at the edge before requests complete - **Streaming** — progressive rendering with Suspense boundaries ## Comparison with Similar Tools | Feature | Next.js | Nuxt | Remix | Astro | SvelteKit | |---|---|---|---|---|---| | Base Framework | React | Vue | React | Any | Svelte | | Rendering | SSR/SSG/ISR | SSR/SSG | SSR | SSG + Islands | SSR/SSG | | Server Components | Yes | No | No | Partial (Islands) | No | | File Routing | Yes | Yes | Yes | Yes | Yes | | API Routes | Yes | Yes | Loaders/Actions | Yes | Yes | | Edge Runtime | Yes | Yes | Yes | Yes | Yes | | Deployment | Vercel + any | Any | Any | Any | Any | | GitHub Stars | 139K | 60K | 34K | 50K | 86K (Svelte) | ## FAQ **Q: Should I use the App Router or Pages Router?** A: Use the App Router for new projects — it supports Server Components, streaming, and the latest React features. Pages Router is still supported for existing projects and simpler use cases. **Q: Do I have to deploy on Vercel?** A: No. Next.js can be self-hosted with "next start" on any Node.js server. Docker deployment works well. Vercel offers the best DX with zero-config deployment, but is not required. **Q: Next.js vs Remix — which should I choose?** A: Next.js for the larger ecosystem, Server Components, and Vercel integration. Remix for web-standards-first approach and progressive enhancement. Both are excellent React frameworks. **Q: Is Next.js good for large applications?** A: Yes. Companies like Netflix, TikTok, and Notion use Next.js at scale. Its incremental adoption model lets you start small and scale. Use route groups and parallel routes for complex app structures. ## Sources - GitHub: https://github.com/vercel/next.js - Documentation: https://nextjs.org/docs - Created by Vercel (Guillermo Rauch) - License: MIT --- Source: https://tokrepo.com/en/workflows/68bb6791-3702-11f1-9bc6-00163e2b0d79 Author: AI Open Source