We may earn an affiliate commission when you visit our partners.
Course image
John Smilga

Start your path to becoming a proficient web developer with our detailed video course on building apps using Next JS 14. Designed specifically for beginners and intermediate developers, this course will help you develop high-level skills. Begin by creating a Next.js application from scratch, understanding its structure, and mastering advanced routing techniques, including link components and dynamic paths.

Read more

Start your path to becoming a proficient web developer with our detailed video course on building apps using Next JS 14. Designed specifically for beginners and intermediate developers, this course will help you develop high-level skills. Begin by creating a Next.js application from scratch, understanding its structure, and mastering advanced routing techniques, including link components and dynamic paths.

Delve into front-end design using TailwindCSS and Shadcn/ui, mastering responsive design, theme management, and consistent styling with layout components. Learn the fundamentals of backend development, including the distinctions between server and client components, how to fetch data, manage loading states, and implement error handling along with nested layouts.

Enhance your app with CRUD functionalities through Server Actions, improve user interaction, and ensure data integrity with the Zod library. You will also integrate a database using Supabase, handle image uploads, and implement crucial functionalities like authentication with CLERK Service.

Conclude the course with the skills to deploy your NextJS app on Vercel, and incorporate features such as prompt handling, response management, and image generation.

This course offers a practical approach, including numerous challenges to apply what you've learned. Transform your web development skills and gain the confidence to create sophisticated web applications.

Enroll now

What's inside

Learning objectives

  • Build modern next js applications
  • Authenticate your next js applications with clerk
  • Build components with shadcn/ui
  • Store data in database with prisma and supabase
  • Store images in database
  • Work with server actions

Syllabus

Introduction
Useful Info
Github Repo
Next.js Tutorial
Read more
Important Info !!!
Install
Files and Folders
Home Page
Create Pages
Link Component
Nested Routes
CSS
Tailwind Info (optional)
Layout Component
Navbar Component
Fonts
Metadata
Server vs Client
Counter
Fetch Data
Refactor
Loading Component
Error Component
Nested Layout
Dynamic Page
Local Image
Remote Images
Responsive Images
More Routing Options
Server Actions - Info
Actions Page - Setup
Actions File
Save User
Fetch Users
Revalidate Cache and Redirect
UseFormStatus Hook
UseFormState Hook
Delete Button
Input Hidden
Bind Method
Route Handlers - Info
Route Handler - GET
Route Handlers - Params
Route Handlers - POST
Middleware
Local Build
Cache
HomeAway Project
Project Overview
Install New Next.js Application
Remove Boilerplate
Install Shadcn/ui Library
Shadcn/ui Button Component
Install More Shadcn/ui Components
Navbar Structure
Logo and NavSearch Components
Change Theme with Shadcn/ui
Setup Dark Mode with Shadcn/ui
LinksDropdown Component
Setup and Customize Clerk Auth Provider
SignOutLink Component
Create Profile - Setup
FormInput Component
SubmitButton Component
FormContainer Component
Refactor Create Profile
Zod Library
Supabase Setup
Prisma Setup
Connect Prisma and Supabase
Prisma Crud Examples
Create Profile Model and createProfileAction
Fetch Profile Image Action
Modify Create Profile Page
Fetch User Profile
Update Profile Page
Zod SafeParse Method
ValidateWithZodSchema - Helper Function
Image Input
Image Input Container
Image Zod Validation
Supabase Bucket and Keys
Supabase Upload Image
Update Profile Image Action - Complete
Property Schema
Create Property Page - Setup
Price Input
Categories Input
Description Input
Countries Input
Counter Input
Amenities Input
Create Property
Fetch Properties
Home Page - Setup
Categories List
Empty List
Properties Container

Good to know

Know what's good
, what to watch for
, and possible dealbreakers
Develops React Next.js, TailwindCSS, and Shadcn/ui, which are core skills for intermediate level web developers
Teaches data fetching, loading states, and error handling, which are essential in building robust web applications
Provides an introduction to Server Actions and Route Handlers, enhancing the dynamic capabilities of web applications
Covers best practices with Supabase, Prisma, and Zod, crucial tools for data management and validation in web development
Taught by John Smilga, a renowned web development instructor, recognized for his expertise in Next.js and React
Offers hands-on labs and exercises, providing learners with practical experience in building web applications

Save this course

Save Mastering Next.js - Build Airbnb Clone from Scratch (2024) to your list so you can find it easily later:
Save

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in Mastering Next.js - Build Airbnb Clone from Scratch (2024) with these activities:
Review: Head First Design Patterns
Review the fundamentals of design patterns to build a stronger foundation for developing web applications with Next.js.
Show steps
  • Read the introduction and first three chapters
  • Identify and describe the different types of design patterns
  • Explain the benefits and drawbacks of using design patterns
Attend a Next.js Meetup
Connect with other Next.js developers and professionals at a meetup, allowing you to share knowledge, learn from others, and expand your network.
Browse courses on Next.js
Show steps
  • Find and register for a local Next.js meetup
  • Attend the meetup and participate in discussions
  • Network with other attendees
Build a Simple Blog with Next.js
Apply your understanding of Next.js by building a basic blog application, solidifying your grasp of core concepts and project development.
Browse courses on Next.js
Show steps
  • Set up a new Next.js project
  • Create a basic layout and navigation
  • Implement a blog post page
  • Add a blog post listing page
Six other activities
Expand to see all activities and additional details
Show all nine activities
Follow Tutorials on Advanced Next.js Techniques
Expand your knowledge of Next.js by following tutorials that cover advanced techniques and features, enabling you to explore the full potential of the framework.
Browse courses on Next.js
Show steps
  • Identify tutorials that align with your learning goals
  • Follow the tutorials step-by-step
  • Experiment with the techniques in your own projects
Next.js Routing Challenges
Reinforce your understanding of Next.js routing by attempting a series of challenges that test your ability to navigate applications effectively.
Browse courses on Next.js
Show steps
  • Attempt the challenges provided
  • Debug and troubleshoot your solutions
  • Review the solutions and identify areas for improvement
Contribute to an Open-Source Next.js Project
Gain practical experience and give back to the community by contributing to an open-source Next.js project, solidifying your understanding and demonstrating your commitment to the framework.
Browse courses on Next.js
Show steps
  • Identify an open-source Next.js project that aligns with your interests
  • Review the project's documentation and codebase
  • Identify an area where you can contribute
Write a Tutorial on Next.js Routing
Deepen your knowledge of Next.js routing by creating a tutorial that explains the different routing techniques, enhancing your understanding and ability to effectively navigate applications.
Browse courses on Next.js
Show steps
  • Research and gather information on Next.js routing
  • Organize your content into a logical structure
  • Write clear and concise explanations
  • Include code examples to illustrate concepts
Participate in a Next.js Workshop
Enhance your Next.js skills by attending a workshop led by experienced professionals, providing you with hands-on experience and in-depth knowledge.
Browse courses on Next.js
Show steps
  • Identify and register for a relevant Next.js workshop
  • Attend the workshop and actively participate
  • Complete the hands-on exercises and projects
Develop a Next.js Application for a Local Business
Apply your Next.js skills to a practical scenario by building a custom web application that meets the specific needs of a local business, demonstrating your ability to use Next.js for real-world problem-solving.
Browse courses on Next.js
Show steps
  • Identify a local business and gather requirements
  • Design and prototype the application
  • Implement the application using Next.js
  • Test and deploy the application

Career center

Learners who complete Mastering Next.js - Build Airbnb Clone from Scratch (2024) will develop knowledge and skills that may be useful to these careers:

Reading list

We haven't picked any books for this reading list yet.

Share

Help others find this course page by sharing it with your friends and followers:

Similar courses

Here are nine courses similar to Mastering Next.js - Build Airbnb Clone from Scratch (2024).
TypeScript & Next.js 14: Building a Tech Ticketing App
Most relevant
Full Stack Markdown App With Next.js
Most relevant
Next.js by Example
Most relevant
Next.js × shadcn/ui × Supabaseで本格的なWebアプリ開発を学ぶフルスタック講座
Most relevant
Full Stack Twitter Prototype With Next.js
Most relevant
Next JS and Google Maps API : Location-Based Ride Requests
Most relevant
Full Stack LinkedIn Prototype With Next.js
Most relevant
Complete React, Next.js & TypeScript Projects Course 2024
Most relevant
【フォーム開発実践】認証やお問い合わせフォームをNext.js/RHF/zod等のモダン技術を使って開発する実践講座
Most relevant
Our mission

OpenCourser helps millions of learners each year. People visit us to learn workspace skills, ace their exams, and nurture their curiosity.

Our extensive catalog contains over 50,000 courses and twice as many books. Browse by search, by topic, or even by career interests. We'll match you to the right resources quickly.

Find this site helpful? Tell a friend about us.

Affiliate disclosure

We're supported by our community of learners. When you purchase or subscribe to courses and programs or purchase books, we may earn a commission from our partners.

Your purchases help us maintain our catalog and keep our servers humming without ads.

Thank you for supporting OpenCourser.

© 2016 - 2024 OpenCourser