Stop Doing These Next.js Mistakes

🎉Our Newsletter is live! Join thousands of other developers

⭐ Timestamps ⭐
00:00 Intro
00:14 (01) Not using Next Image
04:00 (02) Mixing Client & Server components
07:00 (03) Leaving Routes without validation
11:41 (04) Not utilizing Route Groups

-- Special Links

✨ Join Figma for Free and start designing now!

👉 ✨ Join Figma For Professionals And Start Designing with your Team ✨

-- Special Links

✨ Join Figma for Free and start designing now!

👉 ✨ Join Figma For Professionals And Start Designing with your Team ✨

-- Watch More Videos

🧭 Build Login/Register API Server w/ Authentication | JWT Express AUTH using Passport.JS and Sequelize

🧭 Turn Design into React Code | From prototype to Full website in no time

🧭 Watch Tutorial on Designing the website on Figma

🧭 Watch Create a Modern React Login/Register Form with smooth Animations

🧭 Debug React Apps Like a Pro | Master Debugging from Zero to Hero with Chrome DevTools

🧭 Master React Like Pro w/ Redux, Typescript, and GraphQL | Beginner to Advanced in React

🧭 Learn Redux For Beginners | React Redux from Zero To Hero to build a real-world app

🧭 Introduction to GraphQL with Apollo and React

Made with 💗 by Coderone

[olicoding]

great tip on the parenthesis for the directory structure, will check it out. Also the layout for each, sounds interesting. Thanks for sharing!

[michakrecisz]

<Image> works good if use vercel or any other service that use Edge. Cost are pretty high. In place where I work, we are runnig 35-70 EC2 machines to host our service, cost for using <Image> and all transformations are huge. Nextjs is pretty slow, and in the use a lot resources to handle Images, also if you have multiple intances you will have problems with caching this image (cache is a state in the end). To be honest as more I use nextjs more i thing that nextjs is not a good solution for enterprise software.

[StemLG]

quick tip, you don't have to specify height and width with an imported image in the <Image /> component

[mty]

In error #03, "Leaving Routes without validation, " I'm curious whether this could potentially pose a security risk. Revealing less about our API functionality might enhance security by limiting information available to potential hackers. Thoughts on considering this aspect for a more robust security stance?

[xAndy]

For the separation of client/server components section, could you put the uncontrolled form in a server component and handle the onSubmit in a client component?

[AmirMirkamali]

Can you please tell me which extension do you use for folding tags props?

[nikako]

can't we use actions for form and make it server component as well?

[jayf.k]

What’s the name of the extension that displays the size of the line of code… I mean the (gzipped stuff)can anybody help?

[hubertmbitor]

Do server components wrapped in a client component become client components?

[Frontend-Ninja]

I would like to request a timestamps, so i can focus on what really interests me ;)

[anggiebratadinata]

Using <Image> is not always the best because it will tax your server's CPU. It may not be an issue if your app/site has only a handful of images but if you have hundreds or thousands of images, you can expect higher bills. Especially, if you don't use Vercel to host it. :)

[alexdin]

first time i see your channel first like and first subscribe

please can you make a video on how we can paginate in Next.js

[YouTubePL]

In most use cases you do not want to give the client information what is wrong with the request - unless it's an authorised request from an authenticated user - but in public api, you always obscure if something is not crucial to the client - this way it makes the attacker do more work to find out what is wrong with their malformed request. It may of course be depended on the type of service somebody is creating - like for "anonymous" pastebin this may not be the case and you may not care about the info returned - then just make the client experience better by providing that information back.

I think the title of that chapter is kinda misleading, because You always want to have routes with validation... they just may keep quiet about it ;)

[cynicusme]

I hate to be the which Vscode theme are you using guy!! It sucks! but .... which vscode theme are you using?

[im]

if you doing anything server side, you are a bad dev