Caching should be opt-in, not opt-out. Same thing for env variables which are consumed at build time. We have apps that read from remote configurations when they start, and this created issues because the config is also read at build time. Having static data is great! But the cache control in Next is quite frustrating.

@DaveGrayTeachesCode

4 ай бұрын

Many agree with this! 🙌

@janglad9136

4 ай бұрын

Out of interest, how did you solve the issue with the environment variables? Could you solve it by running a pre build script?

@yanfoo

4 ай бұрын

@@janglad9136 we use the "publicRuntimeConfig" to store these values. For some reason, Next does not transform process.env.* from this file, then we import "next/config" and get the public runtime config from it. With some tweaks, this can even be typed. But it's certainly ugly. Another solution would be to import env variables with a module like env-var.

@jmarbutt23

4 ай бұрын

I think this is also a feature that should be opt-in not opt-out. This issue is compounded by how NextJS overrode fetch for doing caching. In addition that this is an after thought for opting out with the unstable_nostore and the different ways they do the export for forcing dynamic. This also doesn't seem to work consistently. The combinations of these assumptions for caching are what cause a lot of mistakes by new NextJS devs. The lack of tooling for discovering these, lack of global configuration for opting out really does mean it is broken.

@mfcmasterk

4 ай бұрын

Amen to this guy

+ if you use soft navigation with then it introduces even more "unexpected behaviour for the developer". There is still a 30 second cache you cannot opt out of, even with noStore()

I was just having a problem related to this topic and your video helped me grasp the concept behind it , leading me to properly understanding and fixing the problem, thanks 🤝

@DaveGrayTeachesCode

4 ай бұрын

Glad it helped!

Normally, the code works in the development phase, but gives an error in the production phase. The opposite happens in next.js.

@yehaa00

4 ай бұрын

Their hot reload thing needs to be fixed

@thatsalot3577

2 ай бұрын

@@yehaa00 I once used next 13 with react-icons, it litreally used around 4gb+ ram for no reason and kept constantly crashing, I never feel comfortable using next

@someshkarmakar47

22 күн бұрын

@@thatsalot3577 seriously man.. thats an issue, with 16gb ram still dev server sometimes crashs or takes time to render🤧🤧

Only recently found your channel. Amazing tutorials. Thank you.

@DaveGrayTeachesCode

4 ай бұрын

Welcome aboard! 🎉

Great video. I recently ran into this issue when using the T3 stack. T3 was throwing a DYNAMIC_SERVER_USEAGE error during builds and noStore() solved it. I'll be honest, I didn't understand why it worked, but it did.

Hi Dave! Your videos are absolutely amazing! I am currently digging into secure web protocols, I wonder if you can make a video of how to prevent or mitigate attack on a web application. Thank you.

Thank you for sharing!😊

Thank you Dave

Thank you for the great explanation and sharing!

Can't explain better than this! Awesome video!

subscribed!! this is some great stuff Dave, thanks for sharing with us!

@DaveGrayTeachesCode

4 ай бұрын

Welcome!

Nice content as always. I just wanted to ask if your next JavaScript course, the one covering version 13, is still suitable considering the recent upgrade to version 14. thanks ^^

@DaveGrayTeachesCode

4 ай бұрын

Yes all concepts still apply because it also uses the app router. Do take note of the version I use for each chapter.

@Add-ux4sf

2 ай бұрын

Xxxx

@Add-ux4sf

2 ай бұрын

X is

I have one question when we work in next js and node js then nodejs devloper send token in response then we can get it in client side then how we can protect page in middleware using server side because next js middleware run on server

i have noticed on nextjs14 when using react query on development on the first time i open the localhost the site has problems with loading the content incoming from react query, to fix i just refresh the page. Luckily on production this doesnt occur

Very helpful, thank you Dave!

@DaveGrayTeachesCode

3 ай бұрын

You're welcome!

Routing, both Links and programmatic. Also, if you wanna map an array, and return a conditional check on the array, before rendering, but you want to to wrap in an empty container for styling reasons, it needs a key… forcing you to use the div, breaking styling. Also there should be a way to optionally pass state from a layout to the pages that use the layout.

Do anyone know a next.js website that utilizes react server actions and has a crud type response time close to 100 or even 200ms? Would love to see it. Thanks.

What you are trying to say is: NextJs is broken. "It is by design" ~ yeah, by design bad. It is not like this is the only thing that sucks in nextjs.

Thanks for covering this amazing content as always

@DaveGrayTeachesCode

3 ай бұрын

Glad you enjoy it!

Thank you

Build videos on remixjs

this was very helpful

this is why I moved to Remix, you have way more freedom on how you want things to work.

god this saves me alot of headache, thank you, export const dynamic would not work for me at all

Great video, as always. I've also seen many people's comments on Twitter, Reddit, and KZread that they are done with the Next.js app router and switching to another framework like Remix, etc. The transition from page router to app router is a big change in Next.js, and it's very great. I think some people are having a hard time switching from page router to app router, and they don't want to invest more time in learning app router and reading the docs, etc. and their biases towards other frameworks

@DaveGrayTeachesCode

4 ай бұрын

Good point 🙌

@nazarshvets7501

4 ай бұрын

If you phrase it in other way - buissneses don't want to spend extra money on maintenance because Vercel thinks it is good to **increase** compute time for their clients pushing RSC - this would make a lot of sense Don't try to break what works fine!

this is what I call a quality content!

those who aren't subscribed to your channel are really missing out

What's the difference between this noStore and revalidatePath?

I also wanted to start my new project in Next14 but i found no documentation to use existing backend api. I want to use my existing nodejs apis and also want to manage authentication using that but i cannot find any article related to frontend only next 14 project.

@kayodeadechinan5928

4 ай бұрын

why would you need an article for that ? If you already have your api, just use it where you would normally call your db stuff in next 14.

@lamhung4899

4 ай бұрын

@@kayodeadechinan5928 on other way, How could this section is hided from docs? I'm sure 90% dev don't use Next as API

@Intellicentnet

3 ай бұрын

@@kayodeadechinan5928 Do you mean that i should call my existing apis from nextjs server apis. But wouldn't that make two request for 1 thing. 1st request from frontend to next server api and 2nd request for nextjs server api to My existing apis. As my existing api project is very big so i cannot rewrite those api in nextjs server apis. So i need a way to call them from frontend. And i want to manage its jwt authentication in nextjs

Very nice

I started using Remix and it’s so cool and much less complicated then NextJs

@DaveGrayTeachesCode

4 ай бұрын

Opinions vary but you are not the only one to feel this way for sure.

@devyb-cc

3 ай бұрын

still waiting for their middleware 🙃

I'm getting wierd error that i can't track down , in dev mode is perfect but when I build at generating static page stage I'm getting errors , i started my project with bun when I try to run it with node getting module not supported use common js ... I don't know wtf is happening I'm not building a server here , it's jamstack app and it's fully frontend

why you put the dynamic context inside static context and inject the noStore? I would move the dynamic one out of the Page scope 😮

thanks for this info.

@DaveGrayTeachesCode

3 ай бұрын

Glad it was helpful!

I was one of those who always see your videos but never comment or subscribed. Today I subscribed. I like your videos as you tries to show the real-life scenarios through your codes. One humble request. Can you please make a tutorial for nextjs with really complex form handling with array files uploading and designing such API or components. Thank you

Extending fetch is a terrible idea too

@DaveGrayTeachesCode

4 ай бұрын

Others share this opinion, too.

Just about to refactor a BIG production app because the devs preferred clean imports but Next doesnt tree shake properly! Talking about 1 minute build time for a page. Using turbo!

a few things broken with next.js 'use server' = declare action (API) import server-only = use server for this only 'use client' = hydrate

I find it good that it's opt out

Awesome vid. Next.js doesn’t leave anyone indifferent.

midlleware cant use node runtime is really 。。。。。。。。。。。。。。。。。。。。。。。

I give up with nextjs after dealing with a server action cache bug for the last two days. My app behaves differently on Vercel than the local build, there are countless cache issues open on github for months. It is mind boggling that caching is default. I will try Remix or Svelte for my next app

Next.js is getting complicated each update and a lot of band aid solution. I'll probably switch to a more stable and non vendor lockin framework like remix or sveltekit

@DaveGrayTeachesCode

4 ай бұрын

It's worth trying them all out and finding what you like best.

@IvanKleshnin

2 ай бұрын

+1 will switch to SvelteKit or SolidStart as any of them becomes stable. Also considered Remix but it's still React and React deserves to be ditched as well ;)

I understand what you're saying. For more information on why it works this way, I suggest watching this video: 'Next.js App Router Caching: Explained!' I believe realizing a different behavior between 'dev' and 'prod' only at the project build time indicates a lack of investment in reading the official documentation!

Dave, you are always on point. I see that you are not affiliated with any frameworks like other youtube influencers. Thanks again for your unbiased opinion and bringing the issue up. Next.js is good but not perfect.

@DaveGrayTeachesCode

3 ай бұрын

I appreciate that!

Did you try leveling the bed?

There are really a lot of errors in the next build, and there's no helpful error message. I encountered errors even though I did nothing. I had to recreate my project because, for some reason, every import wasn't working.

So its SSG without noStore ?? And adding no store it becomes SSR with no caching ?? And if we use the "use-client" its CSR ? Please let me know if this is correct

@DaveGrayTeachesCode

4 ай бұрын

There are a variety of ways to make it dynamic aka SSR. I show some of them including "force-dynamic" route config and noStore. "use client" does indicate client-side rendering, but be aware that the first render of client components also happens on the server.

@razorflash__

4 ай бұрын

@@DaveGrayTeachesCode But am I right with the SSG part tho ?? Also if we have to make it ISR, we have to use something related to revalidate ?

@DaveGrayTeachesCode

4 ай бұрын

@@razorflash__ there's a lot to learn. I've got videos. Check the docs too. You are on the right track.

@razorflash__

4 ай бұрын

@@DaveGrayTeachesCode I have seen your ssg, isr vid in next 13, although am yet to see all of it. Thank you 👍

NextJS simplifies many React stuff like routing and giving us ability to use server side middleware's/end-points instead of "external server" like Nodejs but it does complicate other things as well shown in this video and documentation while is great also lacks. I hope Vercel figures these problems out and brings Next to the next level like Google did with Angular or PHP with newest PHP 7+. I choose to use Next thanks to SEO, better peformance compared to React, simplified router, server side components and ofc NextAuth which is great other than that Vercel needs to work on Next more. I still believe for more complex projects, Angular + Springboot or C# is the best.

Vite + react router dom and some state management makes wondeers.

@jitx2797

4 ай бұрын

Use astro and you will get SSR

@zoki5388

4 ай бұрын

@toparamennoodles9652 numbers speak volume. Next is not as popular as it's hyped on KZread. Yes it has nice features but it can be pain to get some things running in production.

@lamhung4899

4 ай бұрын

remix ?

@jitx2797

4 ай бұрын

@@lamhung4899 only good thing we have is Remix..I hope it gets RSC. I think we will get it by 4th quater or early 2025 stable support

@petarp3938

3 ай бұрын

​@@jitx2797Vite has SSR too

*Respected Sir,* I'm experiencing a weird problem with API route handlers, my API route gets data from external API (locally hosted using mockoon tool), I'm using *{ next: { revalidate: 60} }* to get fresh data after 60 seconds & also *'force-dynamic'* to prevent it from becoming static during build. External API returns errors like 404, 429, 503 but API route handler responds with cached data & never returns a error, even other errors caught in catch block are ignored. Any suggestions ?

@DaveGrayTeachesCode

3 ай бұрын

Yes you need to use the force dynamic segment config like I show for server components in this video. A round handler is also a server component.

@Beast80K

3 ай бұрын

@@DaveGrayTeachesCode Yes I did apply 'force-dynamic' & { next: { revalidate: 60} }, but my API route handler never returns error responses, instead it gives cached data(which was 200 status) ignoring external API's error responses (404, 429, 503) . Can anything be done ?

please dont tell me we will have to leave it after i leaned it

@togya4

4 ай бұрын

oh just complete the vid, you are awseome dave

@DaveGrayTeachesCode

4 ай бұрын

Thank you!

I had some work experience with React, and recently I have started learning Next.js a side project. I like the file structure and the dynamic routing, but I the other day got hit pretty hard by trying dockerizing my Next.js App. Apparently, the offical docs says we can use {output : standalone} to reduce the size of the image, which I never succeed after scouting the internet for a day. Comparing my nginx+react 50MB image, I wasn't able to make a running Next.js image with

I only tried Next.js a couple of times and could not figure out why dev/production didn't sit right with me. I've settled on Astro and it's a much, much better experience.

your tutarials are excellent. why don't you make tutorials in Blazor?

@DaveGrayTeachesCode

4 ай бұрын

Thank you. I do not have experience with Blazor. Claudio Bernasconi has a channel with videos about it.

Last time i watch dave's video, he was just 50k subs. Now he's at whopping 272k subs. I'm so proud of you dave!

@DaveGrayTeachesCode

4 ай бұрын

Thank you!

the moment i learn new framework it gets broken/outdated or there is a better alternative...like why me god 😭😭

@bryanlee5522

3 ай бұрын

next.js is still the go to react framwork and will be for the foreseeable future. its just a clickbait title

@petarp3938

3 ай бұрын

​@@bryanlee5522It is unfortunately

@CCleanerShot

3 ай бұрын

@@bryanlee5522 It's not a clickbait title, it's a real issue. Some of the same developers who made React a cluster fuck are literally in NextJS now in important roles. We're gonna see a similar trend with NextJS in the future, despite it currently being a "go-to" solution.

nextjs has other issues like using docker in dev on windows needs a polling hack, development is quite slow af, & a host of other issues that don't exist in other frameworks like remix. i have switched over to remix & its been such a breeze compared to the shitshow next.js is. still have 1 next.js app & 1 remix app so the difference is quite astounding. i've heard nuxt is even better but i dont wanna learn vue for now although should be quite easy. vue 3 + pinia + nuxt honestly sounds like a dream but hopefully remix & react (maybe millions) can & should catch up.

Same with revalidate time works perfectly in dev it caches data for specified time then it fetches new content However it doesn’t work in production it always shows old data even after second reload when revalidate time has passed.

@broskidamn

4 ай бұрын

Same problem here mate. Do you know how to solve it? Cheers.

@jeetuvakode2654

4 ай бұрын

@@broskidamn I tried solving but didn't work so I have opt out cache simply setting revalidate to 0 and it works

Why not just use remix?!

@DaveGrayTeachesCode

4 ай бұрын

Many feel the same.

it will work if u use "use client"

@DaveGrayTeachesCode

4 ай бұрын

The timestamp example will work, but that is missing the point. The topic here is how dev mode and production are different.

Awesome ❤

After nextjs16, nextjs will make us wrap everything inside Suspense so that it doesnot break code in production.

If John Wick was blonde 😎 Great video, Dave

Just write in plain react and you should be good

With this content I will give you 1 like and 1 sub

Such a shame that they couldn't fix this big issue.

this nextjs things are overwhelming for me T_T

Whats the secret to the prince charming hair bro

@DaveGrayTeachesCode

4 ай бұрын

Being committed to grow it while you can lol

I still think that caching should be opt-in behaviour 🙃

@DaveGrayTeachesCode

4 ай бұрын

Many share this opinion!

Thanks dad

@DaveGrayTeachesCode

3 ай бұрын

Tell your mom hi

just use remix

@DaveGrayTeachesCode

4 ай бұрын

Many of the comments agree with you.

Skill issue. The example doesn't resemble real world use case, and it's easy fix by changing directives or even writing stuff in different components.

@DaveGrayTeachesCode

4 ай бұрын

Yeah I don't like to make examples complicated. It takes away from the discussion at hand. The example did clearly show what was happening. YMMV

By far the most frustrating part of nextjs has to be the slow & sluggish dev server. Its just unbearably slow. I just really hope turbopack arrives soon. BTW awesome content as always. Thanks Dave.

@A03L

4 ай бұрын

It got so much faster

It's not broken. It's a different perspective with its own reasoning. Broken is a strong word.

It's like the baby out of the oven gets less care 😂

I've never used next, but there are so, so many complaints about caching. Seems like a big oversight

@DaveGrayTeachesCode

4 ай бұрын

Many feel the same way

That's why I switched to VueJS.

vue >>> react

youtube algorithm 🚀

I'm in a much better space since I stopped using nextjs

@zaabimahdi

4 ай бұрын

What do you use instead?

ngl you had me until that lowercase `page` function

@DaveGrayTeachesCode

4 ай бұрын

haha, you can name it anything you want. The file needs to be named page though.

Not sure if backend development is this hacky

Is it only me who thinks that calling statically generated pages “cache” is a bad idea to begin with?

Use vite with nextui. No need nextjs all way

Basically skill issue

It's not broken. It's a feature. /s

Everything about Next js is wrong, Starting with using React as foundations xD

It's not a problem. The problem is when you don't know the tool you are using.

I was wrong.... Middleware works with node.js...Tested with 14.1 on Hetzner Ubuntu ARM VM Original Comment: (this is wrong) Why don't middlewares works with nodejs??? This makes self hosting difficult

@o_glethorpe

4 ай бұрын

Why do you think? thats what you get when You work with a framework created by a hosting company.

@jitx2797

4 ай бұрын

Ya enough of it. Switching to Astro@@o_glethorpe

@everythingisfine9988

3 ай бұрын

​@@o_glethorpe vendor lock-in at it's finest

@rand0mtv660

3 ай бұрын

What do you mean? I run multiple Next.js apps self hosted and never had problem with next.js middleware. I don't run it on Vercel or any specialized provider. Just in a VM running with Node.js.

@jitx2797

3 ай бұрын

update: just hosted it and middlewares works fine...Need more testing from my side..... I have corrected my comment@@rand0mtv660

Skill issue, not NextJS issue.

if you wanna spare 10 minutes of your life: "next caches during production build unless you tell it not to do that as clearly said in documentation"

@DaveGrayTeachesCode

4 ай бұрын

This is missing a few things but it is hard to sum up in one sentence. Others may want to know why it does what it does, the reason for the static content, where to find the build reports, and why other devs feel this way.

@11WicToR11

4 ай бұрын

@@DaveGrayTeachesCode i might have sounded too harsh there, sorry for that ...i m sure your video has value to your viewers ..i just get triggered by these video titles where its sounds like something interesting and then its something like this

@DaveGrayTeachesCode

4 ай бұрын

@@11WicToR11 thanks for the reply. What is interesting to one may not be to another. You can tell from the various comments.

IMO nextjs app router should only be different from pages router by nested pages(layouts and grouping) resolution Rest of features they got only distract and harm devs day-to-day job We aren't building static websites with server components. We are building dynamic apps. Stop making php with wordpress with this BS

Please get a haircut….. im so not used to it lol

@DaveGrayTeachesCode

4 ай бұрын

Nope.

What a total mess

This is not a NextJS problem, it's a waterfall query and dependency propagation problem. Next.js and React tried to solve this by using a cache, so don't overreact to this feature. Instead, be better informed.

Oh so sad people starting to become like a ROBOT and dedicating there whole life building a useless thing called WEBSITE looking at the computer screen for hours straining their eyes.... they should ESCAPE THE MATRIX INSTEAD 😢😢😢😢😢

@maanasmahato8790

4 ай бұрын

breh

@SweepAndZone

4 ай бұрын

Bro watched Andrew tate once lol

@sujalvanjare06

4 ай бұрын

@@SweepAndZone for real

@samydjemai927

4 ай бұрын

An he said that while using...you guessed it... a WEBSITE !

@nazarshvets7501

4 ай бұрын

@@samydjemai927 Its an app. Not a website. Not a blog. Its an app

"Should be finished in just a second" lol, it's taking ages.

@DaveGrayTeachesCode

3 ай бұрын

A testament to disappearing attention spans. 😆