Next.js
React's full-stack framework — built-in routing, SSR, and static export; the framework this site uses.
New to this? Start with the basics: Frontend
In one sentence
Next.js is React's full-stack framework — built-in routing, SSR, and static export; the framework this site uses.
In Plain Language
Next.js is a "full-stack framework" built on top of React. React gives you only view components; Next.js builds in everything you need for a complete website — routing, server-side rendering (SSR), static export (SSG), API routes — ready out of the box.
One of its biggest values is being SEO-friendly: it can produce the HTML ahead of time on the server or at build time, so search engines can crawl it easily. This very site uses Next.js's static export mode, deployed to Cloudflare Pages. For anyone building a real site with the React ecosystem, Next.js is almost the default choice.
Architecture
How It Flows
SSR or SSG: Which to Pick
Next.js can build a page two ways, and the choice comes down to one question: does everyone see the same page, or does each visitor see something different?
- SSG (static) — the page is built once, ahead of time, and the same HTML is served to everyone. Ideal for content and marketing pages, docs, and blogs (like this site).
- SSR (server rendering) — the page is built fresh on each request. Reach for it when the HTML must be personalized or up-to-the-second, like a logged-in dashboard or a live price.
A handy rule: start with SSG, and only switch a page to SSR once you find a real reason it can't be the same for everyone.
Common misconception: that Next.js always needs a running server. It's React plus conventions — and it can export a fully static site (SSG) with no server at all. This very site is static-exported Next.js on Cloudflare Pages: $0 and zero cold-start. Reach for SSR only when a page truly must be built per request.
Key Takeaways
- Next.js = React's full-stack framework, ready out of the box.
- Built-in SSR / SSG and SEO-friendly — this site uses it.
- More concepts to learn, but strong ecosystem and AI support.
An everyday analogy
Like React's 'fully-loaded edition': all the parts you need to build a website are installed, ready out of the box.
Pros
- Built-in routing, SSR, and static export
- SEO-friendly with complete performance optimization
- Can be frontend-only or full-stack
Cons
- More concepts (SSR / SSG / RSC)
- High flexibility means you must understand the trade-offs
Good for
- SEO-focused websites and content sites
- Projects that want to go full-stack with React
Not for
- Minimal static pages or non-React stacks
Beginner scorecard
- Beginner-friendly
- 3/5
- Learning cost(higher = more cost)
- 3/5
- Market demand
- 5/5
- AI-generation friendly
- 5/5
Frequently asked questions
How is Next.js different from React?
React only handles the UI; Next.js adds routing, server rendering, SEO, image optimization and deployment on top, letting you build a complete website rather than just frontend components.
Should I use Next.js for an SEO-friendly site?
It’s a great fit. It supports server rendering and static export, producing search-engine-friendly HTML (this very site is a Next.js static export).
Is Next.js too hard to start with directly?
Better to know a bit of React first. Next.js has more concepts (routing, rendering modes), but its official tutorials are thorough and AI knows it very well — you won’t be on your own.
References
- Next.js Documentation — Vercel
- Next.js — Vercel