Next.js is a framework built on top of React that adds routing, rendering strategies and tooling conventions for production applications.

What is Next.js?

Where React is a UI library, Next.js is a full framework: it decides how pages map to URLs, how content is rendered, and how the project is built and deployed.

File-based Routing

Each file inside the app or pages directory automatically becomes a route — no manual router configuration required.

text
app/
  page.tsx        // → /
  about/
    page.tsx      // → /about
  blog/
    [slug]/
      page.tsx    // → /blog/:slug

Rendering Modes

  • Static Generation: pages are built once at build time.
  • Server-Side Rendering: pages render on each request.
  • Client-Side Rendering: data loads in the browser after the page appears.

Next.js lets you mix rendering strategies per page, so marketing pages can be static while dashboards render dynamically.

Getting Started

bash
npx create-next-app@latest my-app
cd my-app
npm run dev
Next.jsReactFrontendBeginner