What is Next.js?

What is Next.js?

Next.js is an open-source React framework created by Vercel that handles server-side rendering (SSR), static site generation (SSG), routing, bundling, and API endpoints in a single project. First released in October 2016, it's now on version 15 (stable since October 2024) and has become the default way most teams ship production React apps. Next.js introduced the App Router in version 13.4 (May 2023), which replaced the older Pages Router with a layout-based system built on React Server Components (RSC). According to the 2024 State of JS survey, Next.js remained the most-used React meta-framework by a wide margin. We've shipped it on 50+ client projects — it's our go-to for any site that needs both strong SEO and dynamic, authenticated experiences. A typical use case: a SaaS marketing site with a dashboard behind a login, all in one codebase.

How it works

Next.js sits on top of React and adds a file-system-based router, a build pipeline (powered by Turbopack as of v15), and a server runtime. Here's the core mental model:

1. File-system routing. Files inside app/ map to URL segments. A file at app/blog/[slug]/page.tsx handles /blog/my-post.
2. Server Components by default. Every component in the App Router is a React Server Component unless you add 'use client' at the top. Server Components run only on the server, which means zero JavaScript shipped to the browser for that component.
3. Rendering strategies. You pick per-route: static (built at deploy time), dynamic (rendered per request), or ISR (Incremental Static Regeneration — static with a revalidation interval). The fetch() API controls caching with options like { next: { revalidate: 60 } }.
4. Route Handlers and Server Actions. API routes live as route.ts files. Server Actions let you call server-side functions directly from form submissions or client events — no manual API layer needed.
5. Middleware. A single middleware.ts at the project root runs at the edge before every request, useful for auth redirects, A/B tests, and geo-based routing.

// app/blog/[slug]/page.tsx
export default async function BlogPost({ params }: { params: { slug: string } }) {
  const post = await fetch(`https://api.example.com/posts/${params.slug}`, {
    next: { revalidate: 3600 },
  }).then(res => res.json());

  return <article><h1>{post.title}</h1><div>{post.body}</div></article>;
}

This component is a Server Component. It fetches data at request time (or from cache), renders HTML on the server, and ships zero client JS for the article itself.

When to use it

Next.js is the right call when you need more than a single-page app but don't want to wire up a custom Node server, bundler config, and routing layer yourself.

Use Next.js when:

• You need SEO-critical pages (marketing sites, blogs, e-commerce PDPs) with fast Largest Contentful Paint — server-rendered HTML hits the browser before any JS executes.
• You're building a full-stack app and want API routes or Server Actions alongside your UI.
• You want ISR so content teams can publish without triggering a full redeploy.
• Your team already knows React.

Skip Next.js when:

• Your app is purely behind auth with no public pages — a Vite + React SPA is simpler and deploys to a static CDN.
• You need a multi-page content site with minimal interactivity — Astro will ship less JavaScript.
• You're locked into a non-Node deployment environment (e.g., pure PHP hosting) with no serverless option.

Our preferred stack at Social Animal is Next.js 15 on Vercel for most client work, and Astro when the project is content-first with little client-side state.

Next.js vs alternatives

Remix (now branded as React Router v7) is the closest competitor. The real difference: Next.js leans into caching and static generation, while Remix leans into request/response fundamentals. If you deploy on Vercel, Next.js caching wins big. On other hosts, the gap narrows.

Real-world example

We rebuilt a B2B SaaS marketing site (80+ pages, blog with 400+ posts, gated demo request flow) from a Create React App SPA to Next.js 14 App Router. Results after launch: Largest Contentful Paint dropped from 4.2s to 1.1s, Time to First Byte went from 800ms to 120ms on Vercel's edge network, and organic traffic increased 35% over 90 days as Google indexed server-rendered pages it had previously struggled to crawl. The blog uses ISR with a 60-second revalidation window so the content team publishes via their headless CMS (Sanity) and sees updates live within a minute — no redeploy required.