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

Рет қаралды 641,958

Күн бұрын

Ultimate Next 14 Course is now live: jsmastery.pro/next14
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
💼 Land your dream job with expert mentor guidance or get your money back.
To find out more, apply here: jsmastery.pro/masterclass
💻RapidAPI: rapidapi.com/hub/?...
💻RapidAPI Cars API: - rapidapi.com/apininjas/api/ca...
🎥 React.js Crash Course: • React JS Full Course 2...
🎥 Next.js 14 Crash Course: • Next.js 14 Full Course...
📚 Materials/References:
Ultimate Next.js 13 Roadmap: resource.jsmastery.pro/nextjs...
GitHub Code (give it a star ⭐): github.com/adrianhajdin/proje...
Public folder (assets): drive.google.com/file/d/1Ague...
GitHub Gist Code: gist.github.com/adrianhajdin/...
Next.js 13 Bug: github.com/vercel/next.js/iss...
Car images API: www.imagin.studio/car-image-api
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:
- Use Next.js 13 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.
💻 Join JSM on Discord - / discord
🐦 Follow JSM on Twitter - / jsmasterypro
🖼️ Follow JSM on Instagram - / javascriptmastery
💼 Business Inquiries: contact@jsmastery.pro
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

Пікірлер: 894

@javascriptmastery 7 ай бұрын

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

@sfincione2000 4 ай бұрын

FYI - imagin.studio seems to have changed their policy. There no longer seems to be a trial version, so the car image API isn't available to do some testing. Do you know any alternatives?

@physicschemistry2190 4 ай бұрын

CAR IMAGE API KEY IS NOT WORKIG AND IN GITHUB ALSO THERE IS NOT ANY API KEY . IF THERE IS SOME OTHER FREE API FOR IT THEN PLEASE GIVE ME OTHERWISE IF YOU CAN GIVE YOUR APIKEY THEN PLEASE GIVE ME . PLEASE REPLY

@javascriptmastery 4 ай бұрын

@@physicschemistry2190 it should be working

@i-am-artur 4 ай бұрын

@@javascriptmasteryfor me the API works fine. Thank you for tutorial by the way

@nurmuhammadyorov9775 Ай бұрын

2:30:02 when I click Search 404 Not Found error Is this page related to the rapid api? The link contains % 20, if I delete this %20 search page, the page is finding I can't find where mistake is

@Codemyhobby 11 ай бұрын

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

@krasimirhristov6757 11 ай бұрын

Exactly

@javascriptmastery 11 ай бұрын

That's the goal!

@viniciusm.m.7822 11 ай бұрын

True! 🎉

@juneroyd.quinimon495 11 ай бұрын

Exactly!

@Drew7795 11 ай бұрын

The Udemy courses is good, but The professors release and don't update the material. For example, these New features for Nextjs i havendo seen yet.

@geldimansaku 11 ай бұрын

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

@javascriptmastery 11 ай бұрын

Hope you like it!

@koltenrasmussen289 9 ай бұрын

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

@jrom_ai 7 ай бұрын

YOU'RE THE MAN! 🤩🤩

@PetriikVx 7 ай бұрын

Thank you!!!!

@nelsoncarter8323 Ай бұрын

works perfectly. this also fixed the searchbar scrolling to the top. thanks so much

@farihanmail 11 ай бұрын

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.

@javascriptmastery 11 ай бұрын

Fantastic!

@willowPAPA 11 ай бұрын

There aren’t many people doing full build videos, would definitely love to see more

@jaigaur1303 10 ай бұрын

bro did the car api work.....isn't it not free for all how did you managed tp fetch the car photos ?

@phucthien378 10 ай бұрын

kmm

@user-ly7tw8td1h 9 ай бұрын

How he got .git folder?

@elandamor 10 ай бұрын

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.

@nikunjmehra935 11 ай бұрын

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

@javascriptmastery 11 ай бұрын

Yess!

@christophermungiria2876 6 ай бұрын

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

@obahsylva7755 5 ай бұрын

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

@BeastFish22 11 ай бұрын

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

@javascriptmastery 11 ай бұрын

Thanks, will do!

@PattyBeautCode 11 ай бұрын

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

@abdulateefdamilola.o8900 11 ай бұрын

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

@javascriptmastery 11 ай бұрын

Thank you!

@sfincione2000 5 ай бұрын

Fantastic demo project! Great job.

@JoseFlores-ol4cc 7 ай бұрын

Muchas Gracias por este curso y por tomarte el tiempo para hacerlo. La verdad que lo que aprendi en este curso fue asombroso. Voy a seguir viendo mas. Saludos desde Argentina

@MalikDixon 11 ай бұрын

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.

@aldofematWorkout 9 ай бұрын

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

@pattierney6845 9 ай бұрын

I would add Firebase to this list rather than an api. How would one implement this?

@quarterpie5338 10 ай бұрын

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

@shiveshtiwari2612 11 ай бұрын

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...

@javascriptmastery 11 ай бұрын

You're very welcome!

@panoramixer 6 ай бұрын

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.

@DW5000-sz9sv 10 ай бұрын

While i do really appreciate the content, as a designer trying to hone my frontend skills in react this course went from 0 to 100 really fast. I watched the crash course as well as mentioned in this course. People in my position are not necessarily super deep in ES6+, arrow functions, json etc. so while the hero part of the tutorial was great for me, the second part of the list with filters got complex really fast. Not that i wasn't able to get the same output as the author, but man i lost whatever overview i thought i had with the filter Combobox filter functions and the setQuery part with the Transition as fragtment stuff. I am aware that this course doesn't promise to cater to people like me, but at least i felt the need to say, that touching lightly on concepts in the start of a course, doesn't necessarily mean that they stick 100% in the very next chapter where the complexity goes up rapidly. I would love a course like this that is laid out in simpler steps/chapters and touches more on the 'why' and 'how' of all aspects of what is going on, repeatedly as the course progresses. A course that doesn't point to other videos to understand an arrow function for instance, but discusses the topic as it appears in the course. Also up until now i didn't experience any recaps of what we just did - and again why we did (and structured) it like that. Anyway, I'll keep at it and hopefully it'll stick more and more. This seems to be the only real course on typescript with react and nextjs. Hope this feedback finds you well.

@cotosolis3378 9 ай бұрын

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!

@IshmamAhmed 11 ай бұрын

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

@javascriptmastery 11 ай бұрын

Amazing!!!

@ayushpillai333 11 ай бұрын

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

@javascriptmastery 11 ай бұрын

Thank you! 😃

@kamaliddinsattorov7493 11 ай бұрын

Thanks for the knowledge you have shared. Love your typescript nextJs tutorial. Please, do more of them, and also, can you do a similar project with the use of Shadcn UI. There are almost no tutorials on the web with Shadcn-ui

@abuhossain4274 11 ай бұрын

the way of making the project is awesome !! i love it.

@saidibrahim5931 11 ай бұрын

What a great course and project, no words can describe your effort and time for teaching people, what's the reason you choosed next.js over express.js. your previous projects were express and now you shift to next.js

@olitalks1 11 ай бұрын

Thanks jsm for making such marvelous projects.If it has live demos or figm design it would be very helpful for us to give a first try by our own.However, undoubtedly i am grateful to you.

@javascriptmastery 11 ай бұрын

Thank you!

@_elusivex_ 11 ай бұрын

Finally the typescript project which i was waiting for came. Btw i wanted to tell you that you are the most professional and organised coder i have ever seen. Love from india.

@javascriptmastery 11 ай бұрын

Thank you so much 😀

@nolifeking7128 7 ай бұрын

it's an honor to complete this course, thank you so much!

@nipunjayasinghe1880 7 ай бұрын

Can you send me the code?? I'm trying to do. But there are some errors?

@oguzhanaydn7482 11 ай бұрын

thank you so much for the next13 typescript project video ♥ im having so much fun following your instructions and coding parallelly.

@javascriptmastery 11 ай бұрын

You're very welcome!

@ai_coding 11 ай бұрын

The way u explained apis & fetches made me finally understand it! Clean build & Thank you.🙏

@javascriptmastery 11 ай бұрын

You're welcome!

@mimcris8481 6 ай бұрын

Finished! Nice project, everything still working so far, use scroll false when using router.push though. The image car api has watermark but it's still useble in my opinion.

@taunado 10 ай бұрын

Brilliant. +1 for more Next, TS, Tailwind projects.

@swissguard8157 10 ай бұрын

great video Adrian! Definitely continue making these with typescript

@user-gj1ny8px4n 10 ай бұрын

subscribed! thank you for all of your projects and tutorials!

@Lorkisen 10 ай бұрын

Api key not working, so I'm stuck at Car Images, but thanks for the effort. I learned a lot so far.

@anggriawanmr 11 ай бұрын

Finally! Thank you Adrian, I really glad found your channel year ago

@javascriptmastery 11 ай бұрын

Awesome! 😊

@anassnassim 11 ай бұрын

i just finish the last course of create promptopie with nextjs thank you for this great content you provide

@javascriptmastery 11 ай бұрын

Enjoy!

@BriansRecaps 3 ай бұрын

to fix the scrolling error aftter searching at 2:32:44 i used router.push(newPathname,{scroll: false}); in our searchbar.tsx file

@paraschauhan9978 11 ай бұрын

Wow i was looking for latest next 13.4 project with typescript (coz I just learned ts ) and tailwind ❤️❤️ and your notification just popped up ✌️ THANKYOU❤️

@javascriptmastery 11 ай бұрын

Enjoy!

@Nikita-im3sd 11 ай бұрын

I didn`t watch the video yet, but i already know our man delivered us something awesome, better than most courses out there, for *free*. Thank you :)

@javascriptmastery 11 ай бұрын

Legend!

@Jj-bo1dm 3 ай бұрын

Nice content , thank you so much . hope you continue this kind of videos! more power!

@carlosolivares1598 7 ай бұрын

Nice of using lastest Next version and TypeScript! Very helpful and we want more content like this. Also, I am interested in a fullstack project with Nest and Next ;)

@konidoniravirr6580 10 ай бұрын

Sir, Thank you and i want more series like this with ts+next+mongodb ...😊

@arielelias2413 11 ай бұрын

Yes, we want more, and more, and more projects like this one (in NEXTJS of course). I'm triying to specialize in Next and you are my best teacher. Thanks for all. I will by you a coffee

@javascriptmastery 11 ай бұрын

More to come!

@anshuls3104 11 ай бұрын

I just finished learning basic concepts of Typescript, and was searching for a cool project, here comes JSM, thanks a lot !😄

@javascriptmastery 11 ай бұрын

Happy to help!

@denysgl3732 11 ай бұрын

Hi! Great channel, great projects, ideal voice comments pace and clarity. Thank you for your work. As for Typescript, sure it's getting more and more popular nowadays but I personally prefer classic JS.

@user-ol2sd8hd9k 8 ай бұрын

TypeScript is everything JavaScript never was, is not and probably never will be.

@helpy852 9 ай бұрын

Man please keep up the good work and i can't emphasize Typescript enough. Thank you!

@dytomabatogouma7898 11 ай бұрын

Another wonderful and amazing project to learn from. Thanks for sharing these masterpieces for free. I definitely would like to watch more videos on TypeScript.

@javascriptmastery 11 ай бұрын

More to come!

@user-ly7tw8td1h 9 ай бұрын

do you know how he got .git folder?

@talleyrand9530 11 ай бұрын

First of all, thank you very much for your work. And yes, typescript is everywhere now and it's become a must in job descriptions.

@javascriptmastery 11 ай бұрын

Yess!

@lukas.webdev 11 ай бұрын

Awesome! This is sooo valuable! Thanks for sharing with the community 😉🔥

@javascriptmastery 11 ай бұрын

You got it!

@ahmetkocak9086 10 ай бұрын

Thank you for tutorials. Please create more content with Typescript and React. Please also show us how you prepare tailwind.config.js file etc.

@user-ly1lw1pp4s 10 ай бұрын

Awesome vid! I did have some build problems, such as the code from the gist was not working so I took the index.ts code directly., as well as issues with the transition element: i needed to add a show={true | false} in order to get it to work.

@kristofferohrn 9 ай бұрын

Your tips are much appreciated!

@emilejohngarcia3812 11 ай бұрын

Great! i'm looking forward to watch more of Typescript projects in this channel :)

@javascriptmastery 11 ай бұрын

More to come! 😊

@tonybenci2796 11 ай бұрын

Thank goodness these wonderful tutorials are now in typescript... thank you... more please

@javascriptmastery 11 ай бұрын

Thank you! 😊

@kimipossible 9 ай бұрын

Great video! Thank you. I am specifically doing tutorials in TypeScript so I really appreciate the content!!

@ryanlee8130 9 ай бұрын

for those having issue with scroll top from router,, just add {scroll: false} because initially scroll is set as true by default for router in nextjs

@Thehardgamer64 9 ай бұрын

router.push(newPathName, { scroll: false });

@Houseofstartup 9 ай бұрын

Thank you i was facing the same problem

@jimmyj.6792 11 ай бұрын

Awesome tutorial and so modern 😍😍😍 you are a beast, thanks for it 🙏🙏

@javascriptmastery 11 ай бұрын

Thank you!

@letMeSeeTheCode-xq5hv 10 ай бұрын

I can't wait to see the backend functionalities being activated

@titan6421 Ай бұрын

Great Project Man!! Keep up

@ghulammujtaba9236 11 ай бұрын

I was eagerly waiting for a NextJS project with Typescript. You don't disappoint

@javascriptmastery 11 ай бұрын

You asked for it, you got it!

@jacobforsbergg 5 ай бұрын

Love the video and love that you used TS! Please make more content using it! TS

@ibrahhim2096 11 ай бұрын

Crazy that there are no ads in such great content

@javascriptmastery 11 ай бұрын

Thank you!

@karim6179 8 ай бұрын

wonderful video thanks a lot, for the issue of scrolling to the top you can keep it server side rendering and add to the router.push a property of { scroll: false } which is gonna look smg like that : router.push(newPathname, { scroll: false }); that would solve it without needing to move back to the client side rendering enjoy guys

@javascriptmastery 8 ай бұрын

Has it been implemented? It wasn't working at the time of the recording! :)

@estevaolibardi 9 ай бұрын

i'm very happy for typescript, thanks!

@ngampusonline 8 ай бұрын

best tutorial ever! It just 3 hours, but I finished all in three days. Many thanks Adrian!

@sairakausar 4 ай бұрын

you have Image API key , because API key is not work

@levanilevanidze9294 3 ай бұрын

I am so happy about typescript

11 ай бұрын

Great as always! Thanks for your content

@javascriptmastery 11 ай бұрын

Much appreciated!

@redmoor553 7 ай бұрын

The way to fix the scrolling bag is to pass {scroll: false} as the second parameter to router.push() function. It shoould look like: router.push("/yourpathname", {scroll: false})

@gustavoortiz7473 7 ай бұрын

It worked. Thanks bro

@GuilhermeLyare 2 ай бұрын

To souve the useRoute problem you can set a second parameter { scroll: false } in the router.push method like this: router.push(newPathname, { scroll: false });

@javascriptmastery 2 ай бұрын

At the time of the recording there was a bug. It got fixed recently 👌

@GuilhermeLyare 2 ай бұрын

By doing the same code recently I've got the same error, so I found this solution on stackoverflow

@user-gn7qi5xv4j 9 ай бұрын

Great as always and waiting for more Typescript Projects...

@citycomputers978 5 ай бұрын

For using typescript we are very happy❤

@Foryal 7 ай бұрын

Great material, thanks a lot!

@sabato.rwanda 11 ай бұрын

thanks man this is amazing nextjs project tutorial I've ever seen.💖

@javascriptmastery 11 ай бұрын

You're welcome!

@amotekundev 10 ай бұрын

The best in the game. Yes the typescript projects are awesome. Keep making projects with it.

@interactivehustlers1820 11 ай бұрын

when ever i see your videos i smile, because i know i get a lot of new knowledge. God bless you, You are my unsung hero...

@javascriptmastery 11 ай бұрын

Thank you!

@pavels9566 11 ай бұрын

Hi Adrian, please do more TypeScript tutorials for sure! Thank you!

@javascriptmastery 11 ай бұрын

Will do, thank you!

@Matty100 11 ай бұрын

Yes!! Thank you Adrain I can't wait to give this one a spin

@javascriptmastery 11 ай бұрын

Hope you like it!

@Matty100 11 ай бұрын

After an 1.5-2 hours of searching finally found it!!! Error was hiding in the utils/index I put limits instead of limit in the fetch call. #BowToYourSensei! 🤩🙃

@aakash1830 7 ай бұрын

Thank you! You are doing great job!

@fredericdemoulin7729 9 ай бұрын

Great job! Why do you put some typescript interfaces directly in the component file and others in the dedicated file types/index.ts?

@gbrachetta 11 ай бұрын

Adrian, your tutorials are great. Thank you. The only thing I'd wish for is to develop with the console open in the browser to catch warnings and errors.

@javascriptmastery 11 ай бұрын

Great idea!

@afamsval 11 ай бұрын

I am so happy about the typescript. Thank you so much Sir

@javascriptmastery 11 ай бұрын

You are most welcome

@ghulammujtaba9236 10 ай бұрын

The car api by Imagin studio is only for organizations. We cannot get it. Is there any alternative?

@reinaldoromero2545 10 ай бұрын

II have searched all over the internet and I can't find an api with free images of cars😭

@joseriquelme9673 10 ай бұрын

Let's hope someone finds another api that helps us :/

@ghulammujtaba9236 10 ай бұрын

@@joseriquelme9673 I didn't complete the course because of the api and don't have any motivation left to continue.

@mrgkd5767 11 ай бұрын

Week-end sorted. Thanks Adrian 🤝

@javascriptmastery 11 ай бұрын

Great to hear!

@juneroyd.quinimon495 11 ай бұрын

This man's project makes us rich fast. Thanks for this one!

@javascriptmastery 11 ай бұрын

You're welcome!

@judevector 11 ай бұрын

Man i can comfortably sau you qre the Reason am going to be a better and good web developer, you are a rare gem and KZfaq knows that that's why your videos always pop up on top whenever you upload

@javascriptmastery 11 ай бұрын

Amazing!

@andykallian 9 ай бұрын

Hello my friend! I have been studying React for a while and a lot of things that I know about react its due your videos! Such and incredible job. This one is another great project! congrats! I would like to suggest you to please not rely on paid API cause they change their terms all the times. Rapid API is great, but the imagin studio API it's not a thing that students can deal. Right now i'm stucking at 2:10:00 cause I cannot use that API for free due they dont accept my email. =/ anyway, your video is amazing! You have great teaching skills. Thank you so much for your effort and I can't wait for more React projects involving Typescript and Tailwinds success!

@lautaroleonelgallardo3767 11 ай бұрын

Dayumn, I love your work man, I will donate you when I get a new job!

@javascriptmastery 11 ай бұрын

Much appreciated!

@jotasenator 9 ай бұрын

thank you Sr, will enjoy my time with this project. thanks again

@viniciusm.m.7822 11 ай бұрын

In the next year i will have time to learn more english and Front-End techs to apply for this masterclass. Forte abraço, bro!

@javascriptmastery 11 ай бұрын

Perfect!

@Tapadar.Monsur 11 ай бұрын

Another great video! Thanks, Adrian.

@javascriptmastery 11 ай бұрын

Glad you enjoyed it!

@valentynkasyan3800 9 ай бұрын

Image API Key started working again. Thank you!

@abhimanyuyadav3138 9 ай бұрын

I tried using key provided in video but still I getting red car model images How to correct it

@azharmahmood624 10 ай бұрын

A great app, and very nice way of teaching, please keep using TS too in the upcomming videos

@sebastiancastillo3560 9 ай бұрын

Really amazing tutorial , Thanks so much Elliot!! 👏👏 The solution for the scroll bug over nextjs v-13.4.12 is router.push(newPathName, { scroll: false }) It's works for me 👍

@leonalex330 9 ай бұрын

i owe you my life sir