OpenCourser brand icon
Sign in
We may earn an affiliate commission when you visit our partners.
Course image
Udemy logo

Next.js Projects - 5 NextJS 14 projects (Instagram, Google.)

4.3 Filled star Filled star Filled star Filled star Empty star
Based on 829 ratings
see reviews
Dr. Sahand Ghavidel

NEW Next.js 14 Projects. Build 4 brand new NextJS hands-on projects including IMDB, Instagram, Twitter and Google clones.

Welcome to the best course for learning next js through the development of real-world applications.

This is a project-based course that includes hands-on projects such as Instagram and Google clones.

We are going to use the best practices of Nextjs to design and build fully functional websites.

Read more

NEW Next.js 14 Projects. Build 4 brand new NextJS hands-on projects including IMDB, Instagram, Twitter and Google clones.

Welcome to the best course for learning next js through the development of real-world applications.

This is a project-based course that includes hands-on projects such as Instagram and Google clones.

We are going to use the best practices of Nextjs to design and build fully functional websites.

So far, three projects have been created for this course , including IMDB, Instagram, and Google clones, and more projects are being added each month. You can check the preview of each project in the course curriculum.

In this brand new course, you will learn rendering techniques such as how to build static site pages, server side rendering and incremental static regeneration. You will learn about pagination, image uploading functionality, and state management using recoil. You are going to be able to build amazing responsive websites with Tailwind CSS latest version (3.0).

This course also teaches you how to use Firebase for database and storage. We are going to use next-auth for authentication. And you are going to learn how to use TMDB and google search APIs.

Finally, you are going to learn how to deploy your apps using vercel with your own custom domain name.

My name is Sahand, and I have over 16 years of programming experience.

I will be your instructor and answer any questions you may have in the Q&A section.

The project you are going to build in this course:

  1. IMDB Clone (Next.js 14)

    • use TMBD database

    • style with Tailwind CSS

  2. Instagram Clone

    • use Firebase for database and storage

    • style with Tailwind CSS

    • authenticate using next-auth

    • apply like and comment functionality

    • add upload functionality and use Image tag of nextjs

  3. Google Clone

    • style with Tailwind CSS

    • authenticate using next-auth

    • use google search api

    • include web and image search

  4. X Clone

    • style with Tailwind CSS

    • authenticate using next-auth and Firebase auth

    • apply like and comment functionality

    • add upload functionality and use Image tag of nextjs

  5. Next Authentication using MongoDb, Mongoose and Clerk

    • authenticate using Clerk and mongodb

    • apply full authentication including forgot password, email verification

Enroll now

What's inside

Learning objectives

  • Learn to build 4 practical powerful nextjs apps including tmdb, instagram, and google clones
  • Learn all about rendering techniques such as how to build static site pages, server side rendering and incremental static regeneration
  • Learn about pagination, image uploading functionality, and state management using recoil.
  • Learn how to use firebase for database and storage.
  • Learn how to use next-auth for authentication
  • Learn how to use tmdb and google search apis
  • Learn how to deploy your apps using vercel with your own custom domain name

Syllabus

Project - IMDb Clone
01 - Intro
02 - Install Next.js and Tailwind CSS and create the first template
03 - Add header section
Read more

Traffic lights

Read about what's good
what should give you pause
and possible dealbreakers
Develops advanced professional skills in this in-demand frontend JavaScript framework, including pagination, image upload functionality, and state management
Focuses on Next.js, which is a bleeding-edge JavaScript framework that is modern, and has been recently revised
Builds a strong foundation in the key concepts and technologies foundational to Node.js programming
Emphasizes hands-on learning, which enables you to apply what you're learning in real-world scenarios
Teaches using a series of practical projects, such as building clones of Instagram, Google, and Twitter
Taught by an instructor with 16 years of experience in programming and extensive experience in teaching Next.js, which students often seek out

Save this course

Create your own learning path. Save this course to your list so you can find it easily later.
Save

Reviews summary

Next.js projects - practical applications

According to students, this course offers a practical, project-based approach to mastering Next.js 14, enabling them to build functional, real-world applications like Instagram and Google clones. The focus on a modern tech stack, including Tailwind CSS, Firebase, and Next-Auth, is highly beneficial for professional development. While the hands-on demos and coverage of rendering techniques are likely strong points, learners might find certain sections assume prior knowledge or desire more in-depth conceptual explanations. The instructor's commitment to keeping the course updated is a significant advantage.
Instructor frequently updates content to the latest Next.js versions.
"I appreciate that the instructor keeps the course updated to the latest Next.js version; it's critical in this field."
"Knowing that older versions are archived provides confidence that the material remains current and relevant."
"The continuous addition of new projects and updates is a huge plus for long-term value."
Covers a wide array of Next.js features and integrations.
"I got to explore various rendering techniques like SSR, SSG, and ISR, which are essential Next.js concepts."
"Working with external APIs like TMDB and Google Search gave me practical experience in data fetching."
"The course covers a good range of functionalities, from image uploads to managing likes and comments."
Utilizes current and in-demand web development technologies.
"I'm glad the course uses Next.js 14, Tailwind CSS, and Firebase; these are the tools I need for current development."
"Integrating Next-Auth and Recoil was seamless and crucial for understanding modern web authentication and state."
"The deployment section with Vercel was incredibly useful, providing a complete development workflow."
Develops practical skills through real-world application building.
"I found building full applications like Instagram and Google clones to be the most effective way to learn Next.js."
"The multi-project approach truly helped me connect different Next.js features to real-world scenarios."
"This course is ideal for hands-on learners; I immediately applied what I built to my own projects."
Focuses more on practical implementation than deep theoretical dives.
"While great for building, I sometimes wished for more theoretical depth or alternative approaches to problems."
"I would have liked more detailed explanations on complex Next.js patterns or advanced performance optimizations."
"The course is very much a 'how-to-build' guide, rather than a deep dive into every concept's internal workings."
May require prior React/JavaScript knowledge for optimal benefit.
"I felt a solid grasp of React and JavaScript was necessary to keep up with the pace of the projects."
"If you're a complete beginner to React, you might find some parts of the course challenging to follow."
"I would recommend having some prior web development experience to fully benefit from this course."

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 Next.js Projects - 5 NextJS 14 projects (Instagram, Google.) with these activities:
Set up Next.js development environment
Build a solid development environment before you start coding. This will help prevent headaches as you work on course projects.
Browse courses on Next.js
Show steps
  • Install the Node.js runtime
  • Install the Next.js framework
  • Create a new Next.js project
  • Run the Next.js development server
Build a simple Next.js website
Building a simple website will help you get familiar with the Next.js framework and its basic features.
Show steps
  • Create a new Next.js project
  • Add a simple page to the project
  • Add some basic styling to the page
  • Deploy the website to a hosting provider
Solve Next.js exercises
Solving exercises will help you improve your understanding of Next.js concepts and syntax.
Show steps
  • Find a set of Next.js exercises
  • Solve the exercises one by one
  • Check your solutions against the provided answers
Six other activities
Expand to see all activities and additional details
Show all nine activities
Watch Next.js video tutorials
Watching video tutorials can help you learn Next.js from experienced developers.
Show steps
  • Find a series of Next.js video tutorials
  • Watch the tutorials in sequence
  • Take notes or create summaries of the key points
Write a blog post about Next.js
Writing a blog post will help you solidify your understanding of Next.js and share your knowledge with others.
Show steps
  • Choose a topic for your blog post
  • Research the topic and gather information
  • Write the blog post
  • Publish the blog post on your website or blog
  • Promote the blog post on social media
Attend a Next.js meetup or conference
Attending a meetup or conference will help you connect with other Next.js developers and learn from their experiences.
Show steps
  • Find a Next.js meetup or conference in your area
  • Register for the event
  • Attend the event and participate in the discussions
Participate in a Next.js workshop
Participating in a workshop will give you the opportunity to learn Next.js from an experienced instructor and get hands-on practice.
Show steps
  • Find a Next.js workshop in your area
  • Register for the workshop
  • Attend the workshop and participate in the exercises
Contribute to the Next.js open-source project
Contributing to the Next.js open-source project will give you the opportunity to work on real-world Next.js code and contribute to the community.
Show steps
  • Find an issue or feature request on the Next.js GitHub repository
  • Fork the Next.js repository
  • Create a branch for your changes
  • Make your changes and submit a pull request
Join a Next.js study group
Joining a study group will give you the opportunity to discuss Next.js concepts with other learners and get help with your projects.
Show steps
  • Find a Next.js study group in your area or online
  • Join the study group
  • Participate in the study group's discussions and activities

Career center

Learners who complete Next.js Projects - 5 NextJS 14 projects (Instagram, Google.) 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:
Facebook
LinkedIn
Reddit
X
Link
Email

Similar courses

Similar courses are unavailable at this time. Please try again later.
Course image
Rating
4.3 Filled star Filled star Filled star Filled star Empty star
Effort
54 total hours
Via
Udemy
Instructor
Dr. Sahand Ghavidel
Language
English
Traffic lights
Read about what's good
what should give you pause
and possible dealbreakers
Develops advanced professional skills in this in-demand frontend JavaScript framework, including pagination, image upload functionality, and state management
Focuses on Next.js, which is a bleeding-edge JavaScript framework that is modern, and has been recently revised
Builds a strong foundation in the key concepts and technologies foundational to Node.js programming
Emphasizes hands-on learning, which enables you to apply what you're learning in real-world scenarios
Teaches using a series of practical projects, such as building clones of Instagram, Google, and Twitter
Taught by an instructor with 16 years of experience in programming and extensive experience in teaching Next.js, which students often seek out
Share this
Share to help others discover this course.
Facebook LinkedIn X Reddit Link Email
Begin learning today
Enroll now to gain full access to Next.js Projects - 5 NextJS 14 projects (Instagram, Google.).
Enroll now
Save for later
Add this course to your list. Find it anytime.
Save
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 - 2025 OpenCourser