Stop Doing These Next.js Mistakes

Key Takeaways

I've been using xgs for so long and I've built so many projects and applications with it and along the way I made so many mistakes I regret not knowing sooner so in this video I'm going to show you what are these mistakes and what is the right way to avoid them so the first mistake in here is not using the provided nextjs image component and instead only relying on the standard image elements so of course in reactor next year when we want to render an image we just go ahead and just like put the image elements in here the normal image tag and we just put you know a class name we give it the SRC in here and we can import this either from a remote address outside or we can just like you know import it from our code in here if it's like sitting inside of images you simply just go ahead and import it next is going to do the import for you and you just use the SRC in here to access the source of the image but actually if you're doing it this way instead of using the provided image component here from nextjs itself you're actually missing out on a lot of features and a lot of optimization so the image component in here it's basically the same thing but actually a little bit different when it comes you have to provide a width and height for this because it's going to do like preoptimization it's going to do like pre filling so you don't have you know CSS shift or UI layout shift and of course these can be accessed from the imported image in here so you just do jagware image and you can access the width and height you give it the SRC in here on the top alt and and a very very awesome prop in here an attribut to give it is like the sizes which you tell it basically how to size and what are the different sizes of the image the application should use for different viewports for example I could give it like responsive images like maximum width of 768 pixels you will use only like 50% of the view width of the image in here which going to be like compressed and resized and this will serve you ton and ton of like bandwidth from the application a lot of optimization the the image is going to load a lot faster the same thing in here for example for mobile devices in here it's going to load like full resolution and for example for desktop it's only going to load what it needs in here only only like third of the width which means the third of the resolution of the whole image and even if you don't use the sizes prop in here nextjs image component is going to still do a lot of optimization for you behind the scenes it's going to make it so perfect for you so for example you got a simple demo where I use the standard image versus the next image component in here so for example here the first one is the standard image the second one is the next image basically if you look at it from this perspective there's literally no difference but if you actually open up the network tab in here and actually refresh so you're going to find the first image in here loaded by the standard image which is the original size of our image like 2.5 mbes all of it the full resolution is being loaded and it's only a JPEG but in the other hand if we check this this URL in here is going to be like you know compressed generated for you for like from the image component like the next us image components so it's going to do all the heavy lifting for you it's going to actually convert it to a webp which is a better format for serving images on the web of course and if you just click on it for instance it's 1.4 megab instead of like 2.5 mbytes basically before because it's doing a lot of compression and because webp is a lot more lighter and all of that was done magically by just using the image component here using this instead of like the standard image and if you include the sizes that's going to actually get even better so like if you go ahead and refresh real quickly in here the size is going to check that this is a very big one and it's now it's like 77 KOB and it's like 640 by 960 resolution to the first one which is a huge size and it's actually always the best idea to use the provided image component here instead of the standard one always especially when dealing with local images that you have because it's going to provide ton and ton of optimization for you but if you're actually dealing with remote images that are for example from unsplash you access it from a different API or something from a server I mean the image component here is still pretty good one but sometimes you can find some limitations with it so you can fall back to this but it's only like 5% out of the time the second mistake is not separating server components from client components so for instance in here if we take for example we've got this image apploader form sort of thing where you can just click in here upload a new file and you got like a set of instructions of how the appload is going to go ahead for example in here a privacy know that oh all images are going to be deleted after y y y and just set of instructions of how the download works so technically if you look at this first you're going to know immediately that this is a clan component because it needs you know in user interaction needs like you click on the map or you open up the for and of course when you select an image in here so you do like for example in here you select an image you click on it the image going to show up on the top so there's a lot of client interaction thing that means this is a client component right so this is basically what a component looks like in here it's a simple component that uses State and it has use client on the top that means it's a client component it has like this function in here to load an image from the file so we read the image in here it puts it inside of the stage and down here if we image have is been like loaded we can just just go ahead and render the image in here and instead here all of this is basically the appload form so everything Below in here is basically the appload form and down here we have this instructions where it's basically just a static text sitting down there has or needs no intoduction whatsoever the only part that needs interaction is this form appload part and the top in here where you load the image you show the image and everything so instead of having all of this inste of one component that is you know using client in here which means everything here inside of the client components instead of doing that you can easily separate it into a client component that needs interactions and a server component that doesn't so here in the good folder in here we got and separated those into two separate component we got the image appload form in here which is still use client all it does in here just like allows it to applo the Forum he has all the interactions in here and it has you know the appload for in here but we don't have the instructions in here anymore but instead we move them into a separate file now this particular component here is no longer a client component because this by default is going to be a server component and it's going to be server rendered and it's going to be optimized quite a lot because there's literally no need to put it inside of the client component here so it's always the best way actually to separate the client components and the server components as much as you could so only leave the part that needs interactions inside of the client component here and take all the part that are static there are just text images that needs to be rendered from the server and just put them inside of a separate component that's going to be server rendered and of course later on here inside of the main component you can use the image appload form the appload instructions and here if you use the good client versus the bad client we literally have the same result but instead the top one is a client component and the bottom one in here is a server component so of course this is just a simple example but sometimes you have a very large component and by mistake you just put all the unrelated non-client sort of static text or images or stuff that should be on the server component instead of a client component you just leave them hanging around inside of a client components and instead just just completely forgetting about moving into a Serv component so it's always a good idea to move and separate the concerns between a client component and a server component as much as you could and for the third mistake is not doing validation for your route handlers so for example in here we got this simple API it's actually inside of the up uses the up R of course you know the latest brouter from nextjs and it actually puts an API inside of the API fold which means it's use the route handlers and it can allows us to expose get and post requests and basically any HTTP request and here we got two routs that allows us to actually send an email the first one is send no validation and second one is with validation so we're going to go ahead and check out this one we're going to go route so basically it's pretty simple thing it's just like a post Handler in here like any other nextjs post Handler uses interface in here for the body so this is basically what we expect to receive from the post Handler is like an email and an email body we're putting inside of an interface in here because we're using typescript that's really cool and of course later on we just do body do request. Json to extract the body from the request and of course later on we can distract this into an email and an email body so far so good that's pretty nice we are sure that we got the email and email body that looks pretty pretty nice and later on we do email service send email contact in here just provided the email and email body and later on you can he just goad and check oh if a response status is 200 you successfully sent an email to the contact otherwise just return an error so let's go ahead and jump into Postman here and actually test our API route with that send no validation of course this is like the normal way we do our API routes it's basically no validation right because nextjs doesn't provide a way to validate doesn't provide something out of the box or something you have to find a hack around or create your own function or use third party Library so for instance in here we're just doing a body we're simply sending email and body so we sending both of them so if we click Send in here everything should work fine we got email sent successfully and we got email sent true and everything but for instance if we remove the email in here try to go ahead and do it it says oh an error occurred and it doesn't actually give us any hint or idea that oh we're missing a crucial part of the request Json or the post body that is the actual email in here that is required to be provided and has to be a string literally we have no idea and this is like the worst user experience ever for using an API so you don't know exactly what to do you can even just like remove this and still get the same error here if not sending an email but on the other hand if you go to the other rout where we actually using validation we here have the email body works fine it send successfully but for example instance in here we remove the email and we try to send it again and here it's actually going to give us a validation error so it's going to tell us oh invalid request and the errors we have in here email is a required field or maybe if you provide like an email as a number in here tells us oh email must be a string type but the final value was five which is a number so it's literally doing a lot of valid is give us hints to give us basically what's going on behind the scenes compared to you know the round here with no validation which is like the default way of next GS route handlers so the only way to use validation in here is you can just go to use a validat library in here like yep there is Zod there is join there's so many actually libraries I love y up in here it's really lightweight it has a lot of cool stuffs I absolutely love that so you simply just do in here create a schema which means yep object you give it the interface in here and you said oh email it must be a string it has to be required same thing for the email body and you can basically just continue with your day in here normally and with your route Handler it just works as expected but at the end in here before you actually export the post Handler you can use this special function that actually going to link your schema validation here with a post Handler in here which is called with validation so this is more of like a custom function I created so if you just go to do with validation you're putting aide of Utilities in here with validation is basically going to take a schema and the Handler function in here the post Handler and it's simply just going to do schema validate so it's going to go ahead and use the validation in here and it will simply check so if it catches any errors in here it's going to immediately go ahead and return an API response and valid request and Returns the actual errors otherwise it just going to go ahead and continue and return the Handler so by just hooking it up like this with validation you give it the schema and you give it the post Handler this will give your post Handler superpowers and in my experience I had a lot of issues with not integrating and not using validation with my API routes on next year application but after figure out this trick and I can easily do it like this way it made my life a lot easier and by that I mean less bugs as well and the fourth mistake is not utilizing route groups in your favor so I don't know about you but for me I literally missed this feature into recently and it made my life quite easier and it made my project a lot more organized and easier to navigate so this simply will allow you to actually organize your round into groups and it will also allow you to use like nested layouts inside of your applications you can have more opportunities to use more layouts shared between different part of the application so let's imagine we've got this app folder in here we got a couple of route for our application we got we got the about in here we have the API in here which you can safely ignore we got blog cart login products and sign up so the first thing we can utilize route groups for is actually organization so for instance in here we can take the about and log and put them inside of the company um card in here and product could be inside of the shop and log in and sign up could be inside of account so simply to create a route group in here you can just go ahead and do you know inside of parentheses and you can put inside of it whatever you want for example company for both of these and you can just move this inside the about and the blog and because you just put inside of parentheses in here it won't create another rout so you won't create like force for/ compan then forward slab it's just going to be forward slab on the roots of the application so this is completely ignored but it's only used for organization purposes and after putting the arrest in here we've got the account we' got logging and sign up company about and blog and for the shop card and product and here it feels a lot more organized and just by looking into it you know exactly there's three part of the application and by opening each one in here you get access to the rest of the pages another very cool feature about this one so you imagine because all of these have the root which is the layout in here so it's like the root layout so every single one of these like the Cur or sharpen company and account all the routes and pages in here and I'm going to utilize the layout right over here right so maybe you want inside of the account in here for both login and sign up you want to have a different layout so simply youring groups in you can just go and do layout. TSX so you create a new file that component that layout is only going to be affected and applied to login and sign up and it's not going to apply to the rest and this makes it so so good I mean if you don't know already yet we do devices go through like the route groups in here instead of the next year's documentation it has so many features and you can easily understand exactly what's going on by this really awesome images in here and it has really really straightforward instructions but anyway thank guys for watching this been like nextg mistakes that you can easily avoid to become a better developer so see you guys hopefully in the next ones