The Fastest Next.js Course: Learn Next 15 with App Router

Learn how to fetch category and product data in Next.js using server components, async fetch, and automatic loading and error states, integrating external APIs to build a real e-commerce homepage.

Learn to fetch the top 12 products from a dummy API, implement pagination-ready product cards, and build a reusable product card component for the home page in Next.js 15.

Configure remote image patterns in next.config.js to enable the native next image component, adapting the code to your Next.js version, then clear cache and restart the dev server.

learn to build dynamic product pages in Next.js by passing product id through url parameters, creating routes, and linking from a product list to individual product pages.

Fetch the product by id from the dummy JSON API. Build the product page in Next.js with image, title, price, description, and add to bag, styled with a CSS module.

Discover how Next.js uses server and client components to enable interactivity, by turning the add to basket button into a client component while the page remains server-based.

Explore state management in Next.js by sharing basket data across components, avoiding prop drilling, and using the context API; Redux is noted for larger apps.

Create a client-side basket context in the app directory, build a basket context and provider with use state, and wrap the layout so all components access and update basket items.

Learn how to read from a react context in next.js by creating a custom useBasket hook, consuming basket items in the header, and testing with client components.

Create a client component basket count that uses context to display the cart item count via items.length, conditionally rendering when items exist and integrating with the header styling.

Mutate the basket state by creating an add to bag function in context, prevent duplicate items, and update the top counter as items are added.

Implement remove from bag in a Next.js app using context to track items, with conditional UI showing remove or added to basket states, enabling multiple items.

Learn to manage product quantities in a Next.js app by syncing item quantities with the basket, enforcing stock limits, and updating the basket and user interface when quantities change.

Update basket quantities in real time by adding an update quantity method in the context, map items to adjust the matching product's quantity, and sync the bag with changes.

Build the basket page in a Next.js app using the app router, featuring a shopping bag header, a basket items table powered by context, and a client component for updates.

Learn how to read the basket context by turning the basket items component into a client component, importing use basket, and showing an empty basket message with a products link.

Render basket items with map, showing each product's thumbnail, title, price, stock, and quantity. Link to /product/{id}, enable quantity updates and removal, and display an empty basket message when empty.

Enable product actions to update item quantities and remove items from the basket with a confirmation modal. Guard buttons by quantity and stock, reflecting context-driven updates in the user interface.

Compute the order total by calculating each line subtotal (price times quantity) and summing items with reduce, starting from zero, to produce the grand total.

Create a reusable format price utility in a new util folder to format all USD prices with two decimals across components like product cards, product pages, and the basket.

Implement an empty basket function and a clear basket button with a confirm prompt, wired via the basket context, and enable local storage to persist the basket.

Persist the basket items by reading from localStorage on load and synchronizing updates with every basket change using two useEffect hooks in a Next.js app.

Handle loading states and api errors in Next.js app router to prevent broken pages in categories, products, and product details, and offer retry options for a seamless user experience.

Discover how Next.js uses error.js to automatically handle data fetch errors on product pages, providing a clean fallback UI via a client component.

Customize the error page in Next.js by creating a fallback UI with images from the public folder, css, and actions to go back or retry using router and reset.

Wrap the home page components with a custom error boundary to gracefully handle data fetch errors in categories and products, showing fallbacks such as could not load categories or products.

Separate products and categories into smaller components in Next.js, fetch data inside each list, and use error boundaries to keep the rest of the page visible when API calls fail.

Customize the Next.js 404 not found page by adding a Not Found component, a supporting image, and a go back button using use router for a consistent error experience.

Explore implementing loading states in Next.js by simulating delays with a sleep function, creating a loading page, and building a reusable CSS loader component for better user experience.

Learn to add loading states with React Suspense and error boundaries for home page components using a shared loader, plus product filtering with paginated loading and a load more button.

Start the products page by adding a top filter and a load more with paginated api requests; create a new products component to fetch and render product cards.

Implement loading and error handling for the products page by using an error boundary around the products component, showing a loader and a fallback message for API failures.

Implement a paginated products list by converting to a client component for load more, while preserving server side rendering for the initial products and using total products to manage it.

Learn to implement a load more button that fetches eight more products using limit and skip, updates the product list, and hides the button when no items remain.

Set up error and loading states for the paginated list's load more button, handling fetch errors with an error boundary and showing a loader during requests.

Set up URL parameters in the Next.js app router to filter products by category, supporting optional categories and a single slug using dynamic routes.

Filter products by category with dynamic URLs in Next 15 app router, creating category-aware requests for initial and paginated lists, and linking categories from the home page.

Add a categories filter to the products page by fetching category data and rendering a category-filter component; highlight the active category from the url and enable click-to-filter.

Learn to implement category filtering on the products page using a client component and Next navigation router, updating the url with category slugs and handling clicks to filter.

deploy your Next.js app with Vercel by linking a git repo and pushing to main; create a GitHub repo, initialize git, and add a gitignore before initial commit.

deploy your next.js project with vercel by connecting GitHub, importing the repo, and deploying a live page with a free vercel domain and the option for a paid custom domain.

Learn how to make changes in a Next.js app hosted on Vercel, push updates via GitHub to deploy automatically, and use a test environment for QA before going live.

Publish new features to a test environment before going live by creating a feature branch, deploying to a preview environment on Vercel, and having QA test before merging to main.

Rollback deployments quickly with Vercel by performing an instant rollback to a previous deployment, restoring the live site while fixes remain in the main branch for later update.