Next.js 13… this changes everything
ฝัง
- เผยแพร่เมื่อ 25 ต.ค. 2022
- Next.js version 13 was announced yesterday and it brings huge changes to the framework. They collaborated directly with the React team to create the ultimate web framework and a new webpack replacement built with Rust... let's take a first look.
#javascript #tech #TheCodeReport
💬 Chat with Me on Discord
/ discord
🔗 Resources
Next 13 Announcement nextjs.org/blog/next-13
Turbopack Announcement vercel.com/blog/turbopack
Next.js Full Course fireship.io/courses/react-nex...
Next in 100 Seconds • Next.js in 100 Seconds...
🔥 Get More Content - Upgrade to PRO
Upgrade at fireship.io/pro
Use code YT25 for 25% off PRO access
🎨 My Editor Settings
- Atom One Dark
- vscode-icons
- Fira Code Font
🔖 Topics Covered
- What changed in Next.js 13?
- Should I upgrade to Next 13?
- Next.js vs Remix
- Next.js vs Nuxt
- Vite vs Turbopack
- Replacing webpack with Turbopack - วิทยาศาสตร์และเทคโนโลยี
It was a 1:1 copy of an Apple keynote. They even used the silly ' the XYZ you know and love' that Apple always overuses.
Remix users being the Android users in that context.
... One more thing!
You've to rewrite everything.
Yeah all these startups and even a bunch of large companies (ex Nvidia) have been copying the Apple keynote format for years. But Vercel ain't Apple, so why not be a little more humble for once?
yeah, don't you just love how companies tell you that you love their products? makes life so much easier, just sit back and consume what'e given 🤷
Yeah it's annoying
In NextJS 14, each component will be directory based and each html tag will get its own file.
U will never have to write `import` again... rails PTSD kicking in
@@uselessandempty rails is great though
bro u dont even code
By the time TurboPack is ready for production, Vite team will drop their version 4.20 with cutting edge technology providing a blazingly fast build speed which is (said by themselves) 69x times faster than TurboPack. I'm calling that!
The packaging tool war begins....
vite uses golang. Turbopack is probably faster only because it is using rust but at the expense of more complexity in the code. It will be good if they manage to finish it properly
@@EugeneBuvard Vite can switch to turbopack from esbuild though, they uses it because its fast enough for many cases
Evan you said they could add SWC to vite but it results in 58MB more bloat…. Which they don’t want, but react devs, they want the bloat
Evan You (creator of Vite, Vue) is just awesome man.
Personally I think the constant release of "groundbreaking solutions" is more of a testament to the sea of self-inflicted problems in web development.
Agreed,see u at the stake 😉
Underrated comment; truth.
I agree 1000%
Why would you say that? Literally every new solution has taken pieces of the previous solution or the previous solution had a specific use case where it is more advantageous to use than the new solution. We're literally back full circle with server side rendering and trying to keep as much JS out of the client as possible yet we're using pieces of every previous solution to make something FAR superior in terms of DX, UX, security, and performance. In fact, I don't remember the majority of the JS userbase "reverting" back to a previous solution without taking something new with them ever. The JS ecosystem just moves vastly more fast because it is built DIRECTLY on top of open source, it's the only native programming language to the browser (the application that runs the internet and we will only be moving further and further into the web and out of the desktop and localized software), it has a massive amount of free or cheap educational content with a large number of educators being highly successful, etc. etc. There's no other language out there that will ever be able to compete with the sheer quantity of JS developers out there. Most other languages revolve around proprietary code that will never be shared and built on top of along with only having a small fraction of the # of devs that JS has.
Yeah fuck these groundbreaking solutions. Quick question: How many decent-sized web apps have you built with vanilla JS? And how long did it take you?
Yeah okay. Javascript devs will never go out of jobs even when AI is ruling everything else, because the unemployed humans will be spitting out new JS frameworks and major changes every day. So yeah keep doing this shit.
everytime i see a new JS framework released every few months i feel lile shooting myself
@@sneezingcat6221 there are programming jobs outside of web/JS hell.
@@lawrencemanning Like?
@@DoctorSoulis everything from embedded to (desktop) games. I’ve spent the last 25 years of my life programming for a living and don’t (yet) know a thing about JS. I plan to keep it that way for as long as possible. 😊
I much prefer to work on my "mathematical proofs for veryfing computer programs with Coq" than to enter the JS hell.
I literally was just researching nested layouts in NextJS like crazy and was amazed at how they weren’t implemented. Thankfully we finally have a real solution
You can just use remix js
Remix has a way better solution, react router > next router
@@santhosh3374 Have yet to try remix. Will have to give it a try
You can do nested layouts already without Next13
@@nonstopper what’s in your opinion worse? I’m my view seems like the getLayout is actually a better solution because it’s injectable at the component page level so your nested layouts are not tied to the route and it’s children.
My heart goes out to front-end web developers. Good luck!
thanks bro :')
animated Box With CSS
th-cam.com/video/gBmx3RmThDE/w-d-xo.html
Hahaha... this is an epic comment.
Yeah... thanks bro :')
Why anyone would go into this mind-numbing field at this point is beyond me.
@@WhatIsThis-zq4hk Wait until you have to work with Salesforce. Literally Torture Chair
Just a week back completed my website using next 12.3.
After seeing I was excited to migrate my project, but little did I know the differences in components, filestructure etc in 12.3 and 13.
It was like a mini hell, almost all component started to break.
At last I stuck to next 12.3
Yo, next 13 is not production ready I think
@@IAmOxidised7525 oh thanks for the info
I was carried away by the launch.
Glad I procrastinated on building my next personal site
If it works don't try to improve it
I had made half of my site in next. Got bored of react so switched to astro + svelte lol.
This is literally the response to sveltekit
- Vite -> turbopack
- same routing system without (+)
- same way of data fetching just returning data
Still missing some stuff like stores and modules, which I consider much better than useContext, but
this is just amazing!
I was just searching today for a video of yours about next 13, so I watched the one about next 12 a couple of times. You make awesome videos! Keep it up!
animated Box With CSS
th-cam.com/video/gBmx3RmThDE/w-d-xo.html
There should be an AI that can automatically refactor a framework to the next version
It’s not AI because that would be unnecessary but vercel already provides codemod scripts for migration in some cases
With the amout of refactoring there's been, there might be a way to make an algorithm that does that
"All is fair in love and MIT Licence code"
Made my day
License*
@@JorgetePanete both are valid
@@dipanjanghosal1662 No, it depends
License is, in UK English, a verb.
In US English, it's both noun and verb.
Licence is, in UK English, a noun.
It doesn't exist in US English
@@StellaEFZ that's what I said. Both are valid. The TH-cam comments section isn't only for US.
@@dipanjanghosal1662 No, they're two different languages, you don't speak japanese while writing portuguese
I use SvelteKit in production because I'm a crazy bastard so a lot of these Next 13 changes are veeerrryyy familiar! They're even making the exact same switch to directory-based routing SvelteKit did a few months ago. Seems like developing in React is going to get a lot smoother! But I still prefer SvelteKit. No VDOM is very attractive since I often have to deal with third party web components. It's compiled so it's more opinionated but I like the opinions of the Svelte team. All these fancy tools are making JS dev a dream! The future is bright!
Not to metion that the best thing about using SvelteKit is being able to say you use SvelteKit
I totally agree. I think it's heavily inspired by SvelteKit and Rich Harris that convenient is working at Vercel. But nice to see next going this way.
Now hopefully SvelteKit can start maturing. Especially much needed packages like Sveltekit Auth. Tons of OS projects that are trying to tackle it right now, but there’s no go to yet (for me at least).
@@rawallon I use Sveltekit btw
@@ChrisJaydenBeats lucia-sveltekit is a very promising package in early development
Perfectly timed as always, was looking at the new docs just this morning
Where is new documentation?
animated Box With CSS
th-cam.com/video/gBmx3RmThDE/w-d-xo.html
I like how nuanced you present the changes and give props to the people in the community.
animated Box With CSS
th-cam.com/video/gBmx3RmThDE/w-d-xo.html
Next vid python 3.11… this changes everything
Also on how rust 1.64 and dotnet 7 changes everything
Still slow 🥲
I'd be more thrilled by this tbh
Except it doesn’t tho
Waiting for covering Node.js 18 LTS
Amazing how the conf was yesterday and you already have the knowledge well known to be able to guide us through the Next 13
animated Box With CSS
th-cam.com/video/gBmx3RmThDE/w-d-xo.html
The structure of routes being folders, files for page, error, etc. looks reeeally similar to SvelteKit
And really similar to PHP.
@@VictorSamuelMosqueraArtamonov going back to the root but type safe
I think you're talking about PHP 6 years ago.
They stated it took inspiration from SvelteKit, which is also kind of a Vercel product now with Rich Harris working on it and Svelte full-time
@@sleekism It isn't a Vercel product. It's an open-sourced project with zero influence from Vercel. Rich Harris (creator of Svelte) clarified this earilier.
Thank you for doing this!
And thank god for your channel, always top notch quality!
this is why I keep to backend where there is never any gamechanging updates
Not gonna lie, I was struggling to understand the concepts of Next13 after watching the conference, but this made everything make waaaaaaaaay more sense. I'm actually kind of excited for it now.
animated Box With CSS
th-cam.com/video/gBmx3RmThDE/w-d-xo.html
Many things in the video didn't make sense to me. But I don't know react or next. I usually work with Vue and nuxt. Maybe I just never had the problems next had with that frameworks. I don't know.
Well the thing is when someone chooses to become a developer it's just a matter of time before they learn how fastly-evolving this field is, so as long as the changes are there for good, I for one have no problems with them.
great video as always, thanks for summing up a 1 hour video into 6 minutes :)
Correction, a *front-end* developer.
animated Box With CSS
th-cam.com/video/gBmx3RmThDE/w-d-xo.html
I agree, as long as the changes are there for good once added, I welcome them mostly. Sadly it's quite hard in reality, I mean they released ISR in Next 12 something and already kinda deprecated it in the next (pun intended) major version.
@@KimSkogsmo I do agree with you, I think that they should've been more consistent to their concepts implemented.
But I have to say that this looks like an improvement in the long run. Having all of those concepts like SSR, ISR, ans SSG was quite... overwhelming for people trying to get into it.
Nevertheless, they're going to be required for some time for any Next.js developer, but probably going to be totally deprecated in two or three years.
As one comment said, I'm in favor of change as long as it is a "good" change.
Thanks Jeff, I commented in the general chat on Slack yesterday to see if anyone was attending the conference but no one responded. The main feature I was most excited about is the new data fetching capabilities. I always found myself in between a rock and a hard place determining between using getStaticProps or getServerSideProps or using the former with Incremental Static Regeneration. It appears that I will no longer have to worry about this with the latest version of Next.
Thanks for always keeping us up to date
I feel like I woke up in 2010 and stumbled in to a Rails hype fest conference
This ...
Software development isn't about making websites in a simple way, but about making Rube Goldberg machines that display websites as a side effect.
Literally why I left the field. It’s a nightmare.
Thanks for including the parcel mention here, saw Devon's tweet and think it's important to credit where their inspiration probably came from
I love your channel more and more
As im continuing my beginners part of learning to code and building some test projects it is also starteing to make some sense.
I'm thinking about saving up for the lifetime pro subscription on fireship
Specially the new routing design reminds me of sveltekit, which is not weird since sveltekit is being supported by vercel. I like what they are doing :)
1:37 that's what I immediately thought hearing the previous statement. 10x faster than Vite doesn't sound like that big of a deal when it's already fast enough. I'd rather not make that trade when it adds more extra work.
Was eagerly waiting for this 🔥
Just found your channel. Love your Easter eggs... plane and simple
They finally did it, nested routing with layouts. Now I can finally start a project in next.js
Wait that was stoping you? Why? You could have just nested layout components haha
@@Fernando-ry5qt would they have been BLAZINGLY FLAST ™ though?
@@berrywarmer11 you win
i want to learn JS framework but each week you make a video that makes me wait to see what else will be available
New Rust Frameworks™
i belive with that mindset you'll be waiting for a long time and you won't learn anything in the meantime.
just start learning something it doesn't matter that it won't be the most new thing in a couple months.
don't waste your time like i did
best of luck to you
Why would you WANT to join this roller coaster?
@@suri5023 Svelte framework interests me, looks more friendly. // I agree, just dive in into something and see what happens
Just learn Javascript, don't focus on a framework. They'll all make sense if you're comfortable in JS.
Excellent video!
Is the expected link to your new Beyond Fireship channel missing from the text blurb below the video, or did I miss it?
Either way, I found it & subscribed, and am looking forwards to your Next.js 13 tutorials over there!
Thanks for the video and see you in the next one.
Can always count on Fireship to remind me of how little I know as a 1.5 year old self-taught developer :")
Same, except as a 26 years experience dev. You’ll never know it all.
@@meganaut5294 ^yeah kinda feels as if you learn something and by the time you feel comfortable using it ist obsolete ^^ I love being a developer.....
lol I was about to say... i'm out here with 10 years of messing around in web technologies and i feel like every month I see some younglin' come up with a hot new catchy name framework. such is life
pretty impressive to be a developer at only 1.5 years old
@@coconutflour9868 kids these days...
This is why I never got into IT professionally - the constant need to learn the "next best thing" rather than having the ability to actually master your tools.
Only frontend web dev changes so rapidly
It's bad when it comes to front-end, but even in front-end tons of companies will default to the standards rather than chase the shiny new thing. Outside of that it's much more stable. You might want to reconsider ;)
you don't
most projects use something more stable and battle-tested, that will allow to do any request from the customer
cause you can't really say: "Hey, this app doesn't work as you wanted, but we are waiting on shitty_useless_after_two_days_framework v.14.5+ to solve this"
or "we can't find any developer that knows blazingly_fast_and_two_years_learning_curve++, so we can't hire anyone for 6 months"
or "we just need 2,5M $ and two years to rewrite our current project, so we can test out these new and very important (for 1% of people) features"
Thanks for the replies all. Yes, I guess it's easy to watch all these videos and develop the misconception that every project is built in the latest whiz-bang framework. Pleased to hear that devs are focusing on reliability over novelty.
@@ihate4chan Actually, other parts changed even faster. Going from monoliths and MYSQL deployed in my mother's basement to microservices with distributed databases, sagas, event sourcing, event streaming and billion other patterns, hosted on EKS in span of 6 years is not a change at all, I must be dreaming.
feels good to watch your videos.. after banging my head with Typescript :)
Very cool that you included the Goliath at 0:30. I went to that theme park this summer!
News of the year:
Now you can make routes by putting files in folders!
Just like the web used to work for 20 yreas! :D
Web3 == Web1
Web3 is just a buzzword, and this isn’t even Web3
Double equal? Really? Jk
awesome, now we gonna get even more 'index' like files throughout the codebase xD
Thanx I'm searching for this 😁
I'm very happy when I get notified that there is a new video from fireship
I feel like this is a change that you'd never adopt over Remix or similar frameworks.
Next's strength is its huge community and solidity in the industry, you know it's not the best but someone would have done what you want to do before and you'd likely be able to find their code.
Pick a much leaner framework if you want this DX
Awesome! A couple more versions, and this may barely touch Svelte.
Great content!!
Old Projects: I'm going to pretend there isn't an update!
New Project: Come baby, light my fire!
Hey Jeff, could you do a video explaining the Nim programming language in 100 seconds please?
animated Box With CSS
th-cam.com/video/gBmx3RmThDE/w-d-xo.html
@@weakspirit_ the only time he mentioned it was in the programming iceberg video, but I think it's cool enough to be covered in a video of it's own
2:33 New file system routing is very similar to "new" sveltekit api. I personally like Sveltekit more though.
Svelte takes a GIANT SHIT on all other frameworks.
well done! I'll keep using remix.
6 minutes.
👏👏👏
6 minutes is all it took to clear these concepts, you're a great teacher! thank you!!
Whenever I hear Blazingly Fast , ThePrimeagen immediately pops into my heads
bro, that was the best next release until now, amazing, been waiting so long
Yep the same thing i thought the moment I saw the new features. Most of them were already implemented in Remix, Next is trying to catch up
thanks for the report Jeff!
Wait, Vue and Nuxt don't already do this stuff about years from now?
It continues to amaze me how JavaScript guys just keep reinventing basically PHP 😂
I know Javascript, Python, C++, some Rust, some Go, some Java and some PHP and I'd say that PHP is by far the worst language. No static types whatsoever.
great video !!
Can't wait for the full 13 tutorial
It took me 18 minutes to watch your video because my slow brain had to stop, replay, and digest everything you said. But I wouldn’t have it any other way. Thanks for the overview!
kwanai blaz 😒
5:17 sounds fun. I guess I am going to learn it after a year which until majority of people move on and I will never gonna migrate it with current project.
Now this brings the outro … will see you on the NEXT one to a whole new level ! Good summary of the keynote definitely killed this one 💀
would love to get some peoples opinions on this, Im a react front end developer with a bit of experience with firebase, node js/mongodb/express/mongoose and i have worked a bit with nextjs 12, it seems to me that with these new features, i should make projects with nextjs 13 instead of really anything else?
anyone else enjoy every second of these vids but then automatically go "I guess vanilla old school javascript it is!..." LOL
I wish for the vanilla old school but with component system to help reuse "widgets"
@@fltfathin that's what old school copy and paste is for
@@fltfathin try Lit.
Excited for new next tutorial sir! 🙇
Exciting! Better explanation than the official presentation from Vercel. Guess I will wait for a few updates until mutation is easier
Isn't sveltekit already has the layout and +page.svelte thing. Also sveltekit has the similar data fetching by exporting load function in the +page.svelte page
Web Developers: It's the end of Vite
Evan you: If this proves to be the shit, we replace rollup for turbopack
Parcel: I've been the GOD for a long time kidos
Thanks, keep on reporting!
I guess it was different 10 months ago but writing api routes in app directory is there and its easy to use which is what sold me on next the most. You can create a fullstack app now easily with just next
as someone who is learning react , I would really appreciate a focused front/fullstack roadmap with the most needed technologies.
@@justinsalcedo2678 looks like a keyword dump on a 40-page Indian developer resume.
@@vapeurdepisse lmao so true
@@vapeurdepisse Not gonna lie, it may look like a keywords pool. But it's useful when you don't know where to start from as a beginner
@@justinsalcedo2678 jesus christ my ADHD can't even look at that website for more than 3 seconds.
“Focused roadmap” and JavaScript don’t go together
I was just thinking this morning that it had been a little too long since the last game-changing JS framework. Its been almost a week 😅
Good video. Thanks.
I do you make all these amazing videos that rapidly? you are really one man army!
Nuxt 3 vs Next 13 would be awesome!
Yea...this is why I love Angular being a one-stop-shop for basically everything.
I’m from Vancouver and I love that you used the riot photo 😂
Great video!
How about a video on Backend development in 100 sec
Node is starting to look like something worth my time. I prefer frameworks like Django and Flutter. Seeing things move toward improving the developer experience is nice. I can't tell you how many times I run into something in a framework that requires way more effort than it should take.
I started out my dev journey with Django and soon realised there are very less jobs compared MERN. Spent 6 months learning MERN stack
I see so many similarities with old php frameworks
Full circle i guess
We need a course on this ASAP 😁
We need Next.js 14 update
It's been 0 days since a new js framework has been created.
Fireship is the most entertaining yet educative creator out there, lmao, like the videos are actually that addicting.
I can't wait to change my whole next.js 12 project. For real for real.. but this update really awesome. It could improve most of pain points in previous development environment.
All these JS frameworks claim to solve problems, but they don't solve the biggest problem of all: too many JS frameworks
Hold on, I'm working on a JS framework for that!
@@ba8e whatever. Just don’t call it “bLaZiNg FaSt”
I have been using Angular for over 4 years. I keep seeing new JS frameworks and stack an average of 6 months. I never learn any. I am still learning angular.
"I fear not the man who has practiced 10,000 kicks once, but I fear the man who has practiced one kick 10,000 times."
Bruce Lee
Good luck on your next job search / job.
If the only tool you have is a hammer, it is tempting to treat everything as if it were a nail
Maslow
Am glad that I learnt next js, it's the future of react and fireship is our time travelling mentor!
I was going through their v13 blog and couldn't understand anything. This video helped.
So thats what came next. I just wish the framework was more reactive
I don't have much experience in Javascript and Next.js in general. I like the idea of the new file structure, but having hundreds of loading.js and page.js files makes see developer experience even worse.
I would imagine you would be able to declare global components where you can just import them…
Yes, that was one of the concerns on the RFC. If you prefer I think you can still use the previous "pages" system (without the ability to co-locate other components and assets).
It's not a problem in any decent IDE. VS Code, for example, shows you the folder name in the tab's label if you have multiple tabs with the same filename. I've been using this file structure for ages and haven't had any problem with it.
I was about to say that it sounded like they added remix like features, then you bet me 2 it in your own vid haha. Sounds like some nice changes.
I'll still stay with remix for now though.
that meme at 5:27 way too relatable
OPTIONS API FOR LIFE
"This changes everything"
... like every year of web dev. Again and again. :')
The constantly changing landscape of Javascript makes me glad I use Django
Yup. Its the exact reason I switched to Python and now building fullstack projects with Django. The JavaScript eco system is literally hell, you cant blink without a new framework/code breaking update coming out
You are good. Really. The majority of "spa" apps doesn't even need react and all that
django is backend tho
You have the point, haha.
But the main difference which is the main problem also, beetwen Django and the JS framework like Next JS, Gatsby, Qwik and so on. It's the purpose.
Django, it's straight-forward because we have just the server side to deal with.
The JS frameworks have the "good" idea to mix the server side and the client side concerns for the client it's a awsome experience (i guess, maybe...) but for the developers that's a real mess to deal with ^^'
Howover, there's also framework JS which not handle the client. render one time and it's over (maybe some API).
But now the problem is, who want to code in Javascript (by choice) ^^
If we’re gonna go there then simple html is good enough for most things
so, which one should i learn now? remix or nextjs?
FINALLY NESTED ROUTES, waited so long for this.
Web development is hilarious, it's the crypto space of programming
Damn, the rise of new build-tools every year makes me glad I use Angular. Build is certainly on the slow side (2.5 mins for a medium sized project), but good enough for the customer and me, so I never even tried to optimize it.
Great video and it does look really nice! Their presentation turns me a bit away though, "blabla our framework heals cancer blablabla" :D
Also: how fast do you need it? Made a demo project with Vite some time ago and it is fast as hell. It's nice when something is "10 times faster", but the drop from 10 seconds to one second is just not the same as from 1000 to 100.
My static HTML page is hella fast too lol