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

https://discord.gg/fireship

🔗 Resources

Next 13 Announcement https://nextjs.org/blog/next-13
Turbopack Announcement https://vercel.com/blog/turbopack
Next.js Full Course https://fireship.io/courses/react-next-firebase/
Next in 100 Seconds https://youtu.be/Sklc_fQBmcs

🔥 Get More Content - Upgrade to PRO

Upgrade at https://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
2024-02-04T05:18:01.679Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
a4640e72-6322-40c4-82fd-4c90543af3ba
58fc9e206dbba7a225ae0bedbcb24bbfe9562e0b223ec988dcfb17e9798b6048
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
It is October 26, 2022, and you are watching in 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.
None of man's fantasies of evil And compare with the reality
of 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 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 Vite last week, but a new character is spawned.
Vercel employs Tobias Koppers, the creator of webpack.
Who knows a thing or 2 about module bundling?
TurboPack was built from the ground up with Rust, which appeals to our novelty bias, and it integrates Turborepo to cache duplicate operations.
Together, these factors can satisfy your need for blazingly fast speed.
Turbo pack shows updates 10 times faster than Vite And 700 times faster than webpack.
Shots fired.
Shots fired.
Turbo pack sounds amazing, but it's currently in 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.
Verso 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 the 2 big enterprise projects where teams over engineer these giant monstrosities to guarantee job security.
Vite with ES build is already fast enough for most projects and it's got an awesome developer that's hard to beat.
You should also know that Vercel 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 directory the name of the route, then add a page dot 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 dotjs, 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 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 simple if the component breaks, it will render error dotjs instead of page dotjs, while the rest of the UI stays intact.
And this just makes life's 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 meant that this is the data fetching solution, um, for React that everyone I think has been been waiting for.
What 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 enable 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 revalidate 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 to find a loading dot 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 for Remix.
Credit where credit is due.
But all is fair and love an MIT licensed 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 delete.
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 Vue 2 went to Vue 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 0 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 FireShift.
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.

Speaker 0: It is October 26, 2022, and you are watching in 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.

Speaker 1: None of man's fantasies of evil And compare with the reality

Speaker 0: of 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 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 Vite last week, but a new character is spawned. Vercel employs Tobias Koppers, the creator of webpack. Who knows a thing or 2 about module bundling? TurboPack was built from the ground up with Rust, which appeals to our novelty bias, and it integrates Turborepo to cache duplicate operations. Together, these factors can satisfy your need for blazingly fast speed.

Turbo pack shows updates 10 times faster than Vite And 700 times faster than webpack. Shots fired. Shots fired. Turbo pack sounds amazing, but it's currently in 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.

Verso 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 the 2 big enterprise projects where teams over engineer these giant monstrosities to guarantee job security. Vite with ES build is already fast enough for most projects and it's got an awesome developer that's hard to beat. You should also know that Vercel 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 directory the name of the route, then add a page dot 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 dotjs, 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 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 simple if the component breaks, it will render error dotjs instead of page dotjs, while the rest of the UI stays intact. And this just makes life's 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 meant that this is the data fetching solution, um, for React that everyone I think has been been waiting for. What 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 enable 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 revalidate 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 to find a loading dot 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 for Remix. Credit where credit is due. But all is fair and love an MIT licensed 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 delete. 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 Vue 2 went to Vue 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 0 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 FireShift. 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.
It is October 26, 2022, and you are watching in 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. None of man's fantasies of evil And compare with the reality of 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 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 Vite last week, but a new character is spawned. Vercel employs Tobias Koppers, the creator of webpack. Who knows a thing or 2 about module bundling? TurboPack was built from the ground up with Rust, which appeals to our novelty bias, and it integrates Turborepo to cache duplicate operations. Together, these factors can satisfy your need for blazingly fast speed. Turbo pack shows updates 10 times faster than Vite And 700 times faster than webpack. Shots fired. Shots fired. Turbo pack sounds amazing, but it's currently in 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. Verso 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 the 2 big enterprise projects where teams over engineer these giant monstrosities to guarantee job security. Vite with ES build is already fast enough for most projects and it's got an awesome developer that's hard to beat. You should also know that Vercel 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.
networking
software development
To create a page, you give the directory the name of the route, then add a page dot 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 dotjs, 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 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 simple if the component breaks, it will render error dotjs instead of page dotjs, while the rest of the UI stays intact. And this just makes life's 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 meant that this is the data fetching solution, um, for React that everyone I think has been been waiting for.
data management
What 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 enable 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 revalidate 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 to find a loading dot 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 for Remix. Credit where credit is due. But all is fair and love an MIT licensed 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 delete. 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 Vue 2 went to Vue 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 0 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 FireShift. 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.
geometry
earth
streaming
video gaming
It is October 26, 2022, and you are watching in 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. None of man's fantasies of evil And compare with the reality of 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 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 Vite last week, but a new character is spawned. Vercel employs Tobias Koppers, the creator of webpack. Who knows a thing or 2 about module bundling? TurboPack was built from the ground up with Rust, which appeals to our novelty bias, and it integrates Turborepo to cache duplicate operations. Together, these factors can satisfy your need for blazingly fast speed. Turbo pack shows updates 10 times faster than Vite And 700 times faster than webpack. Shots fired. Shots fired. Turbo pack sounds amazing, but it's currently in 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. Verso 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 the 2 big enterprise projects where teams over engineer these giant monstrosities to guarantee job security. Vite with ES build is already fast enough for most projects and it's got an awesome developer that's hard to beat. You should also know that Vercel 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 directory the name of the route, then add a page dot 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 dotjs, 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 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 simple if the component breaks, it will render error dotjs instead of page dotjs, while the rest of the UI stays intact. And this just makes life's 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 meant that this is the data fetching solution, um, for React that everyone I think has been been waiting for. What 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 enable 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 revalidate 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 to find a loading dot 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 for Remix. Credit where credit is due. But all is fair and love an MIT licensed 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 delete. 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 Vue 2 went to Vue 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 0 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 FireShift. 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.
It
it
is
is
October
october
26,
26
2022,
2022
and
and
you
you
are
are
watching
watching
in
in
the
the
code
code
report.
report
Just
just
when
when
you
you
thought
thought
you
you
had
had
web
web
development
development
all
all
figured
figured
out,
out
along
along
comes
comes
an
an
entirely
entirely
new
new
build
build
tool
tool
and
and
a
a
complete
complete
overhaul
overhaul
of
of
your
your
favorite
favorite
framework.
framework
We're
we're
ready
ready
for
for
a
a
new
new
paradigm.
paradigm
None
none
of
of
man's
man's
fantasies
fantasies
of
of
evil
evil
And
and
compare
compare
with
with
the
the
reality
reality
of
of
JavaScript.
javascript
It's
it's
a
a
wild
wild
ride.
ride
Next
next
JS
js
comp
comp
happened
happened
yesterday,
yesterday
and
and
they
they
made
made
an
an
extremely
extremely
ballsy
ballsy
move
move
to
to
take
take
the
the
world's
world's
most
most
popular
popular
JavaScript
javascript
framework
framework
and
and
linchpin
linchpin
of
of
a
a
unicorn
unicorn
startup
startup
and
and
totally
totally
change
change
change
change
up
up
the
the
developer
developer
experience.
experience
As
as
you're
you're
about
about
to
to
see,
see
these
these
new
new
features
features
are
are
game
game
changing
changing
and
and
blazingly
blazingly
fast,
fast
but
but
they're
they're
not
not
without
without
their
their
trade
trade
offs.
offs
Buckle
buckle
up
up
because
because
we've
we've
got
got
a
a
lot
lot
to
to
unpack,
unpack
starting
starting
with
with
a
a
brand
brand
new
new
build
build
tool
tool
called
called
Turbo
turbo
Pack.
pack
Now
now
I
i
know
know
you
you
just
just
switched
switched
over
over
to
to
the
the
next
next
gen
gen
build
build
tool
tool
Vite
vite
last
last
week,
week
but
but
a
a
new
new
character
character
is
is
spawned.
spawned
Vercel
vercel
employs
employs
Tobias
tobias
Koppers,
koppers
the
the
creator
creator
of
of
webpack.
webpack
Who
who
knows
knows
a
a
thing
thing
or
or
2
2
about
about
module
module
bundling?
bundling
TurboPack
turbopack
was
was
built
built
from
from
the
the
ground
ground
up
up
with
with
Rust,
rust
which
which
appeals
appeals
to
to
our
our
novelty
novelty
bias,
bias
and
and
it
it
integrates
integrates
Turborepo
turborepo
to
to
cache
cache
duplicate
duplicate
operations.
operations
Together,
together
these
these
factors
factors
can
can
satisfy
satisfy
your
your
need
need
for
for
blazingly
blazingly
fast
fast
speed.
speed
Turbo
turbo
pack
pack
shows
shows
updates
updates
10
10
times
times
faster
faster
than
than
Vite
vite
And
and
700
700
times
times
faster
faster
than
than
webpack.
webpack
Shots
shots
fired.
fired
Shots
shots
fired.
fired
Turbo
turbo
pack
pack
sounds
sounds
amazing,
amazing
but
but
it's
it's
currently
currently
in
in
alpha,
alpha
and
and
I'm
i'm
a
a
bit
bit
skeptical.
skeptical
There's
there's
a
a
massive
massive
ecosystem
ecosystem
of
of
webpack
webpack
plugins
plugins
that
that
will
will
likely
likely
make
make
migration
migration
very
very
hard
hard
for
for
existing
existing
apps.
apps
Verso
verso
will
will
likely
likely
need
need
to
to
count
count
on
on
community
community
contributions
contributions
with
with
some
some
kind
kind
of
of
plug
plug
in
in
system,
system
and
and
that
that
might
might
be
be
difficult
difficult
because
because
JavaScript
javascript
developers
developers
like
like
me
me
are
are
too
too
dumb
dumb
and
and
lazy
lazy
to
to
learn
learn
Rust.
rust
Furthermore,
furthermore
these
these
speed
speed
gains
gains
are
are
mostly
mostly
relevant
relevant
the
the
2
2
big
big
enterprise
enterprise
projects
projects
where
where
teams
teams
over
over
engineer
engineer
these
these
giant
giant
monstrosities
monstrosities
to
to
guarantee
guarantee
job
job
security.
security
Vite
vite
with
with
ES
es
build
build
is
is
already
already
fast
fast
enough
enough
for
for
most
most
projects
projects
and
and
it's
it's
got
got
an
an
awesome
awesome
developer
developer
that's
that's
hard
hard
to
to
beat.
beat
You
you
should
should
also
also
know
know
that
that
Vercel
vercel
has
has
an
an
angle
angle
to
to
make
make
money
money
on
on
this
this
by
by
remotely
remotely
caching
caching
builds
builds
in
in
the
the
cloud,
cloud
and
and
Parcel
parcel
has
has
been
been
using
using
this
this
architecture
architecture
for
for
a
a
long
long
time
time
as
as
well.
well
What's
what's
way
way
more
more
exciting
exciting
for
for
me
me
is
is
the
the
brand
brand
new
new
routing
routing
system.
system
The
the
best
best
possible
possible
router.
router
Which
which
adds
adds
a
a
smorgasbord
smorgasbord
of
of
new
new
possibilities
possibilities
and
and
performance
performance
improvements
improvements
to
to
the
the
framework.
framework
These
these
are
are
huge
huge
changes
changes
that
that
they
they
worked
worked
on
on
directly
directly
with
with
the
the
React
react
core
core
team,
team
but
but
before
before
you
you
freak
freak
out,
out
everything
everything
can
can
be
be
incrementally
incrementally
adopted
adopted
so
so
it
it
won't
won't
break
break
your
your
existing
existing
project.
project
Next
next
13
13
adds
adds
a
a
new
new
app
app
directory
directory
that
that
also
also
uses
uses
file
file
system
system
based
based
routing
routing
like
like
before,
before
but
but
now
now
it's
it's
all
all
directory
directory
based,
based
along
along
with
with
a
a
bunch
bunch
of
of
naming
naming
conventions
conventions
for
for
different
different
use
use
cases.
cases
To
to
create
create
a
a
page,
page
you
you
give
give
the
the
directory
directory
the
the
name
name
of
of
the
the
route,
route
then
then
add
add
a
a
page
page
dot
dot
JS
js
file
file
to
to
it.
it
That
that
exports
exports
the
the
component
component
you
you
want
want
to
to
display
display
there.
there
Nice
nice
and
and
simple.
simple
However,
however
because
because
it's
it's
a
a
directory,
directory
we
we
can
can
co
co
locate
locate
extra
extra
components
components
here
here
as
as
well
well
instead
instead
of
of
needing
needing
to
to
create
create
a
a
separate
separate
components
components
directory,
directory
or
or
some
some
other
other
kind
kind
of
of
convention.
convention
More
more
importantly
importantly
though,
though
it
it
opens
opens
the
the
door
door
to
to
layouts
layouts
and
and
nested
nested
routing.
routing
When
when
you
you
give
give
a
a
file
file
the
the
name
name
of
of
layout
layout
dotjs,
dotjs
it
it
creates
creates
a
a
UI
ui
that
that
can
can
be
be
inherited
inherited
by
by
the
the
child
child
routes.
routes
And
and
when
when
you
you
navigate
navigate
to
to
a
a
route
route
inside
inside
of
of
a
a
layout,
layout
only
only
the
the
inner
inner
UI
ui
is
is
rendered
rendered
as
as
opposed
opposed
to
to
the
the
entire
entire
page.
page
This
this
this
this
is
is
really
really
cool
cool
because
because
we
we
also
also
have
have
file
file
naming
naming
conventions
conventions
for
for
loading
loading
and
and
error
error
that
that
can
can
render
render
a
a
different
different
UI
ui
at
at
the
the
component
component
level
level
based
based
on
on
its
its
current
current
state.
state
For
for
simple
simple
if
if
the
the
component
component
breaks,
breaks
it
it
will
will
render
render
error
error
dotjs
dotjs
instead
instead
of
of
page
page
dotjs,
dotjs
while
while
the
the
rest
rest
of
of
the
the
UI
ui
stays
stays
intact.
intact
And
and
this
this
just
just
makes
makes
life's
life's
so
so
much
much
easier.
easier
But
but
by
by
far,
far
the
the
most
most
epic
epic
feature
feature
in
in
this
this
new
new
release
release
is
is
data
data
fetching.
fetching
Next
next
is
is
what
what
you
you
would
would
almost
almost
call
call
the
the
official
official
React
react
framework
framework
now.
now
That's
that's
our
our
endorsement
endorsement
that
that
meant
meant
that
that
this
this
is
is
the
the
data
data
fetching
fetching
solution,
solution
um,
um
for
for
React
react
that
that
everyone
everyone
I
i
think
think
has
has
been
been
been
been
waiting
waiting
for.
for
What
what
I
i
haven't
haven't
told
told
you
you
yet
yet
is
is
that
that
all
all
of
of
these
these
components
components
are
are
React
react
server
server
components
components
by
by
default.
default
Server
server
components
components
are
are
a
a
low
low
level
level
primitive
primitive
in
in
React
react
that
that
enable
enable
server
server
side
side
rendering,
rendering
but
but
until
until
now,
now
they've
they've
always
always
been
been
kind
kind
of
of
difficult
difficult
for
for
the
the
common
common
developer
developer
to
to
use.
use
It's
it's
a
a
huge
huge
deal
deal
because
because
now
now
we
we
can
can
totally
totally
get
get
rid
rid
of
of
things
things
like
like
get
get
static
static
props
props
and
and
get
get
server
server
side
side
props.
props
Instead,
instead
we
we
can
can
just
just
write
write
a
a
plain
plain
JavaScript
javascript
function
function
that
that
uses
uses
fetch
fetch
and
and
then
then
await
await
the
the
result
result
of
of
that
that
function
function
directly
directly
in
in
a
a
component.
component
No
no
need
need
to
to
pass
pass
props
props
back
back
and
and
forth
forth
between
between
client
client
and
and
server.
server
It
it
feels
feels
totally
totally
natural
natural
like
like
you're
you're
just
just
using
using
vanilla
vanilla
JavaScript,
javascript
and
and
you
you
don't
don't
even
even
need
need
to
to
serialize
serialize
data,
data
which
which
can
can
be
be
a
a
major
major
pain
pain
point.
point
Furthermore,
furthermore
you
you
can
can
take
take
concepts
concepts
like
like
ISR,
isr
SSR,
ssr
and
and
SSG
ssg
and
and
remove
remove
them
them
from
from
your
your
brain.
brain
The
the
new
new
mental
mental
model
model
revolves
revolves
entirely
entirely
around
around
caching.
caching
By
by
default,
default
all
all
pages
pages
will
will
be
be
cached
cached
to
to
provide
provide
the
the
performance
performance
of
of
a
a
static
static
site.
site
But
but
if
if
you
you
want
want
new
new
data
data
on
on
every
every
request
request
like
like
SSR,
ssr
you
you
can
can
add
add
the
the
cache
cache
no
no
store
store
option
option
to
to
fetch.
fetch
Or
or
for
for
incremental
incremental
static
static
regeneration,
regeneration
use
use
the
the
next
next
option
option
with
with
the
the
number
number
of
of
revalidate
revalidate
seconds.
seconds
And
and
what's
what's
also
also
amazing
amazing
about
about
all
all
this
this
is
is
that
that
the
the
UI
ui
can
can
be
be
incrementally
incrementally
streamed
streamed
in,
in
thanks
thanks
to
to
react
react
suspense,
suspense
all
all
you
you
have
have
to
to
do
do
is
is
to
to
find
find
a
a
loading
loading
dot
dot
JS
js
file
file
to
to
define
define
the
the
UI.
ui
If
if
a
a
component
component
is
is
still
still
awaiting
awaiting
data,
data
it
it
will
will
automatically
automatically
show
show
it
it
at
at
the
the
component
component
level
level
while
while
rendering
rendering
everything
everything
else
else
in
in
the
the
application.
application
Game
game
changing,
changing
but
but
many
many
of
of
these
these
features
features
are
are
clearly
clearly
inspired
inspired
by
by
for
for
Remix.
remix
Credit
credit
where
where
credit
credit
is
is
due.
due
But
but
all
all
is
is
fair
fair
and
and
love
love
an
an
MIT
mit
licensed
licensed
code.
code
But
but
one
one
thing
thing
next
next
is
is
missing
missing
is
is
a
a
way
way
to
to
write
write
data
data
similar
similar
to
to
Remix
remix
forms,
forms
which
which
I
i
think
think
is
is
a
a
really
really
great
great
feature.
feature
And
and
weirdly,
weirdly
there's
there's
no
no
way
way
to
to
write
write
API
api
routes
routes
in
in
the
the
new
new
app
app
directory
directory
as
as
far
far
as
as
I
i
can
can
tell,
tell
and
and
to
to
me
me
that
that
just
just
seems
seems
like
like
a
a
sloppy
sloppy
loose
loose
end.
end
As
as
I
i
showed,
showed
data
data
fetching
fetching
looks
looks
amazing,
amazing
but
but
mutations
mutations
are
are
an
an
entirely
entirely
different
different
story.
story
In
in
the
the
docs,
docs
it
it
says
says
the
the
next
next
team
team
is
is
working
working
on
on
a
a
new
new
RFC
rfc
for
for
mutating
mutating
data,
data
but
but
currently,
currently
you
you
would
would
use
use
a
a
client
client
side
side
component,
component
write
write
your
your
mutation
mutation
logic,
logic
then
then
pass
pass
a
a
callback
callback
function
function
of
of
refresh
refresh
to
to
update
update
any
any
data
data
on
on
that
that
route
route
after
after
the
the
mutation
mutation
is
is
complete.
complete
This
this
is
is
kind
kind
of
of
similar
similar
to
to
how
how
things
things
work
work
in
in
React
react
Query,
query
but
but
it
it
seems
seems
like
like
the
the
framework
framework
could
could
provide
provide
a
a
more
more
intuitive
intuitive
solution
solution
here.
here
Overall,
overall
I
i
think
think
Next
next
13
13
looks
looks
amazing.
amazing
However,
however
these
these
are
are
major
major
changes
changes
that
that
basically
basically
make
make
every
every
Next.
next
Js
js
tutorial
tutorial
out
out
there
there
delete.
delete
Even
even
if
if
these
these
changes
changes
are
are
a
a
step
step
forward,
forward
the
the
reality
reality
is
is
that
that
people
people
don't
don't
like
like
change.
change
Like
like
people
people
were
were
riding
riding
in
in
the
the
streets
streets
when
when
Vue
vue
2
2
went
went
to
to
Vue
vue
3,
3
even
even
though
though
it
it
too
too
can
can
be
be
adopted
adopted
incrementally.
incrementally
Right
right
now
now
everybody's
everybody's
super
super
excited
excited
about
about
these
these
new
new
features,
features
but
but
if
if
you're
you're
the
the
guy
guy
that
that
has
has
to
to
migrate
migrate
all
all
that
that
code,
code
your
your
initial
initial
excitement
excitement
might
might
soon
soon
turn
turn
to
to
anger.
anger
Another
another
criticism
criticism
is
is
that
that
a
a
Hello
hello
World
world
app
app
is
is
still
still
90
90
kilobytes
kilobytes
of
of
JavaScript.
javascript
It
it
seems
seems
like
like
it
it
should
should
be
be
able
able
to
to
ship
ship
0
0
JavaScript
javascript
apps
apps
like
like
Astro,
astro
Quick,
quick
and
and
so
so
on,
on
but
but
that
that
doesn't
doesn't
appear
appear
to
to
be
be
the
the
case.
case
In
in
addition
addition
to
to
the
the
features
features
I
i
mentioned,
mentioned
there
there
are
are
all
all
kinds
kinds
of
of
small
small
optimizations,
optimizations
and
and
one
one
of
of
them
them
was
was
even
even
inspired
inspired
by
by
a
a
video
video
I
i
made.
made
Edge
edge
Functions
functions
can
can
now
now
be
be
set
set
to
to
a
a
specific
specific
region,
region
and
and
it's
it's
great
great
to
to
see
see
these
these
big
big
companies
companies
recognize
recognize
that
that
the
the
shape
shape
of
of
the
the
planet
planet
is
is
not
not
an
an
oblate
oblate
sphere,
sphere
but
but
rather
rather
a
a
level
level
plane.
plane
And
and
lastly,
lastly
I'm
i'm
working
working
on
on
a
a
longer
longer
full
full
tutorial
tutorial
for
for
next
next
13,
13
which
which
will
will
be
be
on
on
my
my
new
new
channel
channel
beyond
beyond
FireShift.
fireshift
So
so
make
make
sure
sure
to
to
subscribe
subscribe
over
over
there.
there
This
this
has
has
been
been
the
the
code
code
report.
report
Thanks
thanks
for
for
watching,
watching
and
and
I
i
will
will
see
see
you
you
in
in
the
the
next
next
one.
one
success
The new build tool Turbo Pack is introduced, with a fast speed and a blazingly fast speed. Vite and Turbo Pack have new features, including a new build tool and a new character named spawned. Remix uses a code called Remix to write API data and there is no way to write API data to Remix forms. The new code is amazing, but developers need to migrate their code to reflect this new approach.
Next.js 13… this changes everything
It is October 26, 2022, and you are watching in 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. None of man's fantasies of evil And compare with the reality of 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 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 Vite last week, but a new character is spawned. Vercel employs Tobias Koppers, the creator of webpack. Who knows a thing or 2 about module bundling? TurboPack was built from the ground up with Rust, which appeals to our novelty bias, and it integrates Turborepo to cache duplicate operations. Together, these factors can satisfy your need for blazingly fast speed. Turbo pack shows updates 10 times faster than Vite And 700 times faster than webpack. Shots fired. Shots fired. Turbo pack sounds amazing, but it's currently in 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. Verso 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 the 2 big enterprise projects where teams over engineer these giant monstrosities to guarantee job security. Vite with ES build is already fast enough for most projects and it's got an awesome developer that's hard to beat. You should also know that Vercel 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 directory the name of the route, then add a page dot 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 dotjs, 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 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 simple if the component breaks, it will render error dotjs instead of page dotjs, while the rest of the UI stays intact. And this just makes life's 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 meant that this is the data fetching solution, um, for React that everyone I think has been been waiting for. What 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 enable 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 revalidate 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 to find a loading dot 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 for Remix. Credit where credit is due. But all is fair and love an MIT licensed 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 delete. 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 Vue 2 went to Vue 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 0 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 FireShift. 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.
The new build tool Turbo Pack is introduced, with a fast speed and a blazingly fast speed. Vite and Turbo Pack have new features, including a new build tool and a new character named spawned. Remix uses a code called Remix to write API data and there is no way to write API data to Remix forms. The new code is amazing, but developers need to migrate their code to reflect this new approach.