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

First 4 chapters live Fullstack Next.js 14 Course 2024 Edition 🎁
developedbyed.com/
Here are a couple of next.js tips that I wish I knew sooner when the app router initially came out, hopefully this helps a lil bit with wrapping your brain around server and client components.
Timestamps
00:00 Intro & Demo
00:30 Fullstack Next.js 14 Course
00:44 Next Image Data Blur Local vs Remote
06:25 Careful with NEXT_PUBLIC
07:06 Caching Prod vs Dev (revalidate, headers, force-dynamic)
09:27 Please don't do this
12:44 Client vs Server Component madness
X: / developedbyed
Github: github.com/developedbyed
#programming #react #nextjs

[@tali6616]

I like how you not only explain the needy-greedy, but also create this friendly atmosphere. I don't even feel like I'm studying, more like speaking to a good friend. I also really enjoy UI design solutions like in courses, simple, but tasteful

[@tigana]

I feel the same. He’s a great presenter. Very friendly vibe

[@ChrisChristensen143]

The camera stare after "blue balls" 😂😂😂

[@jack_mc8]

I love your mood, it cheered me up since the start, thanks!

[@Al7alafawy]

THAT WAS AWESOME!!!! You LITERALLY solved all my troubles😅🥰🥰

[@RaulReyesOnline]

Great video! How did you enable "Intellisense" to see all the exports from a file when doing the import statement: import { _click-here-and-reveal_ } from "/path" ?

[@aaronshunter]

0:40 did my hair just grow back? 🤣

[@coltonaallen]

Top-notch planning there

[@fakeitsoyoumakeit]

this is the only channel that doesn't make me bored 🤓

[@marketmov7796]

It's safe to include public API endpoints with NEXT_PUBLIC if they are meant to be publicly accessible and don't require any form of authentication or sensitive data.

[@tomspatula616]

Hi Ed, legend video as always!

[@MrSpinozadp]

Wooww really cool tips! Thanks 🙏

[@hamirmahal]

At 15:28, what's the extension that shows you the import size? Thank you for the tips in this video.

[@naminami3180]

import cost

[@vignesh_m_1995]

Suppose we have a table in a Next JS page and the table has a filter (client) component with interactivity. When we hit Apply, how do we pass the filter values from the client child to the server parent component. (The parent fetches the data and renders the table). I can see many suggestions to pass the data as params or queryParams using revalidate or nav methods of next. That works fine for a simple values like ID or search params. For example, if it is not just an ID but an object (advanced filter similar to the one in Amazon), should we just pass the entire object via the query params and make the URL bloated with so many values or are there any alternate way to communicate from client child (filter) to server parent component (where data is fetched) ??

[@DevAdeniji]

Really helpful Thanks!

[@developedbyed]

No worries!

[@DK-sq7of]

I’ve heard/read people suggesting not to use server actions for fetching data(GET), but instead use it to mutate the data. What’s your thought on this?

[@developedbyed]

I guess the only thing would be that it makes a Post request instead of a GET.. that’s pretty much it as far as I know… you could just do a fetch directly in the server component if not

[@raj080288]

Nice one dude! What are you using for auto suggestion code?

[@developedbyed]

I'm on and off on github copilot hahaha

[@raj080288]

@@developedbyed haha is that free?

[@danielpiedraquintero]

‘use hybrid’ will be amazing

[@sellimenes]

Thank you for the video! I just didn't understand the difference between fetching data in API routes or in server actions. I am always using server actions but is there any benefits using API routes to fetch outer data?

[@developedbyed]

Server actions will always create a POST, that’s one of the cons and also you can’t fetch server actions in parallel, I need to make another video about this tbh 😅

[@sellimenes]

@@developedbyed yes I would be so happy! Thank you. 🙏🏻 I also have big problems with revalidate and even in GitHub issues too many problems about that. Video could be great. When I use revalidateTag, caches in the exact page deletes and refetch. But if I change the page, still old data is shown everywhere. It's not the expected usa case I believe.

[@sellimenes]

​@@developedbyed Thank you so much. I will be waiting for the video. 😅 Also, I am having big problems with revalidateTag. Even in GitHub Issues tons of posts about it but not solution. When we use revalidateTag, it deletes the cached data and refetch it in the exact page only. When you change the page which has the same data (website name for example), there is still the old data. It mustn't work that way I believe. Video would be great about revalidate in general either. 🙏

[@developedbyed]

Shoutout the the guy that called me a hobo in the comments! Cut a fresh cut boyyy

[@6uiti]

I looked for hobo comment but I can't find it and now I'm disappointed

[@mDHARYL]

What does hobo mean?

[@coltonaallen]

​@@mDHARYLa term for a homeless person

[@ajiteshmishra0005]

What is the difference of using in header and body?

[@wuffgang5333]

but do blurred image make any sense if the remote image must be loaded for blurring?

[@ExileEditing]

Copy pasted from my other comment: I'm not sure exactly how this works but my take on this is that a package like plaiceholder will fetch the image on the server and doing so results in consistent image loading times because it doesn't rely on the users internet or device speed to load it. Then, when the user loads the page, it displays that blurData instantly due to the small size while the full res image loads in the background. So I believe maybe just maybe if your download speeds are fast, it would be better without blurring, but this helps to keep it fast and consistent across all devices and internet speeds for all users.

[@wuffgang5333]

​@@ExileEditing Got it. thank you for explaining.

[@bennysmith4557]

8:27 legend

[@fsociety.dat101]

I used to watch this channel. I wish I stuck with coding. But once I got the job after self teaching nearly everyday, I just felt overwhelmed by it all. Now I still work a shitty retail job and at 34 years old, I'm bloody ancient.

[@nvsWhocares]

Good video. Your server actions example is unfortunate though. Sorry for calling it out: Server actions are for mutating data not for getting data. By making your getJoke a Server action you basically did create a route handler for it under the hood. So the exact thing you rightfully said to avoid one step before. In your example you could've just left out the "use server" in the top, to not make it a server action but a simpe reuseable async function.

[@tauhid97k]

Server actions are much simpler to use. I do use server action for GET, POST whatever. If it works then why not? My whole E-commerce project is built on server action. I see no performance issue or anything.

[@developedbyed]

Whoops that was my bad! Absolutely! I do recommend directly fetching in server components. Should’ve made it a bit clearer that when you use a server action it also explicitly creates a POST instead of GET. Thanks I’ll talk about it in a future video 👍

[@thetruekobby]

Please will Nextjs still cache the data without "use server" at the top? @nvsWhocares @developedbyed

[@renjielin1065]

I like your font , what's this ?

[@justmeddling]

Thanks baby reindeer sent from iphon

[@Agustin-jo8mv]

Hey your Javascript "Full Course Download" link is broken. 😢😢😢😢

[@haktanalbayrak384]

What is the name of the theme? I like it very much

[@theDanielJLewis]

What's the point of blurring a remote image like that? Is that actually making the blur any faster than displaying the image would do?

[@ExileEditing]

I'm not sure exactly how this works but my take on this is that a package like plaiceholder will fetch the image on the server and doing so results in consistent image loading times because it doesn't rely on the users internet or device speed to load it. Then, when the user loads the page, it displays that blurData instantly due to the small size while the full res image loads in the background. So I believe maybe just maybe if your download speeds are fast, it would be better without blurring, but this helps to keep it fast and consistent across all devices and internet speeds for all users.

[@AnasKhan-fi7xk]

Best content

[@user-lp4df2em7v]

using actions for data fetching is wrong and an antipattern. A server action is just a remote procedure call, meaning that you basically call an api endpoint. what you suggested makes you do exactly what you were trying to avoid :)

[@AndreyBelfu]

cool Thumbnail

[@ys1197]

11:00 this

[@anthonymifsud6141]

I like your cut g

[@developedbyed]

ayyy thanks

[@khaldounal-nuaimi3594]

nice haircut!

[@mohaimenkhalid3844]

cool

[@fsociety.dat101]

Make sure you are looking after your health man. Make sure you are eating enough.

[@Wenlu_]

waddup pewds

[@codernerd7076]

Any discounts for the course it's priced way too high for my buget

[@ilirbajrami2902]

So you knew that you are going to have a haircut beforehand? :D

[@KnowledgeBoxMM]

First comment 4 my legend ❤

[@MuhammadFajar-os1fq]

perhaps sir, i think the video will be better if you use the better mic🙏🙏

[@BrendaKincaid]

@developedbyed If you were referring to me, I am a woman. But thank you for indeed cutting that hair.