Next.js 13… this changes everything

Key Takeaways

it is October 26 2022 and you're watching the code report just when you thought you had web development all figured out Along Comes an entirely new build tool and a complete overhaul of your favorite framework we're ready for a new paradigm not enough men's and disease of evil the reality [Music] JavaScript it's a wild ride next JS comp happened yesterday and they made an extremely ballsy move to take the world's most popular JavaScript framework and linchpin of a unicorn startup and totally change up the developer experience as you're about to see these new features are game changing and blazingly fast but they're not without their trade-offs buckle up because we've got a lot to unpack starting with a brand new build tool called turbo pack now I know you just switched over to the next gen build tool V last week but a new character is spawned versel employs Tobias coppers the creator of webpack who knows a thing or two about module bundling turbo pack was built from the ground up with rust which appeals to our novelty bias and it integrates turbo repo to Cache duplicate operations together these factors can satisfy your need for blazingly fast speed turbo pack shows updates 10 times faster than Veet and 700 times faster than webpack shots fired shots fired turbo pack sounds amazing but it's currently an alpha and I'm a bit skeptical there's a massive ecosystem of webpack plugins that will likely make migration very hard for existing apps Versa will likely need to count on community contributions with some kind of plug-in system and that might be difficult because JavaScript developers like me are too dumb and lazy to learn rust furthermore these speed gains are mostly relevant to Big Enterprise projects where teams over engineer these giant monstrosities to guarantee job security Veet with es build is already fast enough for most projects and it's got an awesome developer experience that's hard to beat you should also know that Purcell has an angle to make money on this by remotely caching builds in the cloud and parcel has been using this architecture for a long time as well what's way more exciting for me is the brand new routing system the best possible router which adds a smorgasbord of new possibilities and performance improvements to the framework these are huge changes that they worked on directly with the react core team but before you freak out everything can be incrementally adopted so it won't break your existing project next 13 adds a new app directory that also uses file system-based routing like before but now it's all directory based along with a bunch of naming conventions for different use cases to create a page you give the direct the name of the route then add a page.js file to it that exports the component you want to display there nice and simple however because it's a directory we can co-locate extra components here as well instead of needing to create a separate components directory or some other kind of convention more importantly though it opens the door to layouts and nested routing when you give a file the name of layout.js it creates a UI that can be inherited by the child routes and when you navigate to a route inside of a layout only the inner UI is rendered as opposed to the entire page this is really cool because we also have file naming conventions for loading and error that can render a different UI at the component level based on its current state for example if the component breaks it will render error.js instead of page.js while the rest of the UI stays intact and this just makes life so much easier but by far the most epic feature in this new release is data fetching next is what you would almost call the official react framework now that's our endorsement that this is the data fetching solution for react that everyone I think has been been waiting for what I I haven't told you yet is that all of these components are react server components by default server components are a low level primitive in react that enables server-side rendering but until now they've always been kind of difficult for the common developer to use it's a huge deal because now we can totally get rid of things like get static props and get server-side props instead we can just write a plain JavaScript function that uses Fetch and then await the result of that function directly in a component no need to pass props back and forth between client and server it feels totally natural like you're just using vanilla JavaScript and you don't even need to serialize data which can be a major pain Point furthermore you can take Concepts like ISR SSR and SSG and remove them from your brain the new mental model revolves entirely around caching by default all pages will be cached to provide the performance of a static site but if you want new data on every request like SSR you can add the Cache no store option to fetch or for incremental static regeneration use the next option with the number of rebalidate seconds and what's also amazing about all this is that the UI can be incrementally streamed in thanks to react suspense all you have to do is Define a loading.js file to define the UI if a component is still awaiting data it will automatically show it at the component level while rendering everything else in the application game changing but many of these features are clearly inspired by remix credit where credit is due but all is fair in love and MIT license code but one thing next is missing is a way to write data similar to remix forms which I think is a really great feature and weirdly there's no way to write API routes in the new app directory as far as I can tell and to me that just seems like a sloppy loose end as I showed data fetching looks amazing but mutations are an entirely different story in the docs it says the next team is working on a new RFC for mutating data but currently you would use a client-side component write your mutation logic then pass a callback function of refresh to update any data on that route after the mutation is complete this is kind of similar to how things work in react query but it seems like the framework could provide a more intuitive solution here overall I think next 13 looks amazing however these are major changes that basically make every next JS tutorial out there obsolete even if these changes are a step forward the reality is that people don't like change like people were riding in the streets when view 2 went to view 3 even though it too can be adopted incrementally right now everybody's super excited about these new features but if you're the guy that has to migrate all that code your initial excitement might soon turn to anger another criticism is that a Hello World app is still 90 kilobytes of JavaScript it seems like it should be able to ship zero JavaScript apps like Astro quick and so on but that doesn't appear to be the case in addition to the features I mentioned there are all kinds of small optimizations and one of them was even inspired by a video I made Edge functions can now be set to a specific region and it's great to see these big companies recognize that the shape of the planet is not an oblate sphere but rather a level plane and lastly I'm working on a longer full tutorial for next 13 which will be on my new channel Beyond fireship so make sure to subscribe over there this has been the code report thanks for watching and I will see you in the next one [Music]