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

Timestamps
00:00 Intro & Demo
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

#programming #react #nextjs

[tali]

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

[jack_mc]

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

[ChrisChristensen]

The camera stare after "blue balls" 😂😂😂

[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" ?

[developedbyed]

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

[Alalafawy]

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

[vignesh_m_]

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) ??

[fakeitsoyoumakeit]

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

[ajiteshmishra]

What is the difference of using <script> in header and body?

[jamesauble]

i was confused about this as well, but you don't necessarily need to mark a component async for it to be a server component. It will be a server component by default unless marked client. Marking it async is only needed if you're gonna use await within it.

[DK-sqof]

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?

[DanielSpindler-gcxh]

what would i do for tokens? would i handle that in the route handler when i need the cookies?

[hamirmahal]

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

[raj]

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

[wuffgang]

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

[marketmov]

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.

[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?

[alaaeddin]

no need to import images from public folder, if the image is under the /public folder directly you can just type the name of the image and its extension.

src="img.jpg"

if it's under subfolder in public let's assume it's /media folder

src="media/img.jpg"

you need import only if the image isn't in public holder.

---

Thanks for the amazing tutorial.

[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?

[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.