Get Hostinger Discount: hostinger.com/Sahand Coupon Code: SAHAND
Are you eager to become an expert in Next.js 14? You've come to the right place! Delve into our complete Next.js tutorial, where we walk you through everything from the basics to advanced methods. Whether you're just starting out with Next.js or aiming to construct a complete website using Next.js and Tailwind CSS, this crash course is perfect for you.
Discover the newest functionalities of Next.js 14 and master the art of crafting impressive portfolios and projects. With our comprehensive Next.js 14 course, you'll gain the proficiency to tackle any Next.js task. Embark on this thrilling journey with us and enhance your development skills today!
Source code and final version: github.com/sahandghavidel/imd...
Eraser diagram: app.eraser.io/workspace/v2yko...
Welcome to this project where we build an IMdB clone with Next.js 14 and Tailwind CSS. With the release of Next.js 14, website creation has become incredibly optimised and easy. In this course, we'll walk you through the process, step by step.
We'll start by understanding how to organise the folder and file structure of our Next.js 14 project. Then, we'll jump right into building an IMdB clone from scratch, utilising the power of the TMDB API. Just imagine, creating your very own Movie database app similar to imdb.com!
But that's not all. We'll enhance our project with modern design elements using Tailwind CSS, ensuring our website looks professional. Plus, we'll learn how to add loading effects seamlessly with the modern approach of Next.js 14 and handle errors efficiently using its error file.
As we progress, we'll tackle more advanced concepts like implementing search functionality and creating different components tailored to our needs, whether server-side or client-side. We'll even develop separate pages for each movie with its own unique design as well as dark mode functionality using Tailwind CSS.
Timestamp:
00:00 - Intro
3:00 - File and folder structure in Next.js 14 to create pages and routes
20:32 - Install Next.js and Tailwind CSS and create the first template
34:20 - Create the header section
48:28 - Add dark mode
01:03:55 - Create the about page
01:08:01 - Create the navbar component
01:18:08 - Fetch data from TMDB API in the home page
01:29:07 - Handle the error using next.js 14
01:33:00 - Add loading effect using next.js 14
01:39:45 - Add card component
01:54:00 - Add movie page
02:06:00 - Add search box
02:15:36 - Deploy to Hostinger
10 июл 2024
