5 Tips and Tricks To Make Your Life With Next js 14 Easier

hey there my gorgeous friends on the internet I don't have a hat to tip fresh shave what's good uh today's episode we're going to look at five tips and tricks when it comes to nextjs I know there's still a lot of confusion you know people confus like how caching works and suring client components I'll try to give you some really good tips here uh to make your life a bit easier oh and I also want to announce my full in-depth nextjs 14 course 2024 Edition the first four chapters are live right now we've done a full section on next off with two Factor authentification and email resets and everything else so check it out at develop by.com I have a little video there that previews the project so if that's something you're interested in yeah I appreciate it let's get into it did my hair just grow back anyway so the first step that we're going to look at is next images there's a lot of confusion about this like how does the whip how does the height work and how does the blurring work as well because it's quite different if you have a local image or a remote one so let's just make it clear really quick so when you have a local image you don't need to specify a width and a height nextjs automatically is going to identify it so let me just plug in an image here that I have saved in my public all right so that's where you usually put your uh public images so here we can just provide a source and I can import this jpeg or PNG or whatever you want let's call it a Hoy from and then using the add symbol you can just navigate over to your public and a Hoy okay so let's just render it out and as you can see you actually don't need to provide a WID and height so let's just give it an alt and Xs uses this for like content layout shifts uh to make sure that it doesn't like pop in and then everything on your page starts moving and there we go looking good so again if you have a remote image you can just specify a blur URL here so you can say placeholder and you can do blur let's hit save so let's give this a crack so when we refresh as you can see we got a nice blurred image on until it starts loading up okay so let's get a remote image I'll remove Prime and we let's let's just do unsplash or something okay here we go let's pick an image let's go with this one here and let's just copy the image address okay we'll create a function I'll show you how you can do this and then you can just do it for any images that you have whether it's in your database your S3 bucket or whatnot so let's just head to the home here and I'll make a remote image and save this like that now when you're working with remote images you'll need to provide that blur data yourself so there's a package that we can use to do that uh we can use sharp and also placeholder so let me just show you in my package that Json you can install these two packages sharp and placeholder but it's it's with an eye like that okay so make sure you type it correctly so now that we have that we can create another component here called base 64 all right let me just delete everything here I'll show you how to set this up so basically what you want to do here is let's import that package placeholder like that and we'll just import get placeholder cool so here we'll just make a super simple function it's going to be a server component so we'll add the async here we go base 64 and let's say this takes in a URL you can do with multiple images if you want of course um and all we'll do here is we'll do a try catch and try to convert that image over so so here let's do a fetch we'll do res away Fetch and we'll pass in that URL now here we'll we'll not need the actual like string of like the URL where the image is locate to that instead what we need is the array buffer and the array buffer just lets you hold the actual like binary data of the image and then we can take that and convert it into basic C4 which is just like taking an image and like visually representing it in strings right and characters long character so that's what we're going to do we're going to get the array buffer and then pass that to the placeholder API so what we'll do is say well first let's say if there the response is not okay then here we can handle that as well so let's see let's throw an error otherwise we can access that buffer and you can do that by res array buffer like that okay and then here then here we can say await get placeholder and we can just pass in the buffer from and we'll pass in the buffer like that here you can extract the base 64 format of that image and we can just simply return that and here where we catch an error let's just say if error or E is instance of error then let's conso log out e do stack okay so just a simple function and then we'll head back into our appjs and now that we have that we can just simply imported here so let's say con blur data and we'll set that equal to await and we'll say get base 64 so we'll import that component and just pass in the image like that that gives you an error that's because we haven't marked this as async and now if we console log out the blur data you're going to see that base 64 encoding right here there we go so that's all you need and now you can just pass that data down it just like you would in an component so Source here is going to be the remote image and here well now we need to specify width and height because nextjs has no idea how like what size this is right because it's coming in from an API so you need to specify this otherwise we're going to just get content layout shifts so let's do we're still going to get some if I I show you here if I just put a low value let's do 600 600 I know the image is much bigger than this uh and let's all also do let's hit save so there it is and then here for the alt we can just say I don't know what blue balls and the blur data URL is going to be coming from this blur data now so let's paste that in as well curly brackets and hit save okay let's give this a shot now but there you go that's how you can add blurring to remote images as well okay let's move on to the next one tip number number two is going to be about environment variables be careful when you're marking something with next public that's going to expose the environment variable in the browser it's is going to be available in the source code in the JavaScript bundle so on build time it will be added inside whereas if you don't add the next public prefix here this will only be available in a node environment okay so no access to the browser so be very very careful if you have API keys especially if you have like a stripe key you know that you don't want people to have access to make sure you don't Mark with next public for tip number three let's talk a little bit about caching because it can be quite confusing for people that are getting into next yes so all I want you to know is that there's there is a big difference between caching in a production environment versus caching in a development environment so what I mean by that if I go here to the caching let's add a paragraph and we'll just say math. random okay there we go let's it save and as you can see you're going to see that number right there now when we Refresh on every page as you can see it keeps changing so it's Dynamic this only applies in development mode next js's default behavior is going to be to try to render this page out as static so when you create a server component like this it'll it'll try to do that so let me just show you so if we do mpm run build that's for an mpm run build to create a production build here as you can see generated some static Pages including the homepage here so let's run this mpm Run start and now you're going to see that this is purely going to be static so can refresh it as much as I want nothing's going to change so there's like ways around this so if depending what you want to do you know if you want to just revalidate this data like once in a while you can just add export cons to revalidate here revalidate and let's set this to something like five so now as you can see when I refresh only once every 5 Seconds that data is going to be freshly refined there we go if you want this route to be fully Dynamic on every time you visit the page it'll give you the fresh data you can use this Dynamic instead Force Dynamic like that so let's give that a shot now every time I visit this page and refresh as you can see we're getting fresh data now be careful when you're also importing headers or cookies next ja might not you might not see it but when you're running a production build when you're building this you're going to see this actually turns dynamic as well so be aware you might not use anything here that explicitly says that this route is dynamic but just be aware when you're using headers and cookies and stuff like that see if I run it now look at that the page is fully dynamic as well okay for tip number four don't use API rout handlers to fetch data in your server components I've seen this a couple of times and it's really not necessary so let's say you have a route here I'm just fetching like a joke from it from the joke apis okay so I'm doing a Fetch and returning the data here res and success okay so I can go to API SLG greet and that's my response right there now you don't need to create this route Handler here because what you generally try to with nextjs is try to fetch everything in your server component and then from there on out if any client component needs it you can pass it down as props or you can use like a state management like react query to provide that data to the other client components so where would you use a route so don't do this like don't do a wait fetch here in your home and then try to fetch the route Handler so they'll make a request to your route Handler instead just fetch the data here like this there we go so now if we hit save as you can see we get the same effect and if another component or server component needs this data feel free to fetch it again nextjs is going to optimize that for you automatically and it's going to it's it's going to cash this anyway and if it's available and you're fetching in another server component it's going to just take that cash and pass it through which is super cool but if you want to like reuse this you know you might have like a dynamic uh fetch here or whatnot or you want to reuse it in a lot of components and this might be a bit like a bigger function so in that case what you can do instead is create a server folder here and create a server action and then just reuse that data as well so it would look something like this we'd go over to our root folder create a server like that and here you'd have like your action where you'd maybe fetch or get joke. DS let's call it that add you server to the top so it's going to have kind of the same look to it like that so we have the data and the response and here we can just return we just return a simple object here so if that's success we can say return a success message and we can say res like that otherwise if there is an error we can return an error instead the cool bit is now we can just import this anywhere we want so let's just go here and say const joke equals wait get joke joke like so here we'll have the data and then we can check if the data is success or not so data dot success then we can render out whatever we want down here so we'll say data success. joke otherwise if there's an error we can we can say if data. error we can just throw a new error here with the message and that's automatically going to be passed to the error TSX uh page in your file tree here which is going to add these suspense and render that out instead so now when you use this in combination with Rizzle and next safe actions you're going to get that nice end to endend type safety and we're going to do that in the course for tip number five let's talk a little bit about client components and server components I remember at the beginning when I got started with nextjs it was a bit confusing like which component becomes a client component and is a server component especially when you start wrapping stuff up with like client providers you know and stuff like that so let me just kind of try to explain this really quickly so by default when you just create a page like this and you mark it as aing it's going to be a server component and this is the convention you're going to see where people fetch data in here and you can still add client components in here where you want the interactivity okay so this is a client component here Showtime that's going to get the seconds of this minute so when I click update we get the latest value so if we have a look here this is marked as use client so again we can use State here here we can use use effect uh refs everything right okay so there we go so again even though this is a client component I can still compose it in here and keeping this a server component now if in the showtime here I try to render out a child component within here that is automatically going to be a client component I don't even need to mark it with Ed client so let me show you we'll create a new one we'll call this a so I'll just say something like child button here TSX and let's just say export default function child button and we'll just return a div here with a button saying hello and up here let's also add a text now let's see if we have access to use State here even though we're not marking this with use client at the top so so I'll just get the text and change the text so let's say set text equals to you state and by default we'll leave hello here so let's render that out instead and hit save okay so let's try to render this out in the get time here so let's head back here maybe at the top here we'll say child button like that and now when we hit save as you can see I'm not getting any errors that oh you have a mark this with use client you're using use effect you're using hooks or whatever that's because it's a child component of it unless so as you can see everything still works fine we can go here and try to update this as well so we can say onclick like that and let's just call a set text here to New value okay let's hit refresh and now when I click this as you can see we get the new value so how in the world then are we getting you know we've been told this like oh when you do a provider in your layout it it'll still work as a server component so as long as you pass the children down it's still fine it you can still have a ciment component that renders out server components so you're going to see this quite a bit it's already set up for you usually where you're going to need these so for example in Shaden right you want to do teaming so let's set to the teaming here scroll down let's mark this as team. TSX paste that code in here and now if we head over to our layout again the children here are still going to act as server components as long as we wrap that around it so as you can see see we're getting the children here from the root layout that's going to bring in these server component pages and then we're just passing it down here okay now let's run this up and I'll show you that this is not going to change anything so if we run mpm run Dev and I'll try to run in the children here so any page that I have access to let's say this homepage for example so here if I try to run something with UST State let's even remove this acing here so yeah let's just paste that in and import U State and you're going to see that this is not working so this is a good way that you could test if you want you can just add a u State and see if it's going to crash for you or not as you can see oh that doesn't work boom see you're being stopped of doing that so there we go thank you so much for watching this episode hope these tips and tricks helped a little bit like clarify kind of the ambiguity that sometimes might be going on in nextjs I'll head back to the course again and the course will cover much more in depth it's going to be like a 25h hour course we're going to start from like buying a domain all the way to hosting it creating products we're going to hook up the drizzle there I'll show you some really cool stuff so get back to editing that take care drop a sub drop a like bye-bye

Channel: developedbyed

Views: 27,107

Keywords: next.js, next app router, app router, nextjs caching, nextjs env variables, server components, client components, next 14, react js, next js course, next js tutorial, 5 tips and tricks react, nextjs tips and tricks

Id: jTRfhbWRuro

Length: 17min 10sec (1030 seconds)

Published: Tue Apr 30 2024