Your first look at Next.js version 12. It's packed with awesome new features, like a rust compiler, middleware, concurrent mode, server components, and more. Full course https://fireship.io/courses/react-next-firebase/

#js #react #firstlook

🔗 Resources

Announcement https://nextjs.org/blog/next-12
Full Course https://fireship.io/courses/react-next-firebase/

📚 Chapters

00:00 Next.js 12
46:00 Middleware
02:42 Suspense Support
03:16 Server Components
04:41 URL Imports

🔥 Get More Content - Upgrade to PRO

Upgrade to Fireship PRO at https://fireship.io/pro
Use code lORhwXd2 for 25% off your first payment. 

🎨 My Editor Settings

- Atom One Dark 
- vscode-icons
- Fira Code Font

🔖 Topics Covered

- Next.js 12 new features
- Rust compiler in Next.js
- Using suspense with Next.js
- React Server Components SSR
2024-02-04T05:42:04.186Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
c8c8ee0d-3238-4d84-9689-60e1d0d92e1c
688bcfd6073151398fe5fbc5d2d2ca88b8f266c04f9092700451e221368fd2eb
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
Just yesterday, Next.
Js announced version 12 and it was even more impressive than Apple's new MacBook announcements, which is pretty mind blowing considering it's just a free JavaScript framework.
They're setting the bar really high for what a full stack JavaScript framework is expected to do.
Like, it now ships with a Rust compiler instead of JavaScript to give you 5 x faster builds.
You don't need to know Rust, it just makes Next faster under the hood by replacing Babel, which is important because big complex apps tend to have slow build times.
And I've already updated my full Next.
Js course to use version 12, and I'm seeing significantly faster refresh and build times.
That's pretty amazing, but it's not even close to being the coolest feature in this release.
Let's take a look at all the new features in Next 12 and, more importantly, why you would wanna use them.
If you're new here, like and subscribe.
And if you wanna get really good at Next, Consider enrolling in my full course.
Grab a discount in the description.
The first feature I wanna look at is middleware.
Middleware is not a new concept.
Frameworks like Express JS use middleware to intercept an HTTP request and process it in some way before it goes to your actual route handler.
With something like Next.
Js though, things are a little more complicated.
On one hand, you want your website to be really fast, and the best way to make that happen is to cache pre built HTML pages on a CDN.
But when you Do that, you lose the ability to make your pages dynamic.
So on the other end of the spectrum, you have server side rendering that uses a node server to fetch data from a database or API when the incoming request comes in, but that is slow and inefficient.
In a perfect world though, developers would have both speed and dynamic content at the same time.
And Next is really leading the way to make that happen.
Vercel, the company behind Next, has a product called Edge Functions.
These are serverless functions like AWS Lambda or Google Cloud Functions, except they're deployed to the edge like a CDN, so your end users get extremely fast execution with no cold starts.
Now, here's where middleware comes in.
In your project, create a file called underscore middleware in the pages directory.
From inside it, you can export a function called middleware.
This function will give you access to the incoming request and allow you to modify it, and it will run before rendering takes place for every page in the page's directory.
You can also scope the middleware to subdirectories if you only want it to run on a subset of pages.
What's awesome about middleware is that it makes your code way more efficient.
For example, I may need to verify a user authentication credential on every page.
If the user's logged in, we might want to retrieve some data from a database, otherwise redirect to the login page.
Instead of importing that logic into every page, I can now just define it in the middleware and it will run on every page automatically.
But as An added bonus when you go to deploy, the middleware is hosted on Vercel Edge functions.
Instead of having one centralized node server, your back end code is deployed to the edge where it's very close to the end user and therefore much faster.
That's great for Vercel, but if you're worried about vendor lock in, it provides a standard build output that you can deploy to any platform.
It's just going to take a lot more work to configure.
Now, let's move on to the next big feature in Next 12, support for react concurrent mode like suspense.
If you're not familiar with suspense, it's basically a component that allows you to wait for asynchronous data before rendering its children.
As of today, it's still experimental in React, but is still used in production on some websites like Facebook.
However, if you try to use it in Next, it results in errors because it doesn't play well on the server.
In Next 12, you can opt in to experimental concurrent features to get these features working with server side rendering.
It also supports React lazy to dynamically import ES modules, which can reduce the size of your client side JavaScript bundle.
Now this next feature might be the one that I'm most excited about, React's server components.
Server components allow you to natively render HTML from a React component on the server.
What's crazy about it though, is that it uses HTTP streaming to progressively render a web page on the server.
That means if you need data for one component and then another component after that, you Don't have to wait for one after the other.
It'll render the first one, then the next one, then the next one after that, which really opens up a whole new world of possibilities when it comes to designing full stack web applications.
With server components, you can stream HTML from an edge function immediately and progressively show updates As your data comes in.
And next, you can change a page or file name to dot server dot JS to tell the framework that it's a server component.
When this component is rendered, it requires 0 client side JavaScript.
That means fewer kilobytes for the end user to download.
In addition, you can fetch data directly side the component without having to use functions like get static props or get server side props.
It's a really ergonomic way to build an application.
You use react patterns from start to finish or server to client.
Now, you'll likely want some interactive JavaScript for the client, so you can also import regular client components as well, and they'll be rendered universally both on the server and the client.
The combination of server components and middleware looks like a really awesome way to build an app.
I'm actually considering redesigning the entire Fireship site with these latest features.
If you guys wanna see that as a series here on YouTube, make sure to let me know in the comments.
To wrap things up, there's one more cool feature you'll wanna know about.
You can now import modules using URLs instead of NPM.
This works for JavaScript modules that you would import from a CDN, but you can also use remote URLs in your CSS or to import images directly into your JavaScript code.
Overall, Next.
Js version 12 is a total beast.
Make sure you're subscribed for more updates, And if you're a pro member, stay tuned for more updates to the full course.
Thanks for watching and I will see you in the next one.

Speaker 0: Just yesterday, Next. Js announced version 12 and it was even more impressive than Apple's new MacBook announcements, which is pretty mind blowing considering it's just a free JavaScript framework. They're setting the bar really high for what a full stack JavaScript framework is expected to do. Like, it now ships with a Rust compiler instead of JavaScript to give you 5 x faster builds. You don't need to know Rust, it just makes Next faster under the hood by replacing Babel, which is important because big complex apps tend to have slow build times.

And I've already updated my full Next. Js course to use version 12, and I'm seeing significantly faster refresh and build times. That's pretty amazing, but it's not even close to being the coolest feature in this release. Let's take a look at all the new features in Next 12 and, more importantly, why you would wanna use them. If you're new here, like and subscribe.

And if you wanna get really good at Next, Consider enrolling in my full course. Grab a discount in the description. The first feature I wanna look at is middleware. Middleware is not a new concept. Frameworks like Express JS use middleware to intercept an HTTP request and process it in some way before it goes to your actual route handler.

With something like Next. Js though, things are a little more complicated. On one hand, you want your website to be really fast, and the best way to make that happen is to cache pre built HTML pages on a CDN. But when you Do that, you lose the ability to make your pages dynamic. So on the other end of the spectrum, you have server side rendering that uses a node server to fetch data from a database or API when the incoming request comes in, but that is slow and inefficient.

In a perfect world though, developers would have both speed and dynamic content at the same time. And Next is really leading the way to make that happen. Vercel, the company behind Next, has a product called Edge Functions. These are serverless functions like AWS Lambda or Google Cloud Functions, except they're deployed to the edge like a CDN, so your end users get extremely fast execution with no cold starts. Now, here's where middleware comes in.

In your project, create a file called underscore middleware in the pages directory. From inside it, you can export a function called middleware. This function will give you access to the incoming request and allow you to modify it, and it will run before rendering takes place for every page in the page's directory. You can also scope the middleware to subdirectories if you only want it to run on a subset of pages. What's awesome about middleware is that it makes your code way more efficient.

For example, I may need to verify a user authentication credential on every page. If the user's logged in, we might want to retrieve some data from a database, otherwise redirect to the login page. Instead of importing that logic into every page, I can now just define it in the middleware and it will run on every page automatically. But as An added bonus when you go to deploy, the middleware is hosted on Vercel Edge functions. Instead of having one centralized node server, your back end code is deployed to the edge where it's very close to the end user and therefore much faster.

That's great for Vercel, but if you're worried about vendor lock in, it provides a standard build output that you can deploy to any platform. It's just going to take a lot more work to configure. Now, let's move on to the next big feature in Next 12, support for react concurrent mode like suspense. If you're not familiar with suspense, it's basically a component that allows you to wait for asynchronous data before rendering its children. As of today, it's still experimental in React, but is still used in production on some websites like Facebook.

However, if you try to use it in Next, it results in errors because it doesn't play well on the server. In Next 12, you can opt in to experimental concurrent features to get these features working with server side rendering. It also supports React lazy to dynamically import ES modules, which can reduce the size of your client side JavaScript bundle. Now this next feature might be the one that I'm most excited about, React's server components. Server components allow you to natively render HTML from a React component on the server.

What's crazy about it though, is that it uses HTTP streaming to progressively render a web page on the server. That means if you need data for one component and then another component after that, you Don't have to wait for one after the other. It'll render the first one, then the next one, then the next one after that, which really opens up a whole new world of possibilities when it comes to designing full stack web applications. With server components, you can stream HTML from an edge function immediately and progressively show updates As your data comes in. And next, you can change a page or file name to dot server dot JS to tell the framework that it's a server component.

When this component is rendered, it requires 0 client side JavaScript. That means fewer kilobytes for the end user to download. In addition, you can fetch data directly side the component without having to use functions like get static props or get server side props. It's a really ergonomic way to build an application. You use react patterns from start to finish or server to client.

Now, you'll likely want some interactive JavaScript for the client, so you can also import regular client components as well, and they'll be rendered universally both on the server and the client. The combination of server components and middleware looks like a really awesome way to build an app. I'm actually considering redesigning the entire Fireship site with these latest features. If you guys wanna see that as a series here on YouTube, make sure to let me know in the comments. To wrap things up, there's one more cool feature you'll wanna know about.

You can now import modules using URLs instead of NPM. This works for JavaScript modules that you would import from a CDN, but you can also use remote URLs in your CSS or to import images directly into your JavaScript code. Overall, Next. Js version 12 is a total beast. Make sure you're subscribed for more updates, And if you're a pro member, stay tuned for more updates to the full course.

Thanks for watching and I will see you in the next one.
Just yesterday, Next. Js announced version 12 and it was even more impressive than Apple's new MacBook announcements, which is pretty mind blowing considering it's just a free JavaScript framework. They're setting the bar really high for what a full stack JavaScript framework is expected to do. Like, it now ships with a Rust compiler instead of JavaScript to give you 5 x faster builds. You don't need to know Rust, it just makes Next faster under the hood by replacing Babel, which is important because big complex apps tend to have slow build times. And I've already updated my full Next. Js course to use version 12, and I'm seeing significantly faster refresh and build times. That's pretty amazing, but it's not even close to being the coolest feature in this release. Let's take a look at all the new features in Next 12 and, more importantly, why you would wanna use them. If you're new here, like and subscribe. And if you wanna get really good at Next, Consider enrolling in my full course. Grab a discount in the description. The first feature I wanna look at is middleware.
Middleware is not a new concept. Frameworks like Express JS use middleware to intercept an HTTP request and process it in some way before it goes to your actual route handler. With something like Next. Js though, things are a little more complicated. On one hand, you want your website to be really fast, and the best way to make that happen is to cache pre built HTML pages on a CDN. But when you Do that, you lose the ability to make your pages dynamic.
blogging
internet
So on the other end of the spectrum, you have server side rendering that uses a node server to fetch data from a database or API when the incoming request comes in, but that is slow and inefficient. In a perfect world though, developers would have both speed and dynamic content at the same time. And Next is really leading the way to make that happen. Vercel, the company behind Next, has a product called Edge Functions. These are serverless functions like AWS Lambda or Google Cloud Functions, except they're deployed to the edge like a CDN, so your end users get extremely fast execution with no cold starts. Now, here's where middleware comes in. In your project, create a file called underscore middleware in the pages directory. From inside it, you can export a function called middleware. This function will give you access to the incoming request and allow you to modify it, and it will run before rendering takes place for every page in the page's directory. You can also scope the middleware to subdirectories if you only want it to run on a subset of pages. What's awesome about middleware is that it makes your code way more efficient.
For example, I may need to verify a user authentication credential on every page. If the user's logged in, we might want to retrieve some data from a database, otherwise redirect to the login page. Instead of importing that logic into every page, I can now just define it in the middleware and it will run on every page automatically. But as An added bonus when you go to deploy, the middleware is hosted on Vercel Edge functions. Instead of having one centralized node server, your back end code is deployed to the edge where it's very close to the end user and therefore much faster.
databases
software
That's great for Vercel, but if you're worried about vendor lock in, it provides a standard build output that you can deploy to any platform. It's just going to take a lot more work to configure. Now, let's move on to the next big feature in Next 12, support for react concurrent mode like suspense.
If you're not familiar with suspense, it's basically a component that allows you to wait for asynchronous data before rendering its children. As of today, it's still experimental in React, but is still used in production on some websites like Facebook. However, if you try to use it in Next, it results in errors because it doesn't play well on the server.
animation
In Next 12, you can opt in to experimental concurrent features to get these features working with server side rendering. It also supports React lazy to dynamically import ES modules, which can reduce the size of your client side JavaScript bundle. Now this next feature might be the one that I'm most excited about, React's server components. Server components allow you to natively render HTML from a React component on the server. What's crazy about it though, is that it uses HTTP streaming to progressively render a web page on the server. That means if you need data for one component and then another component after that, you Don't have to wait for one after the other. It'll render the first one, then the next one, then the next one after that, which really opens up a whole new world of possibilities when it comes to designing full stack web applications. With server components, you can stream HTML from an edge function immediately and progressively show updates As your data comes in. And next, you can change a page or file name to dot server dot JS to tell the framework that it's a server component. When this component is rendered, it requires 0 client side JavaScript. That means fewer kilobytes for the end user to download. In addition, you can fetch data directly side the component without having to use functions like get static props or get server side props.
It's a really ergonomic way to build an application. You use react patterns from start to finish or server to client. Now, you'll likely want some interactive JavaScript for the client, so you can also import regular client components as well, and they'll be rendered universally both on the server and the client.
programming
The combination of server components and middleware looks like a really awesome way to build an app. I'm actually considering redesigning the entire Fireship site with these latest features. If you guys wanna see that as a series here on YouTube, make sure to let me know in the comments. To wrap things up, there's one more cool feature you'll wanna know about. You can now import modules using URLs instead of NPM. This works for JavaScript modules that you would import from a CDN, but you can also use remote URLs in your CSS or to import images directly into your JavaScript code. Overall, Next. Js version 12 is a total beast. Make sure you're subscribed for more updates, And if you're a pro member, stay tuned for more updates to the full course. Thanks for watching and I will see you in the next one.
Just yesterday, Next. Js announced version 12 and it was even more impressive than Apple's new MacBook announcements, which is pretty mind blowing considering it's just a free JavaScript framework. They're setting the bar really high for what a full stack JavaScript framework is expected to do. Like, it now ships with a Rust compiler instead of JavaScript to give you 5 x faster builds. You don't need to know Rust, it just makes Next faster under the hood by replacing Babel, which is important because big complex apps tend to have slow build times. And I've already updated my full Next. Js course to use version 12, and I'm seeing significantly faster refresh and build times. That's pretty amazing, but it's not even close to being the coolest feature in this release. Let's take a look at all the new features in Next 12 and, more importantly, why you would wanna use them. If you're new here, like and subscribe. And if you wanna get really good at Next, Consider enrolling in my full course. Grab a discount in the description. The first feature I wanna look at is middleware. Middleware is not a new concept. Frameworks like Express JS use middleware to intercept an HTTP request and process it in some way before it goes to your actual route handler. With something like Next. Js though, things are a little more complicated. On one hand, you want your website to be really fast, and the best way to make that happen is to cache pre built HTML pages on a CDN. But when you Do that, you lose the ability to make your pages dynamic. So on the other end of the spectrum, you have server side rendering that uses a node server to fetch data from a database or API when the incoming request comes in, but that is slow and inefficient. In a perfect world though, developers would have both speed and dynamic content at the same time. And Next is really leading the way to make that happen. Vercel, the company behind Next, has a product called Edge Functions. These are serverless functions like AWS Lambda or Google Cloud Functions, except they're deployed to the edge like a CDN, so your end users get extremely fast execution with no cold starts. Now, here's where middleware comes in. In your project, create a file called underscore middleware in the pages directory. From inside it, you can export a function called middleware. This function will give you access to the incoming request and allow you to modify it, and it will run before rendering takes place for every page in the page's directory. You can also scope the middleware to subdirectories if you only want it to run on a subset of pages. What's awesome about middleware is that it makes your code way more efficient. For example, I may need to verify a user authentication credential on every page. If the user's logged in, we might want to retrieve some data from a database, otherwise redirect to the login page. Instead of importing that logic into every page, I can now just define it in the middleware and it will run on every page automatically. But as An added bonus when you go to deploy, the middleware is hosted on Vercel Edge functions. Instead of having one centralized node server, your back end code is deployed to the edge where it's very close to the end user and therefore much faster. That's great for Vercel, but if you're worried about vendor lock in, it provides a standard build output that you can deploy to any platform. It's just going to take a lot more work to configure. Now, let's move on to the next big feature in Next 12, support for react concurrent mode like suspense. If you're not familiar with suspense, it's basically a component that allows you to wait for asynchronous data before rendering its children. As of today, it's still experimental in React, but is still used in production on some websites like Facebook. However, if you try to use it in Next, it results in errors because it doesn't play well on the server. In Next 12, you can opt in to experimental concurrent features to get these features working with server side rendering. It also supports React lazy to dynamically import ES modules, which can reduce the size of your client side JavaScript bundle. Now this next feature might be the one that I'm most excited about, React's server components. Server components allow you to natively render HTML from a React component on the server. What's crazy about it though, is that it uses HTTP streaming to progressively render a web page on the server. That means if you need data for one component and then another component after that, you Don't have to wait for one after the other. It'll render the first one, then the next one, then the next one after that, which really opens up a whole new world of possibilities when it comes to designing full stack web applications. With server components, you can stream HTML from an edge function immediately and progressively show updates As your data comes in. And next, you can change a page or file name to dot server dot JS to tell the framework that it's a server component. When this component is rendered, it requires 0 client side JavaScript. That means fewer kilobytes for the end user to download. In addition, you can fetch data directly side the component without having to use functions like get static props or get server side props. It's a really ergonomic way to build an application. You use react patterns from start to finish or server to client. Now, you'll likely want some interactive JavaScript for the client, so you can also import regular client components as well, and they'll be rendered universally both on the server and the client. The combination of server components and middleware looks like a really awesome way to build an app. I'm actually considering redesigning the entire Fireship site with these latest features. If you guys wanna see that as a series here on YouTube, make sure to let me know in the comments. To wrap things up, there's one more cool feature you'll wanna know about. You can now import modules using URLs instead of NPM. This works for JavaScript modules that you would import from a CDN, but you can also use remote URLs in your CSS or to import images directly into your JavaScript code. Overall, Next. Js version 12 is a total beast. Make sure you're subscribed for more updates, And if you're a pro member, stay tuned for more updates to the full course. Thanks for watching and I will see you in the next one.
Just
just
yesterday,
yesterday
Next.
next
Js
js
announced
announced
version
version
12
12
and
and
it
it
was
was
even
even
more
more
impressive
impressive
than
than
Apple's
apple's
new
new
MacBook
macbook
announcements,
announcements
which
which
is
is
pretty
pretty
mind
mind
blowing
blowing
considering
considering
it's
it's
just
just
a
a
free
free
JavaScript
javascript
framework.
framework
They're
they're
setting
setting
the
the
bar
bar
really
really
high
high
for
for
what
what
a
a
full
full
stack
stack
JavaScript
javascript
framework
framework
is
is
expected
expected
to
to
do.
do
Like,
like
it
it
now
now
ships
ships
with
with
a
a
Rust
rust
compiler
compiler
instead
instead
of
of
JavaScript
javascript
to
to
give
give
you
you
5
5
x
x
faster
faster
builds.
builds
You
you
don't
don't
need
need
to
to
know
know
Rust,
rust
it
it
just
just
makes
makes
Next
next
faster
faster
under
under
the
the
hood
hood
by
by
replacing
replacing
Babel,
babel
which
which
is
is
important
important
because
because
big
big
complex
complex
apps
apps
tend
tend
to
to
have
have
slow
slow
build
build
times.
times
And
and
I've
i've
already
already
updated
updated
my
my
full
full
Next.
next
Js
js
course
course
to
to
use
use
version
version
12,
12
and
and
I'm
i'm
seeing
seeing
significantly
significantly
faster
faster
refresh
refresh
and
and
build
build
times.
times
That's
that's
pretty
pretty
amazing,
amazing
but
but
it's
it's
not
not
even
even
close
close
to
to
being
being
the
the
coolest
coolest
feature
feature
in
in
this
this
release.
release
Let's
let's
take
take
a
a
look
look
at
at
all
all
the
the
new
new
features
features
in
in
Next
next
12
12
and,
and
more
more
importantly,
importantly
why
why
you
you
would
would
wanna
wanna
use
use
them.
them
If
if
you're
you're
new
new
here,
here
like
like
and
and
subscribe.
subscribe
And
and
if
if
you
you
wanna
wanna
get
get
really
really
good
good
at
at
Next,
next
Consider
consider
enrolling
enrolling
in
in
my
my
full
full
course.
course
Grab
grab
a
a
discount
discount
in
in
the
the
description.
description
The
the
first
first
feature
feature
I
i
wanna
wanna
look
look
at
at
is
is
middleware.
middleware
Middleware
middleware
is
is
not
not
a
a
new
new
concept.
concept
Frameworks
frameworks
like
like
Express
express
JS
js
use
use
middleware
middleware
to
to
intercept
intercept
an
an
HTTP
http
request
request
and
and
process
process
it
it
in
in
some
some
way
way
before
before
it
it
goes
goes
to
to
your
your
actual
actual
route
route
handler.
handler
With
with
something
something
like
like
Next.
next
Js
js
though,
though
things
things
are
are
a
a
little
little
more
more
complicated.
complicated
On
on
one
one
hand,
hand
you
you
want
want
your
your
website
website
to
to
be
be
really
really
fast,
fast
and
and
the
the
best
best
way
way
to
to
make
make
that
that
happen
happen
is
is
to
to
cache
cache
pre
pre
built
built
HTML
html
pages
pages
on
on
a
a
CDN.
cdn
But
but
when
when
you
you
Do
do
that,
that
you
you
lose
lose
the
the
ability
ability
to
to
make
make
your
your
pages
pages
dynamic.
dynamic
So
so
on
on
the
the
other
other
end
end
of
of
the
the
spectrum,
spectrum
you
you
have
have
server
server
side
side
rendering
rendering
that
that
uses
uses
a
a
node
node
server
server
to
to
fetch
fetch
data
data
from
from
a
a
database
database
or
or
API
api
when
when
the
the
incoming
incoming
request
request
comes
comes
in,
in
but
but
that
that
is
is
slow
slow
and
and
inefficient.
inefficient
In
in
a
a
perfect
perfect
world
world
though,
though
developers
developers
would
would
have
have
both
both
speed
speed
and
and
dynamic
dynamic
content
content
at
at
the
the
same
same
time.
time
And
and
Next
next
is
is
really
really
leading
leading
the
the
way
way
to
to
make
make
that
that
happen.
happen
Vercel,
vercel
the
the
company
company
behind
behind
Next,
next
has
has
a
a
product
product
called
called
Edge
edge
Functions.
functions
These
these
are
are
serverless
serverless
functions
functions
like
like
AWS
aws
Lambda
lambda
or
or
Google
google
Cloud
cloud
Functions,
functions
except
except
they're
they're
deployed
deployed
to
to
the
the
edge
edge
like
like
a
a
CDN,
cdn
so
so
your
your
end
end
users
users
get
get
extremely
extremely
fast
fast
execution
execution
with
with
no
no
cold
cold
starts.
starts
Now,
now
here's
here's
where
where
middleware
middleware
comes
comes
in.
in
In
in
your
your
project,
project
create
create
a
a
file
file
called
called
underscore
underscore
middleware
middleware
in
in
the
the
pages
pages
directory.
directory
From
from
inside
inside
it,
it
you
you
can
can
export
export
a
a
function
function
called
called
middleware.
middleware
This
this
function
function
will
will
give
give
you
you
access
access
to
to
the
the
incoming
incoming
request
request
and
and
allow
allow
you
you
to
to
modify
modify
it,
it
and
and
it
it
will
will
run
run
before
before
rendering
rendering
takes
takes
place
place
for
for
every
every
page
page
in
in
the
the
page's
page's
directory.
directory
You
you
can
can
also
also
scope
scope
the
the
middleware
middleware
to
to
subdirectories
subdirectories
if
if
you
you
only
only
want
want
it
it
to
to
run
run
on
on
a
a
subset
subset
of
of
pages.
pages
What's
what's
awesome
awesome
about
about
middleware
middleware
is
is
that
that
it
it
makes
makes
your
your
code
code
way
way
more
more
efficient.
efficient
For
for
example,
example
I
i
may
may
need
need
to
to
verify
verify
a
a
user
user
authentication
authentication
credential
credential
on
on
every
every
page.
page
If
if
the
the
user's
user's
logged
logged
in,
in
we
we
might
might
want
want
to
to
retrieve
retrieve
some
some
data
data
from
from
a
a
database,
database
otherwise
otherwise
redirect
redirect
to
to
the
the
login
login
page.
page
Instead
instead
of
of
importing
importing
that
that
logic
logic
into
into
every
every
page,
page
I
i
can
can
now
now
just
just
define
define
it
it
in
in
the
the
middleware
middleware
and
and
it
it
will
will
run
run
on
on
every
every
page
page
automatically.
automatically
But
but
as
as
An
an
added
added
bonus
bonus
when
when
you
you
go
go
to
to
deploy,
deploy
the
the
middleware
middleware
is
is
hosted
hosted
on
on
Vercel
vercel
Edge
edge
functions.
functions
Instead
instead
of
of
having
having
one
one
centralized
centralized
node
node
server,
server
your
your
back
back
end
end
code
code
is
is
deployed
deployed
to
to
the
the
edge
edge
where
where
it's
it's
very
very
close
close
to
to
the
the
end
end
user
user
and
and
therefore
therefore
much
much
faster.
faster
That's
that's
great
great
for
for
Vercel,
vercel
but
but
if
if
you're
you're
worried
worried
about
about
vendor
vendor
lock
lock
in,
in
it
it
provides
provides
a
a
standard
standard
build
build
output
output
that
that
you
you
can
can
deploy
deploy
to
to
any
any
platform.
platform
It's
it's
just
just
going
going
to
to
take
take
a
a
lot
lot
more
more
work
work
to
to
configure.
configure
Now,
now
let's
let's
move
move
on
on
to
to
the
the
next
next
big
big
feature
feature
in
in
Next
next
12,
12
support
support
for
for
react
react
concurrent
concurrent
mode
mode
like
like
suspense.
suspense
If
if
you're
you're
not
not
familiar
familiar
with
with
suspense,
suspense
it's
it's
basically
basically
a
a
component
component
that
that
allows
allows
you
you
to
to
wait
wait
for
for
asynchronous
asynchronous
data
data
before
before
rendering
rendering
its
its
children.
children
As
as
of
of
today,
today
it's
it's
still
still
experimental
experimental
in
in
React,
react
but
but
is
is
still
still
used
used
in
in
production
production
on
on
some
some
websites
websites
like
like
Facebook.
facebook
However,
however
if
if
you
you
try
try
to
to
use
use
it
it
in
in
Next,
next
it
it
results
results
in
in
errors
errors
because
because
it
it
doesn't
doesn't
play
play
well
well
on
on
the
the
server.
server
In
in
Next
next
12,
12
you
you
can
can
opt
opt
in
in
to
to
experimental
experimental
concurrent
concurrent
features
features
to
to
get
get
these
these
features
features
working
working
with
with
server
server
side
side
rendering.
rendering
It
it
also
also
supports
supports
React
react
lazy
lazy
to
to
dynamically
dynamically
import
import
ES
es
modules,
modules
which
which
can
can
reduce
reduce
the
the
size
size
of
of
your
your
client
client
side
side
JavaScript
javascript
bundle.
bundle
Now
now
this
this
next
next
feature
feature
might
might
be
be
the
the
one
one
that
that
I'm
i'm
most
most
excited
excited
about,
about
React's
react's
server
server
components.
components
Server
server
components
components
allow
allow
you
you
to
to
natively
natively
render
render
HTML
html
from
from
a
a
React
react
component
component
on
on
the
the
server.
server
What's
what's
crazy
crazy
about
about
it
it
though,
though
is
is
that
that
it
it
uses
uses
HTTP
http
streaming
streaming
to
to
progressively
progressively
render
render
a
a
web
web
page
page
on
on
the
the
server.
server
That
that
means
means
if
if
you
you
need
need
data
data
for
for
one
one
component
component
and
and
then
then
another
another
component
component
after
after
that,
that
you
you
Don't
don't
have
have
to
to
wait
wait
for
for
one
one
after
after
the
the
other.
other
It'll
it'll
render
render
the
the
first
first
one,
one
then
then
the
the
next
next
one,
one
then
then
the
the
next
next
one
one
after
after
that,
that
which
which
really
really
opens
opens
up
up
a
a
whole
whole
new
new
world
world
of
of
possibilities
possibilities
when
when
it
it
comes
comes
to
to
designing
designing
full
full
stack
stack
web
web
applications.
applications
With
with
server
server
components,
components
you
you
can
can
stream
stream
HTML
html
from
from
an
an
edge
edge
function
function
immediately
immediately
and
and
progressively
progressively
show
show
updates
updates
As
as
your
your
data
data
comes
comes
in.
in
And
and
next,
next
you
you
can
can
change
change
a
a
page
page
or
or
file
file
name
name
to
to
dot
dot
server
server
dot
dot
JS
js
to
to
tell
tell
the
the
framework
framework
that
that
it's
it's
a
a
server
server
component.
component
When
when
this
this
component
component
is
is
rendered,
rendered
it
it
requires
requires
0
0
client
client
side
side
JavaScript.
javascript
That
that
means
means
fewer
fewer
kilobytes
kilobytes
for
for
the
the
end
end
user
user
to
to
download.
download
In
in
addition,
addition
you
you
can
can
fetch
fetch
data
data
directly
directly
side
side
the
the
component
component
without
without
having
having
to
to
use
use
functions
functions
like
like
get
get
static
static
props
props
or
or
get
get
server
server
side
side
props.
props
It's
it's
a
a
really
really
ergonomic
ergonomic
way
way
to
to
build
build
an
an
application.
application
You
you
use
use
react
react
patterns
patterns
from
from
start
start
to
to
finish
finish
or
or
server
server
to
to
client.
client
Now,
now
you'll
you'll
likely
likely
want
want
some
some
interactive
interactive
JavaScript
javascript
for
for
the
the
client,
client
so
so
you
you
can
can
also
also
import
import
regular
regular
client
client
components
components
as
as
well,
well
and
and
they'll
they'll
be
be
rendered
rendered
universally
universally
both
both
on
on
the
the
server
server
and
and
the
the
client.
client
The
the
combination
combination
of
of
server
server
components
components
and
and
middleware
middleware
looks
looks
like
like
a
a
really
really
awesome
awesome
way
way
to
to
build
build
an
an
app.
app
I'm
i'm
actually
actually
considering
considering
redesigning
redesigning
the
the
entire
entire
Fireship
fireship
site
site
with
with
these
these
latest
latest
features.
features
If
if
you
you
guys
guys
wanna
wanna
see
see
that
that
as
as
a
a
series
series
here
here
on
on
YouTube,
youtube
make
make
sure
sure
to
to
let
let
me
me
know
know
in
in
the
the
comments.
comments
To
to
wrap
wrap
things
things
up,
up
there's
there's
one
one
more
more
cool
cool
feature
feature
you'll
you'll
wanna
wanna
know
know
about.
about
You
you
can
can
now
now
import
import
modules
modules
using
using
URLs
urls
instead
instead
of
of
NPM.
npm
This
this
works
works
for
for
JavaScript
javascript
modules
modules
that
that
you
you
would
would
import
import
from
from
a
a
CDN,
cdn
but
but
you
you
can
can
also
also
use
use
remote
remote
URLs
urls
in
in
your
your
CSS
css
or
or
to
to
import
import
images
images
directly
directly
into
into
your
your
JavaScript
javascript
code.
code
Overall,
overall
Next.
next
Js
js
version
version
12
12
is
is
a
a
total
total
beast.
beast
Make
make
sure
sure
you're
you're
subscribed
subscribed
for
for
more
more
updates,
updates
And
and
if
if
you're
you're
a
a
pro
pro
member,
member
stay
stay
tuned
tuned
for
for
more
more
updates
updates
to
to
the
the
full
full
course.
course
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
In this video, the speaker discusses the features of Next 12, including the release of version 12, the use of a full stack JavaScript framework, and support for react concurrent mode. They also discuss server components and support for React and the use of URLs instead of NPM for modules. The speaker encourages viewers to subscribe to the channel and provide feedback on future updates.
Next.js 12 is a Beast
Just yesterday, Next. Js announced version 12 and it was even more impressive than Apple's new MacBook announcements, which is pretty mind blowing considering it's just a free JavaScript framework. They're setting the bar really high for what a full stack JavaScript framework is expected to do. Like, it now ships with a Rust compiler instead of JavaScript to give you 5 x faster builds. You don't need to know Rust, it just makes Next faster under the hood by replacing Babel, which is important because big complex apps tend to have slow build times. And I've already updated my full Next. Js course to use version 12, and I'm seeing significantly faster refresh and build times. That's pretty amazing, but it's not even close to being the coolest feature in this release. Let's take a look at all the new features in Next 12 and, more importantly, why you would wanna use them. If you're new here, like and subscribe. And if you wanna get really good at Next, Consider enrolling in my full course. Grab a discount in the description. The first feature I wanna look at is middleware. Middleware is not a new concept. Frameworks like Express JS use middleware to intercept an HTTP request and process it in some way before it goes to your actual route handler. With something like Next. Js though, things are a little more complicated. On one hand, you want your website to be really fast, and the best way to make that happen is to cache pre built HTML pages on a CDN. But when you Do that, you lose the ability to make your pages dynamic. So on the other end of the spectrum, you have server side rendering that uses a node server to fetch data from a database or API when the incoming request comes in, but that is slow and inefficient. In a perfect world though, developers would have both speed and dynamic content at the same time. And Next is really leading the way to make that happen. Vercel, the company behind Next, has a product called Edge Functions. These are serverless functions like AWS Lambda or Google Cloud Functions, except they're deployed to the edge like a CDN, so your end users get extremely fast execution with no cold starts. Now, here's where middleware comes in. In your project, create a file called underscore middleware in the pages directory. From inside it, you can export a function called middleware. This function will give you access to the incoming request and allow you to modify it, and it will run before rendering takes place for every page in the page's directory. You can also scope the middleware to subdirectories if you only want it to run on a subset of pages. What's awesome about middleware is that it makes your code way more efficient. For example, I may need to verify a user authentication credential on every page. If the user's logged in, we might want to retrieve some data from a database, otherwise redirect to the login page. Instead of importing that logic into every page, I can now just define it in the middleware and it will run on every page automatically. But as An added bonus when you go to deploy, the middleware is hosted on Vercel Edge functions. Instead of having one centralized node server, your back end code is deployed to the edge where it's very close to the end user and therefore much faster. That's great for Vercel, but if you're worried about vendor lock in, it provides a standard build output that you can deploy to any platform. It's just going to take a lot more work to configure. Now, let's move on to the next big feature in Next 12, support for react concurrent mode like suspense. If you're not familiar with suspense, it's basically a component that allows you to wait for asynchronous data before rendering its children. As of today, it's still experimental in React, but is still used in production on some websites like Facebook. However, if you try to use it in Next, it results in errors because it doesn't play well on the server. In Next 12, you can opt in to experimental concurrent features to get these features working with server side rendering. It also supports React lazy to dynamically import ES modules, which can reduce the size of your client side JavaScript bundle. Now this next feature might be the one that I'm most excited about, React's server components. Server components allow you to natively render HTML from a React component on the server. What's crazy about it though, is that it uses HTTP streaming to progressively render a web page on the server. That means if you need data for one component and then another component after that, you Don't have to wait for one after the other. It'll render the first one, then the next one, then the next one after that, which really opens up a whole new world of possibilities when it comes to designing full stack web applications. With server components, you can stream HTML from an edge function immediately and progressively show updates As your data comes in. And next, you can change a page or file name to dot server dot JS to tell the framework that it's a server component. When this component is rendered, it requires 0 client side JavaScript. That means fewer kilobytes for the end user to download. In addition, you can fetch data directly side the component without having to use functions like get static props or get server side props. It's a really ergonomic way to build an application. You use react patterns from start to finish or server to client. Now, you'll likely want some interactive JavaScript for the client, so you can also import regular client components as well, and they'll be rendered universally both on the server and the client. The combination of server components and middleware looks like a really awesome way to build an app. I'm actually considering redesigning the entire Fireship site with these latest features. If you guys wanna see that as a series here on YouTube, make sure to let me know in the comments. To wrap things up, there's one more cool feature you'll wanna know about. You can now import modules using URLs instead of NPM. This works for JavaScript modules that you would import from a CDN, but you can also use remote URLs in your CSS or to import images directly into your JavaScript code. Overall, Next. Js version 12 is a total beast. Make sure you're subscribed for more updates, And if you're a pro member, stay tuned for more updates to the full course. Thanks for watching and I will see you in the next one.
In this video, the speaker discusses the features of Next 12, including the release of version 12, the use of a full stack JavaScript framework, and support for react concurrent mode. They also discuss server components and support for React and the use of URLs instead of NPM for modules. The speaker encourages viewers to subscribe to the channel and provide feedback on future updates.