The Ultimate Modern Next.js Complete Course 2024

Build a Next.js project that fetches product data from an API and displays it across routes, using create next app and Tailwind, then run the dev server.

Build a three-column products list in Next.js using Tailwind and Shad UI, rendering product cards with images and dynamic routes to product pages.

Build a dynamic product page in Next.js by using a product folder with a url param to fetch data for a single product and render it in a dedicated component.

Learn to implement a loading state in a Next.js product page by building and styling a skeleton placeholder, wiring a loading component, and exploring data fetching with params.

Build a new Next.js project, explore route handlers, and implement CRUD operations—get all lists, post, update, and delete—while learning API building and caching strategies.

Explore the project diagram, set up a Next.js app with Tailwind and Chassis, connect MongoDB via Prisma, and implement API route handlers using get, post, put, and delete.

Create a new next app, install prisma for MongoDB, define a list model with id, maps_id, title, description, createdAt, configure the database URL, and generate the prisma client.

Build a list box form with a title input and description text area, including a submit button, styled with a flex column layout for a centered app Listify.

Capture input with a client component, manage form data with use state, and post to an api route to insert data into MongoDB via Next.js route handlers.

Discover how Next.js caches fetch requests and how to refresh routes after posting data using Next.js navigation's useRouter, ensuring the homepage reflects new entries.

Learn to build a list card component in Next.js using the Shared CDN and Tailwind, styling the card and implementing an editable dialog with a put workflow.

Learn to implement an edit flow with an edit button opening a dialog, manage open state with useState, and update title and description via a put request to the API.

Build a delete API route in Next.js with a route handler and Prisma to delete by id using the http method delete, returning json and enabling a ui delete action.

Explore the advanced Next.js server actions in a hands-on Talenti project that demonstrates creating, getting, editing, and deleting data without a back-end API, and compare it to REST APIs.

Set up a new Next.js project and connect a MongoDB database with Prisma. Define a talent schema, generate the Prisma client, and run the dev server.

Delete existing code, add an h1 with a logo, and use tailwind for a white background. Use Next.js font module to import a Google font (Reddit) and apply it.

Learn to build an add talent form with name, email, title, and skills, wire it to the database using server actions, and display talent cards by mapping fetched data.

Understand server actions: asynchronous server-side functions that mutate data, usable in server and client components for form submissions without API.

Use a server action to collect form data and create talent records with Prisma, capturing name, email, title, and skills for MongoDB storage via a post request.

Fetch and display talent data in a Next.js server action using Prisma with MongoDB, map the results, and refresh the cache with revalidate to reflect new data.

Create a talent card, show talent data, and enable delete, edit, and hire me actions wired to a server action using Prisma to delete from MongoDB with hidden id input.

Build an editable talent profile by launching a dialog form to update name, email, title, and skills, then save changes with responsive state handling.

Use server actions to mutate data in real time, edit emojis, save changes, delete items, and compare to REST API, with emails via Outlook, in the ultimate modern Next.js course.

Build a postie microblog app with Next.js, enabling GitHub authentication via next-auth, private routes, posting, like and delete functionality, Zod validation, and modern form handling with react-hook-form and chassis styling.

Set up next auth with GitHub provider in a Next.js project, configure env vars, routes, and Prisma adapter to connect authentication data to MongoDB.

Create and style a navbar component in a Next.js app, featuring a logo, avatar from session, and sign in/out logic with next image and CDN fonts.

Build a post display component in Next.js by fetching all posts with Prisma, mapping them to a card-based frontend, and enriching with user avatars and formatted dates.

Use date-fns to format relative post dates with format distance, show created at times, and implement a secure delete action using authentication, hidden post id, and next.js actions.

During the landing page fix, the lesson uses session data to show content only when the user is authenticated, prompting login and enabling post creation with TypeScript forms.

Wrap your client components with a session provider in the layout, then use the session hook to access the data object and read the user.

Conclude the full stack Next.js course by demonstrating how to add an update feature to posts, envisioning a Twitter clone, and inviting viewers to follow on YouTube and leave reviews.