The Ultimate Modern Next.js Complete Course 2024

Focused View

Oliver G

5:17:37

0 View

1. Building the Foundation of NEXT JS

1.1 NextJS Installation Doc.html

1.2 NodeJS Installation Link.html

1. Introduction.mp4

07:29

2. Routing.mp4

03:40

3. File Conventions.mp4

02:47

4. Server vs Client Components.mp4

06:19

5. Dynamic Routes.mp4

04:05

6. Link and Navigation.mp4

07:24

7. Params.mp4

08:54

8. Fetch API in a Server Component.mp4

07:33

9. Fetch API in a Client Component.mp4

12:08

10.1 Github Source Code Link.html

10. Github Repo Link.html

2. Hands-On Foundation (Project #1 - Product Fetch)

1. Introduction.mp4

02:54

2. Fetching Products Data.mp4

04:02

3. Products List Component.mp4

12:26

4. Dynamic Product Component.mp4

10:35

5. Loading State.mp4

06:47

6. Please leave a review ⭐⭐⭐⭐⭐.html

7.1 Github Repo Source Code.html

7. Github Repo Link.html

3. Learn Fullstack NEXT JS Backend API (Project #2 - Shopping List App)

1. Project Overview.mp4

01:03

2. Project Diagram and Technologies.mp4

01:55

3. Installation & Setup.mp4

05:42

4. List Box Form.mp4

06:58

5. POST API Route.mp4

11:33

6. GET API Route.mp4

07:13

7. Caching System.mp4

03:09

8. List Card.mp4

07:35

9. Setup Input Handler.mp4

09:11

10. PUT API Route.mp4

06:28

11. DELETE API Route.mp4

07:53

12.1 Github Source Code.html

12. Github Repo Link.html

4. Learn Fullstack NEXT JS Server Actions (Project #3 -Talent Board)

1. Project overview.mp4

02:37

2. Installation.mp4

04:26

3. Font Import.mp4

03:14

4. Add Talent Component.mp4

09:25

5. Server Actions Intro.mp4

06:26

6. Server Action Implement.mp4

05:25

7. Fetching and and Adding Data.mp4

05:16

8. Delete Talent Data.mp4

09:47

9. Edit Talent Data.mp4

13:31

10. Hire Me Button.mp4

01:17

11. Overview & Outro.mp4

01:38

12.1 Github Source Code Link.html

12. Github Repo Link.html

5. Authentication with Next-Auth v5, Typescript, Zod (Project #4 Posty)

1. Project Overview.mp4

03:27

2.1 AuthJS.html

2. Installation.mp4

03:25

3. Data Model.mp4

05:45

4. Next Auth Setup.mp4

14:21

5. Navbar Component.mp4

11:24

6. Post Form.mp4

10:12

7. Post Actions.mp4

09:10

8. Post Form Handle.mp4

05:05

9. Post Display.mp4

10:56

10. Date and Delete Actions.mp4

08:10

11. Landing Page Fix.mp4

02:57

12. How to get Session in Client Component.mp4

03:07

13. Outro.mp4

00:53

14.1 Github Source Code Link.html

14. Github Repo Link.html

Description

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

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.

Who is this 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

What You Need to Know?

Experience with basic React is recommended

NO prior knowledge of NextJS is required.

More details

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

User Reviews

Rating

average 0

Total votes0

Focused display

Web Development

Oliver G

Instructor's Courses

Oliver is a Software Engineer and Instructor, who loves to build beautiful web & mobile apps that resonate with modern trending designs. I am passionate about helping students to succeed in reaching their goals. I believe strongly in an interdisciplinary approach to learning skills esp. programming. After working with Software Development for many years, I saw it good to share my experience and knowledge with the principal desire of helping those who are aspiring to improve their knowledge and skills in software development.I now happily dedicate part of my time to crafting well structured and easy-to-follow courses on software engineering giving special attention to design aspects and common problems that developers usually face.

Udemy

View courses Udemy

Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.