Next.js Tutorial

Learn what Next.js is, what it adds to React, and why it is popular for modern web apps.

Understand why you can learn React concepts directly while learning Next.js.

Set up your tools and create a new Next.js app with the official starter command.

Learn the important files and folders in a modern Next.js App Router project.

Learn the daily workflow for editing files and seeing changes in a Next.js app.

Learn how JSX lets you write page UI with HTML-like syntax inside TypeScript files.

Create a home page and understand how App Router turns files into routes.

Split a Next.js page into reusable React components.

Pass information into components with props and TypeScript types.

Use children to place content inside reusable wrapper components and layouts.

Learn beginner-friendly ways to style Next.js pages and components.

Use the Next.js Image component for optimized, responsive images.

Load fonts with the built-in Next.js font system.

Navigate between App Router pages with the Next.js Link component.

Use App Router layouts to share UI across pages and route groups.

Learn how folders and page.tsx files create routes in the App Router.

Use bracket folders to create pages for changing values like slugs and IDs.

Show friendly 404 and error UI in App Router routes.

Understand the modern Next.js component model and when to use use client.

Use React state in a Client Component to update the screen after user actions.

Handle user events and build a controlled form in a Client Component.

Render arrays of data in JSX and use keys correctly.

Show different UI based on data, state, route values, or loading conditions.

Use useEffect carefully for browser-only side effects in Client Components.

Add page titles and descriptions with the App Router metadata API.

Use loading.js and Suspense to show instant loading states while Server Components fetch data.

Fetch data directly inside App Router Server Components and render pages without a separate client-side loading step.

Understand the caching defaults that affect fetch, routes, and when your pages update.

Refresh cached pages and data with time-based, path-based, and tag-based revalidation.

Create backend endpoints in the App Router with route.ts files and standard Web Request and Response APIs.

Run server-side mutations from Next.js components without building a separate API endpoint first.

Build practical App Router forms that submit directly to Server Actions with validation and pending UI.

Use Next.js client navigation hooks for buttons, active links, and dynamic route values.

Read and update URL search params to build shareable filters, sorts, and pagination.

Use React Context inside Next.js Client Components for shared interface state such as themes, drawers, and menus.

Extract reusable client-side behavior into custom hooks for focused Next.js Client Components.

Use refs safely in Next.js Client Components when you need direct access to DOM elements or mutable values.

Run lightweight logic before a request reaches a route, such as redirects, auth checks, and header updates.

Store configuration and secrets safely in Next.js using server-only and public environment variables.

Use TypeScript types for pages, route params, components, data, and safer Next.js app code.

Style Next.js pages and components with Tailwind utility classes while keeping layouts consistent.

Learn vendor-neutral authentication patterns for cookies, sessions, protected pages, and redirects.

Connect database access to Server Components, Server Actions, and Route Handlers without locking into one vendor.

Handle file uploads in Next.js with forms, Route Handlers, validation, and storage-provider patterns.

Handle expected and unexpected errors with error.tsx, not-found.tsx, route responses, and careful boundaries.

Use parallel and intercepting routes for practical UI such as modals that preserve page context.

Organize App Router projects with route groups that do not affect the URL path.

Prepare a Next.js App Router project for deployment on Vercel with build checks, environment variables, and production habits.

Use React Server Components as the default design tool in a production App Router application.

Design interactive islands that fit cleanly inside a mostly server-rendered Next.js interface.

Improve real-world Next.js performance by reducing client JavaScript, streaming routes, and measuring the right signals.

Protect production Next.js applications with server boundaries, validation, auth checks, safe redirects, and secure headers.

Organize App Router projects by routes, features, shared UI, server modules, and production ownership boundaries.

Choose the right state location in a Next.js app and see how practical React mastery emerges from App Router decisions.

Develop a production debugging workflow and choose targeted tests for App Router behavior.

Build a polished App Router portfolio with metadata, reusable sections, project cards, and responsive styling.

Build a file-backed blog pattern with dynamic routes, generated metadata, static params, and content rendering.

Build an authenticated dashboard shell with route groups, summary cards, table UI, loading states, and URL filters.

Build a SaaS marketing page, pricing section, login shell, and authenticated app layout foundation.

Choose the next advanced topics after completing the Next.js-first Intellex path.

Build accessible App Router interfaces with semantic HTML, focus management, forms, navigation, and metadata.

Use the App Router Metadata API, Open Graph images, canonical URLs, robots rules, and structured data responsibly.

Plan a locale-aware Next.js app with route segments, dictionaries, metadata, and localized navigation.

Translate familiar client-rendered React patterns into App Router patterns without carrying old assumptions forward.

Recognize and fix production App Router mistakes around client boundaries, caching, params, metadata, auth, and loading states.