Build and Deploy a Modern Next.js Application | React, Next JS, TypeScript, Tailwind CSS

Video Description

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. Quick heads up: This tutorial covers Next.js 13, but don't let that number fool you. Next.js 14 is essentially a performance-focused update of version 13. That means every concept, technique, and feature we dive into here is just as applicable and relevant in Next.js 14 ⭐ Join JS Mastery Pro: https://jsmastery.com 💎 Ultimate Next.js Course: https://jsmastery.com/course/the-ultimate-next-js-15-course 🧪 Ultimate Testing Course: https://jsmastery.com/course/the-complete-next-js-testing-course 📗 GSAP Pro Course: https://jsmastery.com/course/gsap-animations-course 📕 Three.js 3D Pro Course: https://jsmastery.com/course/vanilla-three-js-course 📙 JavaScript Pro Course: https://jsmastery.com/course/complete-path-to-javascript-mastery 🚀 Launch Your SaaS Pro Course: https://jsmastery.com/course/build-launch-your-saas-in-under-7-days 📚 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 💻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 ⚠ Customer key for IMAGIN.studio API for personal projects: Please use the following customer key (hrjavascript-mastery) if you like to experience how this API works and how you can embed it in your experimental projects. ⚠ Become their client and get an exclusive offering: In case you would like to use it for business purposes, you'll get a special discount. Once you register at their website for an introduction call and mention JSM as the referrer, you will get your first month for free once you sign a contract and become their customer. This also opens up the world to other APIs they provide 💻 Join JSM on Discord - https://discord.gg/n6EdbFJ 🐦 Follow JSM on Twitter - https://twitter.com/jsmasterypro 🖼️ Follow JSM on Instagram - https://instagram.com/javascriptmastery 💼 Business Inquiries: [email protected] 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