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

Explore how Next.js, a React-based framework, delivers fast server-side rendering and static site generation, unifies front-end and back-end, and supports microservice migration, database integration, and npm packages.

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.

Set up a Next.js project with npm create next app, enable TypeScript, eslint, and tailwind, then tour the src directory, public folder, app router and page.tsx, plus key config files.

Explore how the Next.js app router provides out-of-the-box routing via the app directory, using page.js and layout.js (or ts/tsx) to create nested routes like /about and /about/history without boilerplate.

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 dynamic routes in Next.js by creating a client-side user page under app/users/[id], fetch and display user data via an api route using useEffect and useState.

Learn how to implement Next.js middlewares to protect routes, redirect unauthorized users, and configure a matcher for protected paths in a sample app.

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.

Create a custom not found route in the app directory by adding a not-found.js page, styling it, and linking back home using Next.js's Link component.

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.

Learn to integrate Tailwind CSS with a new Next.js project during setup, including installation and configuration, and run the app on localhost 3000.

Explore how global CSS works in Next.js and React, how shared container styles can cause conflicts, and how module CSS provides a solution.

Learn how to fix global CSS conflicts in Next.js by converting to CSS modules, naming files as component.module.css, importing styles, and applying scoped styling to keep components isolated.

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.

Learn to configure Redux Toolkit slices as features, set up a counter slice with initial state and reducers, and export increment and decrement actions for the store.

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.

Configure the prisma orm to connect to neon db postgresql by initializing prisma, setting the data source, and defining a user model with id, name, email, and created.

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.

Learn to implement a post route to insert users into PostgreSQL using Prisma with Next.js, sending JSON body, creating a user, handling errors, and returning created data.

Connect a Next.js project to MongoDB Atlas using mongoose. Set the MongoDB URI in an environment variable, create a connection.js, install mongoose, and handle async connection with error logging.

Create a Mongoose model for tasks using Atlas data, defining user, task, and status with enum (current, complete) and timestamps, then export and use it for DB operations.

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 create a post operation API with mongoose, sending user, task, and status from JSON body, saving with the Task model, and returning 201 or 500.

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.

Set up the NextAuth provider and session management in a Next.js app by building a session provider, login and user info components, and wiring sign in flows with use session.

Enhance the auth provider by validating credentials, posting login data via axios to a Next.js route, and configuring JWT tokens, sessions, and redirects to manage sign-in flows.

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.

Develop a sign up form and handler in a Next.js app, wiring a client sign up component to collect email and password, build payload, call register user, and log results.

Explore Next.js image component optimization by implementing width, height, alt props, and lazy loading; compare HTML images, blur placeholders, WebP formats, and styling with the image style prop.

Enhance Next.js api optimization by refactoring CRUD operations into a reusable api handler, boosting readability, error handling, and testing for get, post, patch, and delete endpoints.

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.