Next.js 15 Is Here (Vercel Ship Breakdown)
ฝัง
- เผยแพร่เมื่อ 16 มิ.ย. 2024
- Next.js 15 and React 19 are coming in HOT. It's not the biggest release, but it's still a very good one and I'm hyped to talk about it
SOURCES
nextjs.org/blog/next-15-rc
• Vercel Ship 2024 Keyno...
CHAPTERS
00:00 - Intro + Non-Next Features
03:04 - Next.js 15 Features
Check out my Twitch, Twitter, Discord more at t3.gg
S/O Ph4seOn3 for the awesome edit 🙏 - วิทยาศาสตร์และเทคโนโลยี
Whose excited about rewriting their app every 6 months to keep up with their framework's endless experiments and rediscovery of web dev lessons from the early 2000's? NextJS devs!
Angular started the (every 6 months) trend long time ago
Try writing in python 😂😂
React and web dev are some of the most backwards compatible ways to write software
That's why I'm still on next js 11. They have too much time in there hand to over engineer problems which doesn't exist.
At the end of the day, it's just a website. That's it. Maybe a fraction of second of performance improvement - that's it - nothing more. It's not going to increase conversation rate, nor is it going to increase company value.
Major companies still use jQuery and they are working completely fine.
useFromState, useActionState?
@@nejatnjonjono it didn’t, only between versions 1 and 2
All the next14 courses are breaking sweat
i believe the breaking changes would be low compared to the previous versions
@@statuschannel8572 yeah, it is just very recently that I think most instructors have released their next14 courses.
little to no breaking changed changes like the previous ones
Wait ... I'll be dropping a Next 13 course next month!
Can't wait for next js 16 next month
And then Next 17 the day after that.
Yall annoyed or something
@@null_spacex crazy concept, but people don’t have to be annoyed at something to make fun of it. They can make fun of something just for the lols.
@@RubixCubed3 crazy concept, but people don’t have to think or assume something in order to ask a question that insinuates it. The question can be part of the fun that’s being made as well.
@@null_spacex first off I don’t see a quest that was asked, just comments, so I don’t understand why you said ask a question. Second, pretty hypocritical of you to say we assume something when you assumed we were annoyed.
we have React 19 and Nextjs 15 before GTA VI
mental!!
I will get Next.js 17 before GTA VI
😂 crazy world
Horrible default cache behavior burned me worse than you can possibly imagine
I feel ya!
what happened
same. it's like they cared more about time to first render, than caring about showing actual valid content. It took me so long to figure out how to do sign in/out because of the damn cached content showing things as if you were still logged out after logging in.
whatever does not kill you makes you stronger
@@SandraWantsCoke Next made me have awesome abs!
2:39 Another benefit of feature flags on the server is no cumulative layout shift while waiting for a client-side flag to be processed
10000 times this. We use client-side feature flags loaded async ( thanks management (: ) and it's ATROCIOUS with the layout shifting a bunch of times, spinners that lead to nothing ( the component it's waiting for is disabled by a feature flag :D ), a mess
Hell yes!
6:40 - I have to disagree on that. We faced numerous security issues with next-auth and Next's Link component that forces caching. No, I *don't* want to cache the Link. I want everything that user does go through my security middleware. If I change a user permission to not allow a specific route I *don't* want this route to be cached for 30 seconds, I want the user to be redirected to the Forbidden page immediately. This was a valid security concern and finally they saw the light. If I want caching on something, make it opt-in, via an attribute and/or something on a Layout level.
Your use case is niche and it's not like you can't disable that behavior. I wouldn't consider this point an issue
@@aberbaCodesAuth and guarded routes are niche now? Give us a break shill
@@aberbaCodes how is basic authorization a niche?
@@Y-JA what he is doing is a guarded/authenticated route that needs to be administered dynamically and take effect immediately... he's saying 30 seconds is too long. His own words. You can set or disable this behavior in the config. Doesn't take 5 seconds and it's definitely not a security issue.
Very few RBAC apps do that and it's mostly a multi-user enterprise feature.
@@aberbaCodesright? What is even a valid, common use case when you need to invalidate the auth route cache in less than 30s ?
They deleted the entire framework?
Lmao
I think the same.
They just repaired this
Sounds like it
"We deleted the bad parts" - Thumbnail (fake tweet)
Nextjs and Vercel are showing us the exact reason sales, product and design are in charge of business decisions and engineers are given clear goals they have to achieve. Engineers have too many smart ideas and love over engineering and over explaining things.
In 8 years we've gone through 15 versions, for a framework that is a hell of a lot of breaking changes. It seems like they don't even believe this is a good way to build frontends.
Surely there are alternatives. What are your favorites?
@@adtc that's a good question. I do still like writing react. I just don't think I will use nextjs for a new project again, I still have one live project using it. Since then I've used laravel livewire, phoenix liveview, astro and one small project using using vanilla js and html templates with gos standard library, I think all of them can be considered more stable.
The backend first approach makes deployment so much easier.
@@adtc Nuxt. It just works
Solid start is also out :) Solid T3?
The number of problems I had when first starting with Next that eventually turned out to be caused by caching is mind blowing. Glad they're changing it but it was long overdue.
I actually love the WAF addition. Some clients couldn't switch to Cloudfare, so we are so excited we finally can manage traffic with the Vercel WAF
9:20 bruhhhhh
30-second stale time on navigation, just found out last week.
Mann, how many hours did i waste to debug it?
What are your thoughts on mixing SST (Ion) aka Dax + Team, and Vercel? i.e. deploying AWS SQS, Event Bridge, Step Functions, and OpenNext, etc. This release clearly makes OpenNext outdated.
My initial reaction is I would want to still use SST for deploying other AWS infrastructure but then use Vercel for my tRPC API + Next web apps.
Turbo getting better? Sign me up
QUESTION: Does "Request Memoization" still work automatically in Next.js 15 or we have to manually wire that now? (There's absolutely no clarity on this in the RC announcement about caching.)
I'm always wondering if next js is stupid or I am too stupid for next js 😂
Okay. so how's the developer experience for any of you right now using next? I've stopped using it a while ago, because I found it a mess with random caching and all the new stuff that's was coming in for the past couple of years. Like I have no idea how most of the stuff works behind the scenes, so I've went back to angular what I've enjoyed doing the most. Any tips what to look into/learn in next? Is it even worth it?
What browser do you use?
Im so excited for Next.js 18 next month
"Ignores your package.json and loads whatever it needs". Great, now I'm going to have nightmares tonight.
Great video, Theo! ❤
When will React 19 get released?
Turbopack still doesn’t work on my project
Come on! I've just begun learning Next 14 and the 15th will be coming soon. 🤦🏻♂️ I'm afraid when I learn 15th, the 16th version will come out. 😂
I saw the thumbnail and I just came to ask if they deleted react from nextjs?
I’m going to bookmark that video for when I have trouble falling asleep
🤣
how can you change the feature flags? Because to change it you need to post and the server won't allow you to modify the db
Are they experienced enough?
12:51, “one of the lubie's first big contributions” - sounds funny when you are a Pole knowing that “lubieowoce” nickname means “I like fruits” 😄
Finally seeing Theo in a T-Shirt
The situation is that bad when Theo has to record an emergency video wearing whatever he woke up in.
theo please where did u get that shirt
18:16 - Did you watch the video on Primeagen's channel? Are we really still debating this "because we know better" attitude from Vercel?
I understand video sponsorship disclaimers but I don’t always understand when TH-camrs say I’m not sponsored; this is my honest opinion.
I’m usually confused because sponsored or not I expect the honest opinion.
When a TH-camr is sponsored, there's a contract that prevents them from saying things that the sponsor doesn't want the public to know. (In short, an NDA is signed.) It doesn't matter if it's the truth or honest opinion. The sponsor will have the right to review and edit the video before it is published.
theo tell everyone thhat next 13 to 15 is going to be BREAKING CHANGE
How does it compare to SvelteKit?
8:04 “a walkback of the things that were way to aggressive” - maybe, but I’m still picking up this we know best attitude from that video. Which is concerning
Theo you pushed the edge runtime really hard for very good reasons (cold starts) and now you “hate” it!
I don’t get it. We always knew it was a limited runtime with some strict limitations. Why all of a sudden vercel and you “hate” it ?
Flavor of the month syndrome. Front-end is a cesspool..
I really hope that vercel fix the exit animation with the app router. It's been years.
5:10 a bit of cursed knowledge, you can also opt out with "use no memo" (this is not a joke)
Caching the GET is just the HTTP default in a way.
6:22 Yes, the problem is, there is no way to inspect what is currently cached for how long. Yes, there are logs, but they only show you info after the cache change already happened so to speak.
We desperately need cache dev tools
You can create a custom cache handler and tell NextJS to use that. It's something you have to do anyway when self-hosting in a distributed env (and it's a major pain in the butt, too). It's pretty easy to add dev tools to it at that point. There's even an official example that uses Redis as the shared cache, and it comes with devtools - you can see what's in the cache and how revalidating a tag affects this. So you can actually add devtools to the cache, someone just has to make a package for it. Sadly, it would not be universal, but at least it would work in the general case of in-memory cache in single instance dev mode.
I kinda left the react/web dev world for 2 years because of studies, and everything has changed.
Anybody got some points (very brief) I should look at to catch up? I am making a comeback.
Looking at the replies and researching a bit, turns out nothing much of value has happened (except I guess server components).
PS: I already knew good to advance react, familiar with backends, and had dwindled with svelte when I left. Only changes I see is we are using drizzle instead of prisma now, and react server components are finally stable (they were unstable and not used when I left).
I think watch theo's 0 to prod video
Or the most recent app router video
@@starnumber_alt thank you, it looks to be a very good starting point.
@@ciarancurley5482 thank you!
We do work on need to basis anyway
Last year I started using nextjs in nextjs 13 version, and have to be updated for every minor updates due to nextjs 13 and 14 errors, now we have nextjs 15, lets rewrite again
Ohhhh, the feature flag thing was an advertisement.
I tried PPR not ready yet!
Between what remix's vision is for RSC and ease of use of vite, I would recommend to keep using vite for your react projects with csr for now. And when the new updates for remix drops, keep swapping them with RSC gradually.
NextJs at it's current stage feels too experimental. If you're using pages router, that's fine though.
Huge.
Very hyped, exciting times, less gu
So who is going to make the chrome extension to control Twitch feature flags lmao
These guys invented a tool to solve not existing problems. And they have released the 15th version to fix a tool that solves not existing problems.
edgy
seo.
Finally, next caching was troubling when I used Sanity, I had to revalidate to solve this.
What is that web browser??
arc
is the new router (app folder) still beta?
According to Vercel it's not, it's stable, but sure enough some features (you could say, "advanced features") don't work.
@@srymisclick oh great thank you
I hate I'm still using NextJS 12 patterns at my job :(
We're fucking spinning up an EC2 to run NextJS, I feel miserable
Uhh I dig "after" :)
i just started learning next js 14😢
Same😭 Lord have mercy lol
I really thought that Pages Router would eventually be phased out tbh.
I doubt that. The app router has so many inadequacies by its very nature that pages router will still relevant.
lubieowoce - "I like fruits"
Can you react to the new Hasura v3? I think they fixed a lot of issues and it's great now
I think you will be more happy just using WordPress as your backend. LoL
I'm dying 💀
*Ship just happened.* 🗿
13:10 hmm who comes up with these API names? They called it "after". after what exactly? Why can't a function have a descriptive name so that I don't have to go into docs to see what it means. I would like to understand it at a glance immediately when seeing it. Could have named it "runAfterReturn", "runAfterResponse" or something. "after" is just so ambigious and generic. Same with "cache", "dynamic" etc. "cache" also has a problem being named the same as "cache" from React. "waitUntil" is also up there with those. wait until what?
I feel like they have an obsession coming up with shortest names possible for no reason.
Evan you can solo them
At this point just use angular, its gr8 now and i dont need to reerite it each semester
It is NEXT, nextJS or Next.js??? I am so confused
NextJs, ReactJs, VueJs, ExpressJs. In pascal case
@@chisomprince5345 it's truly incredible how you not only got the OP's question wrong, but also managed to misspell every other library name you mentioned.
Next.js, React, Vue.js, Express. This is the right way.
NestJS
Dawm Next has gotten complicated but exciting at the same time
I like changes but if these changes mean I need to learn a complete different way of thinking such as app v pages router then I'm leaving the train.
Cool t shirt
Imagine something working in development and not in production. Its pure evil how do you even think its good idea???
Bundler behaviors are fundamentally different in dev and prod builds. Tools like Vite use entirely different bundlers in dev (ESBuild) and prod (Rollup), this is somewhat common practice.
This is not a problem and not new, even React itself has two different bundle types: one for production(production mode) and the other for development, why do we do it? Because we want to have better React dev tooling while we are creating a new feature, in production we don't need to use that.
Wow
bro
Fix awful caching system vercel
Keep watching, you should be excited :)
I want to build a framework and name it fucknext
turbo causes upload thing of all things to fail
Dude instead of reinventing concepts every 4 months and leaving 3 paragraphs in the documentation and leave for vacation for the next 8 months can we have proper ways to work with client and server components and functions together sithout having to split yourself in 12?? Like wtf are they even working on? How are we at next15 already but i still cant use a server action in a form using a simple way/method. I like next its what i decided to move foward with but man its management makes me mad.
skill issue
SvelteKit is complete come have a try and escape this drama
Doesn't Sveltekit still have to integrate Svelte 5 features like runes and stuff? I feel like there are going to be some big changes in the next version. (I'm a Sveltekit fan btw)
It did take 5 seconds to understand what "breakdown" means here
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!
Hydration errors :O
No more "app" router. Use zapp router. Use laravel actions, ssr? No, use ssm,mmr,ssg,abc,lpg.
So they finally caught up with Nuxt… nice
I left at next 13. :)
caching is hard
This video is NOT sponsored, but I bet Theo would like to continue working with Vercel.
And even if he's not, it would be bizarre to say now, "I'm not being paid, so Next.js is an unmaintainable pile of shit."
So, why does it matter then?
Or this is a way to say that the other paid videos were just a way to feed shit into the audience's ears?
Man i hate this, they change next every few months and its always breaking changes. Wtf man
Next 16 going out next week, can't wait. I'm trying to convince my grandpa's team to switch front end to NextJS, but this make it more and more seem like a toy than an usable dev environment, can't they just do a LTS version like Ubuntu does? Because it's ridiculous to keep up at this rate. I've a client project that I started with 13.4 a few months ago and it is already out-of-date, by 2 major version?! I know and understand that the update should be fairly easy, but nonetheless makes it seems like you have to be aware of what they do every single week, I try to build shit, please get out of my way! It was the first promise of Next and it's not true anymore.
This is crazy, I recommend you hire someone else to do updates haha, so you can deploy new features, but for me, Next.js seems like a toy framework, but you know people say if you don't use it you will create your own framework, I did my own "framework" multiple times back in the days with React, you know in order to update it, it was super simple, few libs = less update, like why it would be so hard to add React + libraries you need, instead of adding an entire framework.
wink wink
Say feature flags are “insecure” is a reach.
It's an ad
😅Gotta stop with this "peace nerds", man! we love u no disrespect.
Caching is hard 😐
I love woman juices , also ur face is quite funny bro :)
Laravel > Next
But not SPA, it's awful if using livewire for SPA
@@ilahazs oh yes definitely, I agree 100%
Next just copied laravel let's be honest
Different frameworks for different use cases. I use Next.js mostly for frontend and don't care about most of its backend "capabilities" except server side rendering sometimes.
@@ilahazs from V3 it has changed and improved a lot and Filament is something most devs can dream for
At this point lavaral, regular react and sveltekit looking sweet. We are sick of next.js
I haven't even watched it yet. Still having the ads, but what the heck... Next 14 hasn't lasted long
14 had no new APIs, and 15's are mostly experimental. Almost any app built on 12 or higher should be able to upgrade just by bumping versions :)
@@t3dotgg I ain't complaining. Until I don't have to go back to Symfony or Django I am a happy monkey thanks to Next.
Use remix, you won’t regret it
Vercel could not even create decent docs for nextjs
They couldn’t get it right the first 14 times? Joke framework
The app router was a mistake
why?
@@kkebobecause he says so 🤣
Don't do dark content.
It looks like me doing this podcast, as I see myself in the monitor
Everyone complained about me charging for dark mode, now you're complaining I gave it out for free? smh
@@t3dotgg good point lol