Next.js Fundamentals
Next.js is a React framework for building web applications that render across the server and browser. It adds file-based routing, server-side data access, streaming, caching controls, request handlers, and production build tooling around React.
itWeb development | OpenSkills.info
Course pathWalk it in order
Look it upDip in anytime
Go furtherLeaves this page
Don't Panic
Don't Panic - Next.js Fundamentals
Next.js is React with a job description. React still supplies components. Next.js adds routing, server rendering, data access, request handling, and deployment conventions so one application can mix several rendering behaviors without inventing a custom framework for each.
The useful split is Server Components versus Client Components. Server Components render on the server, can read data with server credentials, and keep heavy dependencies out of the browser. Client Components exist for state, events, effects, and browser APIs. Keep that client boundary narrow. Widen it only where interaction requires it, or the bundle and the security story both get louder for no gain.
The App Router maps folders under app to URL segments. page.tsx makes
a segment reachable. layout.tsx wraps descendants and persists across
navigation. Dynamic segments live in square brackets. Route groups organize
files without changing the URL. Organize by URL and ownership, not by how many
files feel tidy.
A request produces coordinated payloads: HTML for immediate display and a
React Server Component payload the browser uses to reconcile and hydrate. Later
Link navigations can prefetch and transition while shared layouts stay
mounted. Streaming at Suspense boundaries improves delivery order. It does
not make a slow query fast.
Data access decides rendering behavior, and environment variables prefixed
with NEXT_PUBLIC_ are public by construction. Secrets stay in server-only
modules.
Read the Intro for the architecture and the server/client rules. Use the Cheatsheet when you need the file conventions and boundary checklist. The Timeline and Landscape place Next.js among related React tooling; Updates tracks the release line that changes those conventions.
Where this skill leads
Relevant careers
See how this topic contributes to broader role-level skill maps.
Sources
- https://nextjs.org/docs/app
Supports
- App Router scope and current official documentation map
- File-system routing, Server Components, Suspense, and Server Functions
- https://nextjs.org/docs/app/getting-started
Supports
- Official learning order for project structure, routing, rendering, data, errors, optimization, and deployment
- https://nextjs.org/docs/app/getting-started/layouts-and-pages
Supports
- Pages, required root layout, nested layouts, route segments, dynamic segments, params, and search parameters
- https://nextjs.org/docs/app/getting-started/project-structure
Supports
- App Router folder and file conventions, route groups, and private folders
- https://nextjs.org/docs/app/getting-started/linking-and-navigating
Supports
- Link navigation, prefetching, client transitions, server rendering, and streaming
- https://nextjs.org/docs/app/getting-started/server-and-client-components
Supports
- Default Server Components and Client Component capabilities
- Client module boundaries, composition, serialization, context, and bundle placement
- https://nextjs.org/docs/app/getting-started/fetching-data
Supports
- Server data fetching, parallel requests, Suspense, streaming, and current cache guidance
- https://nextjs.org/docs/app/getting-started/partial-prerendering
Supports
- Opt-in Cache Components setting, static shells, use cache, Suspense requirements, and Partial Prerendering
- https://nextjs.org/docs/app/getting-started/revalidating
Supports
- Time-based and on-demand cache revalidation
- Cache lifetimes, path invalidation, and tag invalidation
- https://nextjs.org/docs/app/getting-started/updating-data
Supports
- Server Functions, Server Actions, forms, pending state, refresh, revalidation, redirects, and cookies
- https://nextjs.org/docs/app/api-reference/file-conventions/route
Supports
- Route Handler HTTP methods, Request and Response APIs, dynamic parameters, webhooks, and non-UI responses
- https://nextjs.org/docs/app/api-reference/file-conventions/dynamic-routes
Supports
- Dynamic, catch-all, and optional catch-all segment conventions
- generateStaticParams and asynchronous params
- https://nextjs.org/docs/app/getting-started/error-handling
Supports
- Expected errors, not-found behavior, nested error boundaries, uncaught exceptions, and global errors
- https://nextjs.org/docs/app/api-reference/functions/not-found
Supports
- notFound behavior and segment termination
- https://nextjs.org/docs/app/guides/authentication
Supports
- Authentication, session management, authorization, data access layers, Server Actions, and Route Handlers
- Recommendation to use an authentication library
- https://nextjs.org/docs/app/guides/testing
Supports
- Unit, component, integration, end-to-end, and snapshot test scopes
- Current testing guidance for asynchronous Server Components
- https://nextjs.org/docs/app/guides/production-checklist
Supports
- Streaming, parallel fetching, caching checks, accessibility, security, metadata, bundles, and Core Web Vitals
- https://nextjs.org/docs/app/getting-started/deploying
Supports
- Node.js, Docker, static export, and adapter deployment options
- Full versus limited feature support across output targets
- https://nextjs.org/docs/app/guides/self-hosting
Supports
- Cache persistence, multiple instances, Server Action encryption keys, build IDs, shared caches, tag coordination, streaming, and CDN behavior
- https://github.com/sindresorhus/awesome
Supports
- Discovery of the curated Next.js awesome list
- https://github.com/bytefer/awesome-nextjs
Supports
- Discovery of Auth.js, next-intl, next-themes, next-safe-action, and next-sitemap as Next.js ecosystem projects
- https://authjs.dev/
Supports
- Auth.js Next.js handlers, auth function, providers, and session integration
- https://next-intl.dev/docs/getting-started/app-router
Supports
- App Router internationalization across Server and Client Components
- https://github.com/pacocoursey/next-themes
Supports
- Theme provider, browser preference, and hydration considerations for Next.js
- https://next-safe-action.dev/
Supports
- Typed Server Actions, validation schemas, middleware, and action results
- https://github.com/iamvishnusankar/next-sitemap
Supports
- Build-time and server-side sitemap and robots generation for Next.js
- https://vercel.com/docs/frameworks/full-stack/nextjs
Supports
- Vercel deployment behavior for App Router loading, streaming, and framework integration
- https://docs.netlify.com/build/frameworks/framework-setup-guides/nextjs/overview/
Supports
- Netlify OpenNext adapter, App Router, streaming, caches, revalidation, images, and skew protection
- https://developers.cloudflare.com/workers/framework-guides/web-apps/nextjs/
Supports
- Next.js deployment through the OpenNext Cloudflare adapter and its feature matrix
- https://docs.aws.amazon.com/amplify/latest/userguide/ssr-amplify-support.html
Supports
- Amplify Hosting support and limitations for SSR, SSG, ISR, App Router, images, Middleware, and streaming
- https://firebase.google.com/docs/app-hosting
Supports
- Next.js support, repository rollouts, Cloud Build, Cloud Run, and Cloud CDN architecture
- https://docs.railway.com/guides/nextjs
Supports
- Next.js standalone output, Node.js and Docker deployment, variables, databases, and migrations on Railway
- https://render.com/docs/deploy-nextjs-app
Supports
- Next.js Node.js web service and static export deployment paths on Render
- https://nextjs.org/support-policy
Supports
- Initial Next.js release date and major-version support history
- https://nextjs.org/blog/next-5
Supports
- Next.js 5 date, Universal Webpack, plugins, and build commands
- https://nextjs.org/blog/next-6
Supports
- Next.js 6 date, static exports, app extension point, and TypeScript plugin support
- https://nextjs.org/blog/next-7
Supports
- Next.js 7 date, Webpack 4, Babel 7, compilation cache, and dynamic imports
- https://nextjs.org/blog/next-9
Supports
- Next.js 9 date, dynamic routing, TypeScript, static optimization, and API Routes
- https://nextjs.org/blog/next-9-3
Supports
- Next.js 9.3 static generation APIs and date
- https://nextjs.org/blog/next-9-4
Supports
- Next.js 9.4 Incremental Static Regeneration and date
- https://nextjs.org/blog/next-10
Supports
- Next.js 10 date, image optimization, internationalized routing, and codemods
- https://nextjs.org/blog/next-12
Supports
- Next.js 12 date, Rust compiler, Middleware, React 18 preparation, and early Server Components
- https://nextjs.org/blog/next-13
Supports
- Next.js first-release anniversary and Next.js 13 App Router beta, layouts, Server Components, streaming, and Turbopack
- https://nextjs.org/blog/next-13-4
Supports
- App Router stability in Next.js 13.4 and release date
- https://nextjs.org/blog/next-14
Supports
- Next.js 14 date, stable Server Actions, Turbopack progress, and Partial Prerendering preview
- https://nextjs.org/blog/next-15
Supports
- Next.js 15 date, React 19, caching changes, and stable Turbopack development