The Truth About Next.js 14
Вставка
- Опубліковано 27 чер 2024
- I didn't feel like making this video but I guess I have to.
Read the full Next 14 blog post, including server actions, partial prerendering, and more: nextjs.org/blog/next-14
Check out my Twitch, Twitter, Discord more at t3.gg
S/O Ph4se0n3 for the awesome edit 🙏 - Наука та технологія
I just hope many young devs aren't using Twitter exclusively to learn. Way too many ill-informed opinions on there. WTF does learning Next 14 even mean? People screaming PHP but can't even tell you what exactly is wrong!
A lot of opinions are emotional, not logical. A lot of the people who hate PHP, Java, etc. have never actually used the languages in a real project.
blame "web gurus" from yt ;)
@@RegalWK there are way too many people who just churn out videos for the sake of it
@@CottidaeSEA I hate Java and i've use it, actually was my first language. Now i really hate it because make people scared or desmotivated about programming because is too hugly with all OOP concepts.
@@oscarljimenez5717 So you hate it just because it's difficult and oop?
Theo, thank you for your relentless effort in making these Next.js videos. I have been learning A LOT about react, CSR & SSR, caching, etc. Your knowledge and dedication to educating junior developers like myself is admirable. Thank you!
Tweeting before reading. I just switched from Vite to Next and learning app router for last two weeks and just opening the docs I can tell not much is changed in my learning curve. Except I needed to remove experimental Server Actions from config file (which is great obviously). Overall I love how they made experience for developer smoother.
Vite what?
Docs are Lava for some guys really. Instead of digging into the concept of a Framework by urself in 2 hours, they rather watch a 8h video where somebody copies code. The docs of next are so good that can get started real fast. some stuff is optional where you should only know it is there so when you need it, you can understand it then.
Theo being able to type on Discord and say "thats the thumbnail" is a power I wish I could one day have
Thanks for the content! A side note, you mentioned that you wanted to make the diagrams before the recording, it actually helped me a lot looking at you creating them, as I thought things were moving. :).
I had to start a project the same day of Next Conf, and did it with Next 14. The turbopack update really seems faster, but what I'm really interested in is the partial prerendering. Also, thanks for the amazing content as always.
Hey Theo. I have seen many people explain all these prerendering methods, but can you do a indepth video with code showing all of them in the devtools to explain why is it better.
Great idea. I vote for this
upvoted, i dont really understand all the differences, specially between this new pre rendering and ISR
Dude, your explanations are legitimately invaluable. These videos are so awesome, it's mind blowing we get this content for free.
All of this sounds great. The Next team is obviously hard at work to produce a better offering. The only bothersome thing I see is that the line between React itself and Next becomes blurrier and blurrier. The RSC way shouldn't need Next "per se". Much like the original SPA doesn't need Node to run and it can be hosted on everything that can serve http/s, the RSCs with all their Suspense glory and "render boundaries" should be only Node dependent (which again, in some more obscure cases is a hard no).
Was so relieved to hear there were no new API changes. If they had done another change as radical as server actions I was getting ready to throw my hands in the air and port my app to HTMX.
I'm thankful you did this video even if you didn't feel like it because your diagrams were very helpful to grasp the concept of what Next.js 14 is going to provide us :)
When I saw this thumbnail I literally cried, this is most beautiful thing I've seen in my entire life, I cannot fathom how much effort you must've put into it, it's so majestic I'm gonna scream your name in bed
Great video, thanks for all the efforts to explain this!! What I can't wrap my head around is how does partial pre-rendering help you when you build your app on localhost (that's the part that is little fuzzy)?? Does the benefits only come into picture when you are caching resources on CDN?
@theo you forgot to mention that "partial prerendering" only works if you can configure it to be cachable by a cdn.
Since the feature is currently only in preview state I doubt it. So lets wait for Nextjs 15.
Great summary. Will static pre-rendering also make edge even faster, or will edge be 100% “dynamic”?
It's a full time job to keep up with this stuff. Thanks for the breakdowns.
Brilliant explanation of partial prerendering! Had an 'aha' moment when seeing the schema demonstrations.
Thanks Theo, get some well deserved rest!
Bumping the version number to 13.6 makes more sense from a version control standpoint.
Node version change counts as breaking change
Releasing a big number makes for a better marketing blog post. I just stick 0.* in front of the version number and breathe into a bag 😂
@@scepta6694 Weird as I don't see major releases from ExpreesJS, KOA, AdonisJS, NestJS, Loopback, Sailjs, Hapi, Meteor or Totaljs. Why is that?
@@SeattleSpursFan1882that’s their choice? Semver is descriptive not prescriptive. You should read release notes regardless.
I love watching a pro present stuff, mad props yo
Good stuff, the presentation style is amazing! Please let me know what that software tool used to write easy to understand notes.
I just learned Next 14 and now I have to learn Next 14.01? Fuck this
The horror. My life is so hard. I need to learn new framework every week!!!! I am so special.
too late, now I have to learn v14.0.2-canary.0
Complexity off all this is wild!
Love the Mimikyu plush in the background
hey, great video. What's the sketch tool you use here? Thanks
Excited for PPR in light of a bi project that could use it sooo much. Shame it doesn't work on Vercel yet, but oh well.
Any plans to make a video on Turbo repo? What are your thoughts on mono repos.
Remix : "Look what they need in order to mimic a faction of my power!"
Can we get the video about cloud architecture behind this? Really interested in whole cdn + streaming thing
If you buy a server in every major region and use it to run nodejs runtime (containerized or bear metal) you won’t have any cold starts and the cost is much less then lambda.(just start with a cheap machine). Edge is much efficient then lambda, but there are questionable benefits vs dedicated server, cause edge networks are still not so wide as we’d wanted and runtime has a lot of restrictions
LOL how about scaling to zero?
it depends on you traffic, if its consistent buy dedicated server or any ec2 if not use lambda or ec2 fargate if you want scalable container
@@lapulapucityrider3227 if you try to use lambdas and compare it to dedicated servers in real life (especially not in AWS) you’d see that even holding servers with no trafic is cheaper than handle one -two traffic spikes on lambda
Well for my 1 User (me) Serverless(maybe Edge → When the 1 Users Travels) Hosting is the best
Hey Theo, would be cool if you could do a video where you show how to test next js app for performance and rendering times using chrome dev tools.
The fullstack isormorphic idea, the semantic version ( not that semantic )...
I'm feeling like I'm alone in mass hysteria, like I just woke up living in a Tim Burton movie...
"use client", "use server"...that's just code smell...Only because people don't want to understand how server side frameworks works...Is that realy bad to install a Nest.js in the project and do some duplicated validations?
I thought nothing could be worst than Wordpress regarding code design subject, but I guess I was wrong...
Next 13 released, now Next 14?!? When will the insanity end? what's next, 15?
Just like with Node, I stick to the even numbers. 16, 18, 20... Same with Next, 12 then 14, then 16 😂 can't trust the odd releases.
Do I understand correctly that if I use an external api, then server actions will be useless for me? Since I can only write a post request in them, and this can be done on the client as well
Never thought there would be a ow2 version type update in programming
But it is actually great
lets do this
do you have any video to discuss should or not using src folder on nextjs?
In regards to the SQL injection concerns, people act like it's not possible to write SQL vulnerabilities in literally any language. If you are even aware of that concern then you should be responsible as an ethical engineer to prevent it from happening, regardless of the language you use. And like was mentioned tagged template literals are probably the most idiomatic way to address this concern in modern JS. But it's not like you couldn't have prevented it using your own string builder even if your didn't have that feature.
Scrolling twitter and Reddit and seeing the replies to next 14 has been wild to say the least. I think it’s a case of the old fashioned boomer vs zoomer where old devs are reluctant to change. I think at this point tho a lot of reactions are just hype train.
Great video!
What application you use for the sketching?
Looks like Excalidraw
Thanks a lot!@@skm12
🎉
Best release eveeeer
When you're so good at clarifying things that you sabotage yourself into having your viewers leave the video after 2:28 minutes ^_^
Here an idea make loading pages ssg. on every request, respond with loading page first and then stream actual page even if page crashed or not.
I really hate Next 14 because I have to relearn a whole new API for everything, Page-router is no longer supported, it opens up for SQL-injections and client React is no longer possible.
I get all my info from grumpy old/junior devs on Reddit and X.
If you aren't parameterizing your queries even if behind a backend API you can also get attacked like this. Not sure it has anything to do with Server Actions.
this is a joke right?
Sorry just realised this was sarcasm hahaha
on top of that, emotion, styled components and MUI don't work anymore =(
Update to next 14 from 13 and my app broke, great issue is with clerk
The thing about the sql injection is. You and other devs might know how to do it securely but there will always be a percentage of devs that will write insecure code
Initial thoughts.. if theres nothing major why did they do a major version release? Hype?
Great explanation
vercel just reinvented PHP😀
I don’t understand why partial pre-rendering is a new feature as it was already present in next 13 (suspense + streaming)
There’s more features under the hood that they plan to announce and my theory it’s more for headless CMS tools and the like
PPR means the page gets built as static HTML with suspense fallbacks, whereas before it was just a lambda. You can't put a lambda on a CDN.
Where can i get the t-shirt your wearing?
So now the form get done in the server side, but how are you doing the client side validation using formik, if the input is invalid, you want to show an error message in the client side
the last update before 14 was 13.5.2 and it significantly improved budling time in dev env but I don't think turbo option make any difference, besides it sometimes breaks hot-refresh :/
I really want to understand the web standards vs the framework patterns, one way we got the RESTful principles like idempotency, URL as state etc and on the other hand we have the frontend evolving into a complex state machine of its own. sync to the source of truth? server? DB? edge? CDN?
Its like a war to build 300 mph trains on tracks that handle 50 at max. Frontends evolving into a full ass native desktop app with a target "install" time of
Upgraded from next 12 to 14 and the only thing to fix was the next Link prop warnings.
There are not security problem, but there are a lot of pattern problem. There is a reason if we develop mvc/mvvc
10:15 ISR = Incremental Static Regeneration
Put sam infront of the server actions presentation as the thumbnail, you'll get instant clicks from the twitter users.
ok but why vercel dashboard is so badly done? there is like 300 skeletons, layout shifts, cold starts... good ui, good flow, but bad ux
What is the name of your diagramming tool?
Does TRPC still worth after server action being stable???
if the component is all server. why do we need to write again 'use server'? this is a really good api but this is tripping me off. is it because they didn't want to change much on the default behavior of shipping Js to the client?
That was an inaccuracy. That component wasn’t a server component. It was a “universal” component. You can do fetch and few other things, but you can’t run client only react logic like “useState” etc.
The marketing power of Next is insane. Reading the comment section it seems so many people are using next despite difficulties in learning. But simpler frameworks like Nuxt barely get as much attention :/. The hype in web development is a problem
Can someone explain - he said towards the end 'pre-rendering makes me hesitant to use Edge' (as opposed to Lambda?) - but he doesn't explain why, does anyone know?
No luck with turbo in any of my repos so far sadly
Next 14 - We would like to announce we are moving away from app router to the new…
/s
Turbopack causes a huge memory leak for me. 100gigs of ram in maybe 2 or 3 minutes.
I reached out about it on discord and I’d expect such an issue to majorly spark interest for the devs but I was told to check if there are any open issues lol
Yet to open an issue myself
@@kearfy well, there are open issues for this stuff already, so you were told right
How can I get a tRPC t-shirt 😭, need it so bad
What is the editor tool in this video?
Next is just PHP now, how we all come around in circles
Turbopack is not stable. No reason to trying to port to it, if it just leads to already reported issues.
What's the name of the drawing/diagram program you use?
Excalidraw
Thanks@@avaterclasher
What app did you use for the notes?
Excalidraw 🎉
Can you make a new video of making some small app like pokemon app, but with App router and all of next next stuff. I think that could help understand the new way of doing things.
Why noone addresses issue with opting out of nextjs fetch() caching.... Its impossible to opt out of that cache. No matter what we use. Lastest API they added in nextjs 14 was unstable_noStore but still doesnt help.. That opting out of cache doesnt work first 30-60 seconds and only after that it starts to work....
already exist a propsal from the Next team for opting out Client cache, i hope it hit soon.
New release but major bugs in 13.4/13.5 preventing projects from upgrading are not adressed. What about fixing all the stuff thats broken instead of steaming on with new features? Some projects are so hughe and heavily invested that migrating from the pages router will never happen.
The "14" is just marketing , it's next 13.6
I'm using nuxt and i'n having a peaceful time here
Please don't make the diagrams before your videos, I like to see the thought process that goes into it because it usually helps me understand the concept you're explaining since I can follow the steps your brain is taking to get to the final concept.
Eyyy tRPC shirt 🎉
nice
They should have just stayed with 13-ish tags, i don't see any significant change to make it 14
This. JS frameworks are fashion houses out this point. This gets the buzz going again as Theo mentioned, there’s nothing new here and clearly Vercel has a thing for attracting coding enthusiasts, not to be conflated with coders.
isnt stable Server actions enough new stuff. Somewhere you need to draw a line
but how to make such partial CND caching in next js? sounds sick for real
PPR generates a static HTML page with holes for the suspended components, filled with their fallbacks. You can cache the static page and then the server only has to dynamically fill in the holes, instead of generating the whole page each time.
Are we just over engineering at this point?
So, no CDN means no advantages ?
the *tRPC* shirt tho
I tried updating to Next 14 and it broke my Prisma/Turborepo setup
I've same opinion as first opinion. People just started to learn and adopting that next.js 13 and the next.js team appeared with new version that includes a lot of unstable stuff. Why are you just do that shit like express, don't do anything until 4-5 year will pass?
bummer, I thought we're going back to client side everything....
Why not comparing with SSG?
when people said they have to learn the next 14 ... I realized how stupid they are I mean, You just go to the documentation and read it, and The syntax doesn't look any different from what it already is.= and if someone doesn't like server actions then ... just don't use it???
React on the server is just such a strech from it original intended use. If react isnt going to be in an SPA, dont use react.
I just don’t understand how people just… Can’t read? Like bro every time I look at a brand there’s a whole changelog.
Why did you, and others talk about server actions in the context of a form action. Thats boring. Server actions can be called by the client. Thats amazing! We’re doing it in our project. No need to write APIs
I love this capability as well, but don’t want to jump in just yet. We’re planning to create a mobile app in the future, so if we convert our API code into server actions, how is the app going to communicate with the server? Unless server actions somehow create documented endpoints as well.
To me, this is an elephant in the room that nobody seems to talk about.
they create actually@@FrankyDeMeyer
you can see in network they're just http endpoints.
How can we cache the app shell in the cdn?
It's just an HTML page with all the suspense fallbacks put in place.
Where's PRIME
Clerk authMiddleware is broken with turbo
wow
Theo you need to hit the gym bro. Great content as always
If no breaking api why not 13.1?
marketing