Teach on Udemy

Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

The Ultimate Modern Next.js Complete Course 2024

Name: The Ultimate Modern Next.js Complete Course 2024
Rating: 4.6 (9 reviews)

Learn to build fullstack application with Next.js, Prisma, MongoDB, Next Auth 5, Typescript, Zod, Shadcn, TailwindCSS

Created byOliver G

Last updated 6/2024

English

English [Auto],

What you'll learn

Learn to build fullstack scalable React apps with NextJS
Learn about Server and Client Components and different ways to implement features
Get started with Data fetching, Server Actions , Authentication all while building projects to concrete learned knowledge
Comprehensive Coverage The most in-depth NextJS exploration available online.
Project-Based Learning Apply your knowledge in real-world settings to retain and practice skills.

Course content

5 sections • 55 lectures • 5h 17m total length

Introduction7:29
In this video, You will start by installing NextJS and we will cover what is required. Then we will jump into the file structure and look into where files are located and where will our code go.
Routing3:40
Explore Next.js routing by building pages and nested routes with folder structure, using a shared layout to persist UI across routes like profile and its settings.
File Conventions2:47
Server vs Client Components6:19
Dynamic Routes4:05
Link and Navigation7:24
Params8:54
Explore how to capture route data in Next.js using params and search params, for both server and client components, including dynamic and catch-all routes.
Fetch API in a Server Component7:33
Learn how to fetch data from an API in Next.js server and client components, using updated fetch options, no cache, loading states, and JSON responses.
Fetch API in a Client Component12:08
Github Repo Link0:01

Introduction2:54
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.
Fetching Products Data4:02
Products List Component12:26
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.
Dynamic Product Component10:35
Loading State6:47
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.
Please leave a review ⭐⭐⭐⭐⭐0:17
Github Repo Link0:01

Project Overview1:03
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.
Project Diagram and Technologies1:55
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.
Installation & Setup5:42
List Box Form6:58
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.
POST API Route11:33
GET API Route7:13
Caching System3:09
List Card7:35
Setup Input Handler9:11
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.
PUT API Route6:28
DELETE API Route7:53
Github Repo Link0:01

Project overview2:37
Installation4:26
Font Import3:14
Add Talent Component9:25
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.
Server Actions Intro6:26
Server Action Implement5:25
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.
Fetching and and Adding Data5:16
Delete Talent Data9:47
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.
Edit Talent Data13:31
Build an editable talent profile by launching a dialog form to update name, email, title, and skills, then save changes with responsive state handling.
Hire Me Button1:17
Overview & Outro1:38
Github Repo Link0:01

Project Overview3:27
Installation3:25
Data Model5:45
Next Auth Setup14:21
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.
Navbar Component11:24
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.
Post Form10:12
Post Actions9:10
Post Form Handle5:05
Post Display10:56
Date and Delete Actions8:10
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.
Landing Page Fix2:57
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.
How to get Session in Client Component3:07
Outro0:53
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.
Github Repo Link0:01

Requirements

Experience with basic React is recommended
NO prior knowledge of NextJS is required.

Description

Welcome to the World of Next.js!

Congratulations! You're about to embark on an exciting journey into the fast-paced world of Next.js, a powerful framework designed to help developers create high-performance, feature-rich web applications that truly stand out in today’s digital landscape.

Next.js enables the full potential of server-rendered React applications, merging the best aspects of web development into one developer-friendly framework. This comprehensive course will guide you through advanced Next.js features, helping you differentiate yourself in the job market and confidently tackle real-world projects. You’ll delve into authentication with the Next-Auth library, innovative data mutation techniques using server actions, and foundational concepts of server and client components, setting you on the path to mastering modern web development.

Why Learn Next.js?

As the tech industry seeks skilled professionals, mastering Next.js puts you at the forefront of opportunity. Whether you're starting a new career as a software engineer or looking to enhance your current projects, there's never been a better time to dive into Next.js.

What Will You Achieve?

Through an extensive collection of video lectures, detailed diagrams, and real-world examples, this course ensures a thorough understanding of Next.js, even if you're new to the framework. The learning experience is designed to be both rigorous and encouraging, building knowledge step-by-step and contextualizing each feature of Next.js.

This course promises the most comprehensive exploration of Next.js available online. Every aspect is covered in this resource-rich adventure.

Course Topics:

Server vs. Client Components: Understand and leverage each for maximum efficiency.
Data Validation Techniques: Ensure the reliability and integrity of user input.
Caching Systems: Navigate Next.js's sophisticated caching systems for optimal performance.
Server Actions for Data Mutations: Structure server actions effectively to handle data changes.
Styling with Tailwind CSS: Enhance user interfaces with component styling.
TypeScript Integration: Leverage TypeScript for robust, type-safe applications.
User Authentication with Next-Auth: Implement secure and scalable user management.
Modern Components with shadcn: Styling a modern touch with shadcn.
Form Handling with Zod: Learn to handle form and actions with zod.

With each topic, you'll gain the knowledge, proficiency, and confidence to apply what you've learned in practical scenarios.

Who Is This Course For?

This course is ideal for any engineer looking to build high-performance web apps with Next.js. Basic knowledge of React and TypeScript is helpful.

Learning Pattern

We will adopt a project-based approach to learning, which will allow us to practice what we have learned in real-world settings. This method will enable us to learn quickly and retain the knowledge, preparing us for larger projects in the future.

Embrace the Future of Web Development

Join the ranks of developers who not only follow best practices but also contribute to them. Sign up now to transform your understanding and execution of modern web development with Next.js.

*Course will be updated to Next.js v15 when a stable version is available.

Who this course is for:

Anyone trying to learn NextJS, great compliments after learning React
Students who wants to learn to build modern apps with modern technologies and up their skills

The Ultimate Modern Next.js Complete Course 2024

What you'll learn

Explore related topics

Course content

Building the Foundation of NEXT JS10 lectures • 1hr

Hands-On Foundation (Project #1 - Product Fetch)7 lectures • 37min

Learn Fullstack NEXT JS: Backend API (Project #2 - Shopping List App)12 lectures • 1hr 9min

Learn Fullstack NEXT JS: Server Actions (Project #3 -Talent Board)12 lectures • 1hr 3min

Authentication with Next-Auth v5, Typescript, Zod (Project #4: Posty)14 lectures • 1hr 29min

Requirements

Description

Who this course is for: