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
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?
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
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
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
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
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.
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
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.
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
If you are watching this video recently the Next js recently got updated you can completly skip the client Sider Rendering part by adding this this extra paramater in the router In components/ShowMore router.push(newPathname,{ scroll: false }); In components/SearchBar router.push(newPathname, { scroll: false }) Happy Coding >
The solution of scrolling to top after pushing new path to router is : simply adding {scroll:false} as second argument to router.push(path, {scroll:false}) 💯
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
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.
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})
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.
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❤️
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 👍
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!
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.
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.
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 });
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 RU-vid knows that that's why your videos always pop up on top whenever you upload
As usual great content ! Brother i want to suggest you onething put the entire process as video the styling of css and font choosing and so on, show everything that would be awesome.
A fix to the scroll to top issue at 2:32:41. Change router.push(newPathName) to router.push(newPathName, {scroll: false}) in your SearchBar.tsx file inside the updateSearchParams function. That has fixed it for me. At least until normal functionality is resumed
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.
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.
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
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
I'm in love with Your Content 😍 Adrian 😻 I'm always waiting for your new video to learn something new ❤ 🙇 thanks for making our journey of learning awesome from ur video 🎉❤
Next.js is great, we use it at work for all our React-based projects and it saves so much time and effort, lets us work quite efficently. The only thing I find disturbing as of late is that a lot of tutorials teach with Tailwind, which isn't as commonly used in the business. Luckily a dev who has at least some work experience is able to substitute with his preferred framework instead.
they seem to have closed the free trial service, so no fortune with automatically generated car images i just went with stock one and not bothered any further
The form on the website doesn't work, specifically the website field. It just errors out with "Please provide a website with the requested format". AUGH!
Hi Adrian, much ❤from Ohio. I would greatly appreciate more Typescript videos or tutorials which involve Typescript. As I understand it, Typescript is a highly requested skill set in which employers want these days. Thank you so much 🙂
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...
About the scrolling bug: I got it working by using `"next": "13.2.4"` in `package.json` (and obviously running `npm i` afterwards) and adding: experimental: { appDir: true, }, in `next.config.js`. At least this works fine while keeping server side rendering until they fix the bug.
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.
I was just wondering what project I should start studying next and you uploaded the video with such a cool website! Its time to study now! Thank you very much from Russia :)
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
great Job adrian. i must say i admire the amountof effort and level of dedication into putting out contents like these for us. However I think a lot of us have issues with getting an API key for the car images to load @2:12:35
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.
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!
If you're seeing this error: "Error: NextRouter was not mounted." Make sure you're using useRouter from next/navigation and not next/router. "next/router" can only be used inside the App folder, and not when you're in a "use client" context.
