Instead of just reading release notes to us, you are demonstrating how it works! This is what makes you different from the others!
@gerkim30464 ай бұрын
true
@maacpiash4 ай бұрын
Now tell that to Theo T3 😁
@isaacjon4 ай бұрын
Why @@maacpiash
@nobodysaysmynameright3 ай бұрын
@@isaacjon Because Theo is a sh!t show, a bunch of click bait with no real content. Jack is honestly the man, by far one of the best doing content in this space
@Henrique010104 ай бұрын
Another great video, informative and well explained, thanks Jack!
@flnnx4 ай бұрын
Opting in for caching is much better than opting out by default. I'm so happy about these changes.
@jherr4 ай бұрын
Me too. I get where Next was coming from when it was opt-out. But folks were learning a new route layout model, RSCs and caching simultaneously. And that’s too much.
@richierob624 ай бұрын
Jack, small grammatical error on the pro landing page “His KZbin channel hosts an entire free courses on React and TypeScript” Thanks for all you do. Pretty sure you save me at least 100hrs of research a year.
@my_name_is_ahad4 ай бұрын
Can't wait for next js 16 next month!
@jherr4 ай бұрын
Seems like six months is the cadence. And FWIW, this is pretty evolutionary. Your code will just work better on 15. Unless you were dependent on the caching.
@saharshg3 ай бұрын
Crisp, to the point and no non-sense talk, thats why you are awesome!
@imakhlaqXD4 ай бұрын
OMG finally no caching by default. I might cry 😭
@phantom71323 ай бұрын
Appreciate your effort Jack! Your videos are so good and your explanation on point. Much love
@consoledoterror9714 ай бұрын
Thank you for the time and effort you put into this. Really appreciate this.
@BuriTechVids3 ай бұрын
15:26 - In the second sentense (or first two) is explained why we need after(). :-}
@haresh-sq4kf4 ай бұрын
@jherr will generatemetadata function get deprecated in next15 since you showed we can have metatags inside component
@jherr4 ай бұрын
I don't think so. IMHO it's fine to have two separate mechanisms.
@spidfair03 ай бұрын
I like that caching becomes more of an opt-in feature. What I'd like to know is if request memoization is also affected by this change. Deduping fetch calls of a single request was great as it reduced prop-drilling. If caching is off by default, does that also mean that deduping on a single request is also off?
@jherr3 ай бұрын
fetch de-duping during the request is a core feature of React 19, so it's still there. There is some talk that they will stop patching fetch in the future, so we might end up needing to import a specific fetch to get the de-duped behavior.
@JohnFarrellDev3 ай бұрын
This has been so useful, thanks Jack
@isekaiguy91133 ай бұрын
10:58 You forgot to use html time tag. Video is awesome
@amanda.s.f4 ай бұрын
Awesome video! May I ask what is your VSCode theme?
@jherr4 ай бұрын
Night Wolf [black]
@JEM_GG4 ай бұрын
great walkthrough, ty Jack!
@marshall_grant3 ай бұрын
I could see after() maybe as a tidy way to run 3rd party analytics that needs to also run on the server bypassing the 3rd party cookie apocalypse.
@billybest52764 ай бұрын
Another great video. Thanks Jack!
@البراءبنمالك-ر1م4 ай бұрын
Man, it's been awhile since you announced your course and I've been waiting.. How much longer do we gotta wait? :)
@jherr4 ай бұрын
Soon, man. Believe me. I'm right there with yah. Building this thing has been a TON of work.
@yashsolanki0694 ай бұрын
@@jherr i would love to enroll into it but being from india i would like to know if the fees are considering PPP or not? Thanks, looking forward to it.
@semyaza5553 ай бұрын
Thank you Uncle Jack.
@romansernato65264 ай бұрын
just updated a next14 project to the v15 and all works fine even react compiler does
@jherr4 ай бұрын
I'd watch out for the cache changes. If caching was something you needed for perf reasons you'll want to make sure that still works. If caching was more of a hassle, then you should be fine.
@romansernato65264 ай бұрын
@@jherr Hi Jack, right now I have a couple of points temporarily in the 'no-cache' mode, I guess this shouldn't be a problem with the new relaxed caching anyway. One more cool thing is, as you've mentioned, apart from instead of the useFormState now is the useActionState, you can now import isPending directly from the useActionState and there's no need to have the submit button in a separate component along with the useFormStatus altogether, how cool is that?)) Let's now look forward to the turbo for the "build" mode)
@jherr4 ай бұрын
@@romansernato6526 Well spoken my friend! Definitely looking forward to updating my form stuff with useActionState. I'm so, so, so tired of form issues.
@romansernato65264 ай бұрын
@@jherr works like magic now, I personally do not see any reasons why to use anything but server-actions with forms, you can validate it inside the action, return results or validation errors if needed, no more weird stuff on the frontend)
@ilkou4 ай бұрын
u can use react compiler with react 18?!! in the docs they said u have to use 19 !
@jherr4 ай бұрын
Nope. It works with 18. medium.com/@jherr2020/react-compiler-with-react-18-1e39f60ae71a
@ilkou4 ай бұрын
@@jherr this is super cool thank youuu 🙌🏼🙌🏼🙌🏼
@nangquy26683 ай бұрын
About react compiler. I wonder that my exisiting source code had using a lot of memolization, if I want to apply react compiler, should i replace all these memolization function, and react UI framework as well?
@webologixmy4 ай бұрын
After Use Case? is after something like I want the page view field to be incremented. This is really not part of page per say. ???
@jherr4 ай бұрын
Ok. That’s a good case. I haven’t seen a page views thing in a while!
@gerkim30464 ай бұрын
@@jherr also analytics or internal error reporting. the user can already get the response and the server can proceed to report the error or send analytics without the user having to wait
@abhishekvishwakarma90454 ай бұрын
Legends who are still on the next 12, for their production apps 😌 btw what pointers would you consider for someone who wants to upgrade to Next.js 13-14? great video, informative !
@jherr4 ай бұрын
Wait until 15. It won’t be long. That way you don’t have to worry about caching so much.
@prashlovessamosa4 ай бұрын
Thanks Mr Jack I have one request can you make a video on SWR i have seen tweet from Rauch about client and server data fetching Its quite good
@jherr4 ай бұрын
Do you have a specific issue with SWR that you are facing? Generally speaking I look at SWR as kind of a paired-down React-Query. So when I cover RQ I hope that, in a way, folks can translate that into SWR pretty easily.
@grugbrain4 ай бұрын
in the end of the video, you smile then disappear, like a wizard 👻
@AlanDanielx4 ай бұрын
Why?
@shanehoban4 ай бұрын
The after is useful for API routes that can return data to the user, and continue to do perhaps more DB updates etc. or kick off another process. On the FE it's probably not all that useful tbh** edit: Not possible to use after on FE/client side, ignore that.
@jherr4 ай бұрын
Well, if by FE you mean if your NextJS server is just serving the FE and not providing microservices, then I might agree. If you mean on the client, then it doesn't run there, it's server only.
@shanehoban4 ай бұрын
@@jherr Oh that's an oversight on my end, I hadn't tried to use it client side but just thought it might work too for some reason. Ignore that!
@jordymaryns49454 ай бұрын
Just to clarify they do not think Turbopack is ready for production. Only the dev test pass.
@furycorp4 ай бұрын
I stopped using turbo + nx and now go exclusively pnpm workspaces for monorepo and it is so much smoother sailing, updates, less troubleshooting, less to go wrong, no surprises when you update...
@Niko_9934 ай бұрын
Is after() a bit like useEffect for server components?
@jherr4 ай бұрын
Conceptually. In that they run after the initial render. In this case it runs after the page is sent to the client. So there is no opportunity to do more for that particular request.
@Niko_9934 ай бұрын
@@jherr thanks for the clarification! I think there might be rare cases where we use it. Just can't think of any atm
@chibionchainnfts35353 ай бұрын
@@Niko_993 However, you may need to perform tasks such as logging, analytics, and other external system synchronization. the documents shows that
@4v44 ай бұрын
What an informative vid! God bless
@dakheera473 ай бұрын
Hiya. im curious as to why you mention that nextjs servers shouldn't talk back to themselves. from what i understand, something on the frontend using next should be able to talk to an api route defined in the same project. isn't that the whole point of having api routes? the bit i'm referring to is here: 11:50
@jherr3 ай бұрын
Yeah, I'm talking specifically about RSCs on the server talking back to itself. The client hitting the API endpoint is totally fine. RSCs on the server fetching back to the API routes is just time wasted for no gain. In addition there is the added complexity of requiring an absolute URL in the fetch which means that the server code needs to know where it's deployed so it knows whether to hit development or production endpoints. What's better is simply to call the same function in the RSC that the API uses when it handles the GET request.
@dakheera473 ай бұрын
@@jherr ok, yea. That makes a lot more sense. If we're on the server anyway, why not just call the function instead of going through an api route. Thanks very much for your videos, I've learnt lot, and you're the only one doing it in such a no bullshit way. I love it
@LuisBlancoAustin4 ай бұрын
How did get your Mac terminal to look like that? And thanks for all your videos. They are quite informative.
@cooldude30104 ай бұрын
Awesome content as always. But please tell me creating express mini services inside next projects is not about to become the norm! That's giving me the jeepy creepys. :O
@jherr4 ай бұрын
Hahaha. No. I’d use a monorepo for that! 😂
@giuppidev4 ай бұрын
I really appreciate your content, great job! I'm a creator too (for italian buddies): how do you get that cool code highlighter effect in your live coding?
@jherr4 ай бұрын
That's a trick I do in post with Screenflow. The "magic" is that I use a pure black background as my theme. Then I just use their callout mechanism to select the areas that I want highlighted, and everything just ... fades away. FWIW, I use a 55% fade. I got some feedback early on that 75% was too strong and you couldn't see the contextual code. 55% seems to be the sweet spot. Also I have a streamdeck and I've programmed some buttons to add the callouts with the right settings, so nowadays I just scrub to where I want it, press a button, draw a box, shrink or expand it to whatever length I want, then I move on. I've even started depending on it, as I talk I remember that I'll be highlight later so I don't move the mouse or the screen at that point. Which is kinda cool. FWIW, it's really import as a creator to automate/simplify as much as you can. The more you do that the more you'll be willing to do the work later. If the effect is arduous to create you probably won't use it as often as you should. If it's easy to create you'll use it as much as you need. Feel free to reach out personally if you have more questions, I'm always open to support folks that spend their time creating for the community.
@antwansherif4 ай бұрын
I think after could be useful for analytics
@yashsolanki0694 ай бұрын
Hi Jack, just like caching is by default off now. Do you think it would have been a better experience to keep component as Client side rendering by default?
@jherr4 ай бұрын
That's an interesting point. I think that ship has sailed though. I don't think they could make that change and keep backward compatibility.
@yashsolanki0694 ай бұрын
@@jherr you're right. It's already the second version after the introduction from v13 so there is no going back. I'll surely go through some of your videos to get a deeper understanding on this. Thanks, Yash
@Ss-zg3yjАй бұрын
I've encountered multiple issues with broken styles in prod when used Turbo for dev, so not recommend, until they cover 100% for production build.
@StingSting8444 ай бұрын
Great vid papa jack ,👏
@haack794 ай бұрын
i think they say after is good for things that shouldn’t block the response such as logging and metrics?
@jherr4 ай бұрын
Good one!
@chrisr20633 ай бұрын
the boilerplate annoyed the heck out of me too. glad its smaller now.
@joseandkris4 ай бұрын
Great video Jack ❤
@SmoothNanners4 ай бұрын
Can babel-plugin-react-compiler be a dev dependency or is it needed in runtime? Also, do you know if they'll be updating eslint-config-next to support eslint 9 and flat config?
@jherr4 ай бұрын
Wondered that myself. I was going to use -D but then I looked at the docs and they didn't, so I stuck with that. Not sure about eslint, but most likely.
@SmoothNanners4 ай бұрын
@@jherr Just tested a next build with it in and not in dev dependencies, clearing node_modules & "pnpm i -P", and it appears to work and run as expected, as the component render box doesn't appear. I think the babel transformations are likely applied during dev and build compilation, but it's hard to be sure since next build works without other things like react-dom sometimes.
@jherr4 ай бұрын
@@SmoothNanners Cool. Thanks for looking into that.
@saurabh75prakash4 ай бұрын
Must watch for any React dev.
@coder_one4 ай бұрын
Vercel is now like a video game console producer with the rights to an exclusive title: React.js from the Meta inc. And that's disgustingly sad!
@jacquesrosondil4 ай бұрын
When it comes to “meta” tags being “hoisted” into the head, does it differ that much from implementations like react-helmet? In my opinion, the pattern is actually rather complex. It’s in effect a side effect in the DOM you have to manage. It’s easy to create accidental race conditions and leave the title with an incorrect value. It’s how people have been using head content for almost as long as React has existed so it makes sense to adopt it into the core of react. Still feels like the pattern would need some work from a DX perspective.
@jherr4 ай бұрын
It's basically helmet in the core. I don't really see the issue there with complexity. It seems less complex to me. But generateMetadata still works, so just stick with that if you don't like it.
@luongkhovlogs4714 ай бұрын
What command line are you using?
@jherr4 ай бұрын
I use iTerm or Tabby (moving back to iTerm now) with oh-my-zsh and oh-my-posh.
@luongkhovlogs4714 ай бұрын
@@jherr thanks you
@siphamandlambokazi3314 ай бұрын
My God, Jack, I was just wrapping up my e-commerce project on nexjt14, now I need to upgrade😢
@jherr4 ай бұрын
oh-my-posh on Tabby using JetBrains Mono NF at super big sizes. FWIW, I'm moving off of Tabby onto iTerm.
@romansernato65264 ай бұрын
oh boy
@danielratiu43184 ай бұрын
Hmm, not being able to have api only routes in nextjs is not ideal. Why not? If you need some processing stuff to happen you need to invest time learning and maintaining other tech as well.
@jherr4 ай бұрын
API routes are fine. It's calling its own API routes from its own page routes that's the problem. You should just call whatever the API route is calling from the page route. It saves the HTTP negotiation and TCP/IP loopback.
@ashatron6564 ай бұрын
For real, Jack is a low key hottie. More like "Jack Heart-throb-ton" amirite
@ToB1ue4 ай бұрын
If just middleware would not be artificially constrained to the edge runtime…
@ToB1ue4 ай бұрын
…and if if just server actions wouldn’t queue when being called - then I’d be excited for this stuff.
@jherr4 ай бұрын
The server actions qeueing is an odd one. I missed the chance to talk to someone from the React core team about that one. I'm pretty sure it's a core issue since actions are in the core.
@ToB1ue4 ай бұрын
@@jherr Probably. It is just incredibly limiting (and frustrating) at times, so I hope to see those two things changed.
@GurbyTheGreat4 ай бұрын
Vercel can't be trusted
@captainnoyaux4 ай бұрын
Why ?
@underflowexception4 ай бұрын
Breaking changes every other day
@marsahere26214 ай бұрын
Ok
@jherr4 ай бұрын
Except that none of this was really a breaking change unless you relied on the caching. I'm not a shill for Next/Vercel, but "every other day" is a stretch. There are breaking changes. But, in my experience, it hasn't been that terrible.
@simpingsyndrome4 ай бұрын
Now my skill on Next 14 is being deprecated
@bob_kazamakis4 ай бұрын
Ew. Vercel
@RegalWK4 ай бұрын
Great video!
@RegalWK4 ай бұрын
The cache not working as expected on page.tsx is because all page are SSG by default, you have to make them client components or tell them to be dynamic I guess, not sure if bug
@jherr4 ай бұрын
A fetch on pagel.tsx _should_ make it dynamic. It's not doing that right now. So I think there is an issue there. There is also something going on with Tailwind. I think there are a few bugs to work out.