Next JS Project Bootcamp:Build Netflix App & 2 More Projects

Discover why Next.js outperforms React with server side rendering, static site generation, automatic code splitting, file based routing, built in API routes, image optimization, middleware, and enhanced SEO.

Learn to build a layout wrapper in next.js by adding a shared navigation bar with daisy ui, integrated in the root layout to persist across home, about, and history routes.

This lecture guides setting up next.js api routing in the app/api directory, building an asynchronous route handler that returns demo json data, and preparing for dynamic routing with file naming.

Build a catch-all route in Next.js by spreading a dynamic route parameter to capture product, category, and color ids, then render a details product page showing the params.

Learn client side rendering in Next.js by fetching posts from json placeholder using useEffect and useState, rendering data in the browser, and contrasting CSR with SSR and SSG.

Explore static site generation (SSG) in Next.js with the app router, replacing get static props, making components async, and pre-rendering data-driven pages for SEO-friendly HTML.

Compare static site generation with server side rendering in Next.js, then implement no-cache SSR that renders HTML on demand from the server for each request.

Combine caching with server side rendering in Next.js by routing to posts/[id].js using the link component and printing the id from params with an async server side rendering.

Revalidate and refresh cached data at a set interval, such as every 62 seconds, using incremental static regeneration in Next.js to fetch the latest data for chat features.

Set up a Next.js project with Material UI, run the dev server, and replace boilerplate, then import and showcase components like buttons, checkboxes, progress bars using MUI with emotion.

Learn how to declare and manage React states in a Next.js project using useState, including incrementing, decrementing, dispatchers, and exploring booleans, strings, arrays, and objects.

Explore lifting state up to manage multiple counters, map them, and calculate a total with reduce while wiring increment and decrement handlers.

Refactor code to add increment and decrement handlers, manage counter state by lifting state up, and discuss prop drilling limits. Explore React context API and Redux Toolkit as future solutions.

Wrap the app's root layout with the counter context provider and access counter, total count, and increment/decrement handlers via use context in a client component.

Learn how to replace context API with Redux toolkit for efficient state management. Set up a Redux store with configureStore and wrap the app with Provider in a Next.js project.

Connect a Redux Toolkit store in a Next.js project using useSelector and useDispatch to manage counter state with increment and decrement actions via slices.

Migrate the Prisma schema, create a Next.js API route for users, and implement a get API that uses Prisma client to fetch users with findMany, handling errors and disconnecting.

Define a get route under src/app/api/tasks to fetch all tasks from the model. Connect to MongoDB, handle errors with try/catch, and return a JSON response with status 200.

Learn to implement a patch (update) api in a Next.js app using mongoose, extracting the task id from the URL and returning the updated task.

Implement the delete operation in a crud module using Mongoose, handling ID parameters, returning 200 on success and 404 on missing, and preparing routes in Express.

Connect to MongoDB, define a product schema with fields like category, name, seller, price, stock, ratings, and images, and fetch products with axios from a route using a base url.

Learn to fetch and display products using axios in a Next.js project, supporting server-side and client-side data fetching, and connecting to external and internal APIs with get, delete, patch.

Explore how to implement next-auth in Next.js using the app router, with route handlers, API auth, and a credential provider to build a full authentication flow.

Explore client and server side login sessions in a Next.js project, using next auth, sign in routing, env setup, and server side session details with get server session.

learn to register users and store their data in a mongo db database using axios, mongoose, and bcrypt, with a next.js action, api route, and error handling.

Register a user and set up a logout button by leveraging session data and a loading state, using a ternary to toggle sign in and sign out.

Learn to implement API route handlers, including post, patch, and delete operations, with proper error handling and status codes like 404 and 200, using a wrapper function.