JobCannon
All skills

Next.js

The React framework for production web applications

⬢ TIER 1Tech
+$20k-
Salary impact
5 months
Time to learn
Medium
Difficulty
7
Careers
AT A GLANCE

Next.js is the dominant React framework for production applications, enabling full-stack development with App Router and React Server Components. Career path: Junior React Developer ($105-140k, basic Pages Router/SSR/API routes, 3-4 months) → Senior Full-stack Engineer ($160-200k, App Router mastery, advanced patterns, edge runtime, 5-7 months) → Lead Platform Engineer ($200k+, monorepo architecture, performance optimization). Salary premium: +$20k-$35k above base React roles. Tools: Vercel deployment, Tailwind CSS, Server Components, Middleware, ISR/SSG patterns. Competes with Remix (API-focused, less adoption) and Express.js (lower-level, more boilerplate).

What is Next.js

Next.js by Vercel is the dominant React framework for production applications, providing server-side rendering (SSR), static site generation (SSG), API routes, middleware, and the new App Router with React Server Components. It's the default choice for modern full-stack React development. Next.js abstracts complex web development patterns (routing, rendering, optimization) into a convention-based framework that scales from simple sites to complex enterprise applications.

🔧 TOOLS & ECOSYSTEM
Next.js 16VercelTailwind CSSReact Server ComponentsMiddlewareApp RouterISR/SSGAPI RoutesNext.js ImageDynamic ImportsTurbopackPartial Prerendering

💰 Salary by region

RegionJuniorMidSenior
USA$120k$165k$210k
UK£75k£100k£135k
EU€80k€110k€150k
CANADAC$130kC$175kC$225k

❓ FAQ

What is the difference between App Router and Pages Router?
Pages Router (legacy): file-based routing in /pages, simpler mental model, all Server-side Rendering by default. App Router (new): file-based routing in /app, React Server Components by default, better for streaming/Suspense, supports layouts and parallel routes. Use App Router for all new projects — Pages Router is deprecated.
When should I use Server Components vs Client Components?
Server Components (default): fetch data, access secrets, large dependencies, heavy computation, never sent to browser. Client Components (`'use client'`): interactivity, hooks (useState, useEffect), event listeners, browser APIs. Start with Server Components — only mark with `'use client'` when you need interactivity. This reduces JS bundle size and improves performance.
What is ISR, SSG, and SSR? When do I use each?
SSG (Static Site Generation): build-time rendering, cached, fastest, use for static content. ISR (Incremental Static Regeneration): SSG + revalidate on-demand or after delay, use for changing content (blogs, pricing). SSR (Server-Side Rendering): render at request time, use for dynamic, user-specific content. CSR (Client-Side Rendering): old approach, use only for highly interactive apps (avoid for SEO).
How do I deploy Next.js? Is Vercel required?
Vercel is native-optimized (built by Next.js creators) and serverless-ready, but not required. Self-host: Docker, Node.js, Kubernetes. Cloud options: AWS (EC2/ECS), Google Cloud, Azure, Railway, Render. Vercel handles edge functions, ISR revalidation, and preview deployments automatically — worth it for production.
How do Server Components work with state management?
Server Components cannot have state (no hooks). For state: (1) use Client Components + React Context, (2) use Server Actions + form submissions, (3) use URL search params. React 19 Server Actions (mutations) pair with Server Components for interactive forms without Client Components.
What is the edge runtime and when should I use it?
Edge runtime runs code globally on Cloudflare/Vercel edge, <50ms latency. Limitations: no Node.js APIs, no native modules. Use for: authentication, redirects, geolocation, analytics. Don't use for: database queries, heavy computation, file uploads.
Can I migrate from Pages Router to App Router?
Yes, incrementally. Both can coexist. Migrate page-by-page: create /app routes alongside /pages. Use `/app` route if exists, otherwise fallback to `/pages`. Plan 2-4 weeks for large apps. No hard deadline — but App Router is the future.

Not sure this skill is for you?

Take a 10-min Career Match — we'll suggest the right tracks.

Find my best-fit skills →

Find your ideal career path

Skill-based matching across 2,536 careers. Free, ~10 minutes.

Take Career Match — free →