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

💼 Land your dream job with expert mentor guidance or get your money back.

📚 Materials/References:

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

Alongside building this application, you'll also learn how to:
- 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

[javascriptmastery]

This tutorial covers Next.js 13, but don't let that number fool you. Next.js 14 is essentially a performance update of v13. That means every concept, technique, and feature we dive into here is just as applicable in Next.js 14
Ultimate Next 14 Course is now live: jsmastery.pro/next14

[Codemyhobby]

This man's projects are better than most udemy courses. And the best part is that they are real time projects. Thanks for this!

[geldimansaku]

I remember asking you for such an app few weeks ago, and you made it a reality. Really appreciate it, big thanks 👍

[koltenrasmussen]

If anyone got to 03:00:22, a simple fix I found by going through the comments in the bug in Next scrolling-
1. Search your application for "router.push", 3 should appear
2. Replace "router.push(newPathName);" with "router.push(newPathName, {scroll: false});"
3. Skip to Deployment 03:20:28

[farihanmail]

I just finished the last next13 course (first time using nextjs), and wanted to find another next 13 course with typescript. This is definitely what im searching for! Gained so much knowledge from your videos. May god bless you and your family.

[elandamor]

Simply WOW, easy to follow and appreciate the extra steps to bring to attention the NextJS scroll bug... You have a new subscriber... Keep up the good work. Thank you soooo much for this.

[IshmamAhmed]

I’ve been developing next 12 and 13 apps for the last 9 months including my website which also uses typescript. Making these has only benefited me, I recently got hired for all my nextjs apps where I’m genuinely making buck according to average software engineering jobs. Take this man’s word and work with nextjs with typescript it truly is the way forward

[nikunjmehra]

Wonderful! Super excited for a TypeScript project finally!!❤

[BeastFish]

Best tutorial on youtube!! Extremely useful and always up to date with the technologies!! Great job, keep it up!

[obahsylva]

Great build. I always love your tutorials and in-depth explanations. I would love to see a Zoom project using Next Js 14

[christophermungiria]

I’ve recently started Typescript from JavaScript and this video has helped me a lot. Please do more of these as well as more React Native videos

[aldofematWorkout]

Very clear as always! I would love to see an ecommece with NEXT JS, STRAPI, TAILWIND, TYPESCRIPT, AND STRIPE, and also another video with django, python, postgreeSQL and tensorflow.js for a backend. Thanks

[abdulateef-da-designer]

Adrian, I'm short of words, ur courses are state of da art, premium grade, educational nd more

Tanx so much for what u've done for us at large

[quarterpie]

I can't believe you are doing this for free man, thank you so much.

[MalikDixon]

This is one of the best NextJs Video that I had taken. the time to review It is very thorogh i, n the presentation and the connection to the API was very simple. More typescript Next.JS please.

[cotosolis]

One of the best courses i've ever seen, nice work, nice explain, you deserve a golden globe jaja, the only thing that i have to say its that we need a new API key or another API to use, now its a no image project haha, cheers bro and well done!

[PattyBeautCode]

Thank you to a million times ! your work is incredible like always !
and I would love to see more Nextjs 13.4+++ with API series like this project
and Please more Build and sell API tutorial for 2023 version

[shiveshtiwari]

Hey, just wanted to give some gratitude to what you're doing. I really thank you for all these projects as they have helped me a lot.
Also, there is a request if you can make some more videos related to app development like react native.
Also it would be great if you can give a course on flutter, I really want a flutter course from your side...

[panoramixer]

it's always amazing work from this channel. Also I've added {scroll: false} in all router.push to disable scrolling to the top of the page, and this works for me.

[ayushpillai]

Thank you so much Adrian.. You came up with typescript 😍❤️
Really appreciate your efforts in educating us.