Stop Doing These Next.js Mistakes
Vložit
- čas přidán 23. 06. 2024
- I have used Next.js for building many production and side projects at this point, and along the way, I committed so many dumb mistakes that either made my websites slower or my code looks really complex. This video should guide you through these mistakes and the right way to avoid them on your Next.js projects.
🎉Our Newsletter is live! Join thousands of other developers
islemmaboud.com/join-newsletter
⭐ 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!
psxid.figma.com/69wr7zzb1mxm
👉 ✨ Join Figma For Professionals And Start Designing with your Team ✨
psxid.figma.com/ucwkx28d18fo-...
-- Special Links
✨ Join Figma for Free and start designing now!
psxid.figma.com/69wr7zzb1mxm
👉 ✨ Join Figma For Professionals And Start Designing with your Team ✨
psxid.figma.com/ucwkx28d18fo-...
-- Watch More Videos
🧭 Build Login/Register API Server w/ Authentication | JWT Express AUTH using Passport.JS and Sequelize
• Build Login/Register A...
🧭 Turn Design into React Code | From prototype to Full website in no time
• Turn Design into React...
🧭 Watch Tutorial on Designing the website on Figma
• I Design a onecolor We...
🧭 Watch Create a Modern React Login/Register Form with smooth Animations
• Create a Modern React ...
🧭 Debug React Apps Like a Pro | Master Debugging from Zero to Hero with Chrome DevTools
• Debug React Apps Like ...
🧭 Master React Like Pro w/ Redux, Typescript, and GraphQL | Beginner to Advanced in React
• Master React Like Pro ...
🧭 Learn Redux For Beginners | React Redux from Zero To Hero to build a real-world app
• Debug React Apps Like ...
🧭 Introduction to GraphQL with Apollo and React
• Introduction to GraphQ...
🐦 Follow me on Twitter: / ipenywis
💻 Github Profile: github.com/ipenywis
Made with 💗 by Coderone
great tip on the parenthesis for the directory structure, will check it out. Also the layout for each, sounds interesting. Thanks for sharing!
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 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.
quick tip, you don't have to specify height and width with an imported image in the component
Why ? It's automatically set ? What is the behaviour on loading, does it load prefilling the image dimensions or does it change after loading (which is bad practice )?
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?
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?
You can't do it that way, cause the onSubmit event handler has to be attached to the element, so it must be a client component. Otherwise, server actions can be used in here but the main part of why we are using a client component is not about onSubmit, it is more about the state handling and displaying that uploaded image.
Can you please tell me which extension do you use for folding tags props?
it's tailwind fold plugin for vscode. It can hide messy tailwindcss utility classes
Thank You
can't we use actions for form and make it server component as well?
But when you need to manage state or events inside the component, it can only be a client component.
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 ;)
Do server components wrapped in a client component become client components?
No!
nope, but you cannot directly define a server component inside the return statement of a client component. Instead you have to pass it in as children (eg: and render it as {children} inside the client component
Using 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. :)
I would like to request a timestamps, so i can focus on what really interests me ;)
They are right in the description. I'm wondering why CZcams is not showing the timestamps on the video track
What’s the name of the extension that displays the size of the line of code… I mean the (gzipped stuff)can anybody help?
Import cost
Thanks 🙏
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
I hate to be the which Vscode theme are you using guy!! It sucks! but .... which vscode theme are you using?
❤❤❤❤❤❤❤❤❤❤❤
Stop using Next.js
And you recommend? I'm waiting for solid 1.0
if you doing anything server side, you are a bad dev
Spoken like a true reactionary dev 🥶
@@user-fr2fm3ri3w innerHTML dev. I don't need a library to draw html. and my html doesn't reload every time I update a variable for no reason. there is zero reason to have a server for almost every use case