Master Next.js 15: From Zero to Full-stack 2025

Create a Next.js 15 app from scratch by installing Node.js, running npx create next app, selecting ts, app router, and tailwind css, then launch npm run dev to view locally.

Explore the default Next.js 15 app structure: the app folder, page.tsx as the home page, layout.tsx as a routes wrapper, and global CSS with public assets.

Master basic routing in Next.js by defining simple routes, routes with parameters, and query strings using file-based routing and page.tsx, with home, products, orders, and cart examples.

Explore routes with parameters in Next.js by creating dynamic product and order pages using a [id] router parameter, rendering content based on id and handling slug changes.

Build routes with query strings in Next.js 15 by creating a customers page that reads a type query param to render new or old customers, using async search params.

Customize the default 404 content in Next.js by creating a not-found.tsx in the app directory and rendering a NotFound component, then restart the dev server to see your UI.

Navigate Next.js routes by using the link component for basic routes, routes with params, and query strings, then compare server and client components and their impact on on click interactions.

Discover how Next.js server components render HTML on the server, while client components hydrate with JavaScript, enabling frontend features like onclick handlers, hooks, and local storage.

Discover the advantages and disadvantages of Next.js server components, including direct database access with Mongoose and MongoDB, and the limits that block onClick and client state.

Explore client components in Next.js 15 by converting a server component to a client component using use client, adding state and onClick handlers, and examining the advantages and disadvantages.

Determine when to use client components versus server components based on interactions, fetching, and displaying data. Use client components for interactivity and server components for rendering.

Explore server side rendering and client side rendering: Next.js prerenders pages on the server for fast seo, while React renders in the browser, with differing workload distribution.

Compare server side rendering and client side rendering using Next.js and React.js, highlighting pre-rendered HTML, SEO benefits, and how each app delivers content.

Learn to implement a shared layout in Next.js using layout.tsx in the src app folder, rendering a common header and page content across home, products, and cart pages.

apply the Montserrat font across the app via layout.tsx, and configure seo metadata plus a global database connection so pages render with consistent styling and data.

Learn to implement public and private routes with a custom layout in Next.js 15, displaying different headers for login, registration, and product pages.

Learn to fetch data in Next.js 15 using both client and server components, implement a fetch flow with useEffect, and render a loading indicator while awaiting API responses.

Display loaders in Next.js 15 by managing a loading state in client components and showing a spinner while awaiting API responses; wrap server components in suspense with a fallback loader.

Explore Next.js server actions, which run on the server and can be called from client and server components to save and fetch data, simplifying backend logic.

Implement Next.js server actions by building client and server pages, connecting a test MongoDB, defining a user model, and saving users via a server action invoked from the client.

Learn to handle server action responses by avoiding thrown errors and returning a structured response with success flags and messages; validate existing users by email and display clear server-driven alerts.

Build a simple e-commerce app with Next.js 15, featuring public and private routes, authentication, product display from a fake API, and cart and orders via server actions.

Build a Next.js 15 basic e-commerce app by scaffolding a new project and creating the app and folder structure with public and private routes, plus home, login, and cart pages.

Install and demo the Qaqun UI component library for a Next.js and Tailwind CSS e-commerce app. Add button and input components, adjust theme, and review resulting project structure.

Design and implement the ecommerce homepage from prototype to ui, building a two-column hero grid with a logo, login button, project title, description, and a hero image.

Create a centered register page interface with a three-field form (name, email, password) using a client component and react-hook-form for validation, including error messages and a login link.

Design and implement the login page ui by reusing the register page, removing the name field, and updating titles, fields, and navigation to support email and password authentication.

Create the basic ecom app database and users collection, install mongoose, json web token, and bcryptjs, connect Next.js to MongoDB via a config file and .env MONGO_URL, and verify the connection.

Develop a full-stack user registration flow in Next.js 15 using a server action, TypeScript interfaces, and a MongoDB user model with bcrypt password hashing, plus front-end integration and routing.

Implement a login server action integrated with the login form. Validate user and password with bcrypt, generate a JWT containing id and email, and store it in cookies for authentication.

Display the logged-in user on private pages with a get user server action that reads token from cookies, verifies via JWT, and fetches user data from database by email.

Build a private layout with public routes in Next.js and store the logged-in user in a zustand global store for access across client components, displaying the username in the header.

Implement logout functionality with a Lucid React logout icon next to the username, removing the token and redirecting to login, while showing a spinner during asynchronous data loading.

Learn how Next.js middleware enforces access control before rendering to block private routes. Implement token-based redirects that send unauthorized users to login and protect routes like home and register.

Fetch and display products from the fake store API in a Next.js 15 project. Render a responsive grid of product cards and navigate to the product info page.

Create a Zustand cart store to add products and manage item quantities. Integrate a header cart icon with a real-time count and navigate to the cart page.

Display and adjust cart items with a dynamic table linked to the cart store, enabling quantity controls, remove item, and a place order button for a basic Next.js cart page.