Course Preview

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

Next.js Fundamentals

Next.js is a React framework for full-stack web applications. React supplies the component model. Next.js adds routing, server rendering, data access, request handling, optimization, and deployment conventions.

The framework divides work between a server and a browser. Server Components render on the server and can read data without sending their implementation to the browser. Client Components add state, event handlers, effects, and browser APIs. A useful Next.js design keeps the client boundary narrow and moves it only where interaction requires it.

Next.js fits public content sites, commerce, dashboards, and applications that need both user interfaces and server behavior. A client-only React application may be enough when every screen is private and search indexing is irrelevant. A static site generator may be a better fit when every route can be produced at build time. Next.js earns its additional runtime and caching complexity when one application needs several rendering behaviors.

The App Router maps files to routes

The App Router uses folders under app as URL segments. A page.tsx file makes a segment reachable. A layout.tsx file wraps descendant pages and layouts. The required root layout supplies the document's html and body elements.

app/
├── layout.tsx          root layout
├── page.tsx            /
├── products/
│   ├── layout.tsx      shared product UI
│   ├── page.tsx        /products
│   └── [slug]/
│       └── page.tsx    /products/:slug
└── api/
    └── health/
        └── route.ts    /api/health

A folder in square brackets is a dynamic segment. Its value arrives through the asynchronous params prop. Route groups organize files without adding a URL segment. Private folders keep implementation files outside the routing system.

Layouts persist across navigation. This makes them suitable for shared navigation and route-level structure. Pages represent route leaves. The distinction affects state, loading behavior, and error boundaries, so organize by URL and ownership rather than by file count.

A request produces two coordinated payloads

Continue the course

This section is part of the paid course.

See pricing to subscribe, or log in if you already have access.

Where this skill leads

Relevant careers

See how this topic contributes to broader role-level skill maps.

Sources