Next.js

The React framework for production web applications

⬢ 티어 1기술

+$20k-

연봉 영향

5개월

학습 기간

보통

난이도

직무

한눈에 보기

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).

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.

🔧 도구 & 생태계

Next.js 16VercelTailwind CSSReact Server ComponentsMiddlewareApp RouterISR/SSGAPI RoutesNext.js ImageDynamic ImportsTurbopackPartial Prerendering

📋 시작하기 전에

React Advanced Programming Python Javascript Typescript Advanced

💰 지역별 연봉

지역	주니어	미들	시니어
USA	$120k	$165k	$210k
UK	£75k	£100k	£135k
EU	€80k	€110k	€150k
CANADA	C$130k	C$175k	C$225k

🎓 자격증

Vercel Next.js Certification Lee Robinson's Next.js Course Frontend Masters Advanced Next.js

🎯 Next.js을(를) 활용하는 직무

Ai Implementation Specialist

Web3 Frontend Engineer

⚖ 비교하기

React Advanced Nodejs Express Frontend Development

❓ 자주 묻는 질문

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.