Build and Deploy a Modern Next.js 14 Application | React, Next JS 14, TypeScript, Tailwind CSS
The demand for Next.js 14 applications peaked! Now is the perfect time to build a state-of-the-art modern application that utilizes all of the latest and greatest of what Next 14 has to offer, leveraging features such as server-side rendering and the app router.
Alongside building this application, you'll also learn how to:
- Use Next.js 14 App Router and Server side Rendering
- Implement Advanced Search Functionality
- Create Filtering Capabilities
- Optimize Metadata and SEO
- Create custom filter, combo box, and modal elements
- Maintain a well-organized file and folder structure.
- Embrace the principles of writing clean code.
Time Stamps 👇
00:00:00 - Intro
00:12:10 - Hero Section
00:29:00 - Layout
00:47:31 - Car Catalogue
01:16:23 - Rapid API Cars
01:45:38 - Card Details Modal
02:04:05 - Car images
02:13:23 - Search
02:25:26 - Server-side rendering
02:20:36 - OMG, A BUG
02:33:36 - Custom Filters
02:50:50 - Show More
03:00:22 - Client-side rendering
03:20:28 - Deployment
💻RapidAPI: https://rapidapi.com/hub/?utm_source=youtube.com%2FJavaScriptMastery&utm_medium=referral&utm_campaign=DevRel
💻RapidAPI Cars API: - https://rapidapi.com/apininjas/api/cars-by-api-ninjas?utm_source=youtube.com/JavaScriptMastery&utm_medium=referral&utm_campaign=DevRel
📚 Materials/References:
Ultimate Next.js 13 Roadmap: https://resource.jsmastery.pro/nextjs-guide
GitHub Code (give it a star ⭐): https://github.com/adrianhajdin/project_next13_car_showcase
Public folder (assets): https://drive.google.com/file/d/1Ague8aTHA6JSrzy3kscEZmrJQdtDxqwy/view?usp=sharing
GitHub Gist Code: https://gist.github.com/adrianhajdin/e41751d170881f32955f556aaa45c77c
Next.js 13 Bug: https://github.com/vercel/next.js/issues/49087
Car images API: https://www.imagin.studio/car-image-api
Subscribe: https://www.youtube.com/@javascriptmastery/featured
