Next year 16 just dropped and it is not

a minor update. We are talking Turboac

being stable, React compiler being built

in, routing that's finally smart and new

caching APIs. In fact, they launched an

API that genuinely solved a problem that

I've been facing for months. So, I am

incredibly excited for this specific

version. So in this video, let me walk

you through all the important features

in this version with examples, any

improvements made and also any breaking

changes which do exist. So let's quickly

dive in. First exciting update is that

Turopac has finally reached stability

for both development and production

build. It is going to be a default

bundler for all applications. And if you

want to opt into Webpack, you could do

so over here by adding this specific

hyphen Webpack parameter. With TurboAC,

you're going to get two to five times

faster production builds, up to 10 times

faster fast refresh, which is

incredible, and you don't need any

config. Like I mentioned, it's going to

be the default. The next update is

TuropAC file system caching. Now, this

is a beta update. It now supports file

system caching in development. Now file

system caching is going to keep the

build artifacts on the disk itself and

you're going to get mere instant

restarts. Now this one's going to be

huge for monor repos because as you know

mon repos can get really massive. So

versel internal apps are already using

these features and they're already

seeing improvements with dro back. In

fact even on excel social media I see

quite a few folks upgrading and seeing

improvements. I upgraded my custom

course platform that I built on top of

nex.js JS as well today and I also saw

improvements. So this is definitely

really huge. Next is React compiler

support. We get built-in support for

React compiler. Since React compiler is

now stable, it is also now stable in

Nex.js 16 following the release from

React itself. You get automatic

memoization built right in. You don't

need to use use memo or use callback.

Compiler is going to handle it all. It's

not enabled by default yet, but it's

only a single flag away, which you

should definitely check out over here.

That's all you need to add in next

config. So, I highly recommend it. Next

year 16 has in fact provided us with new

caching APIs for explicit control over

caching behavior. And one of these APIs

have genuinely changed my life. It has

definitely helped me a lot. And the

first one is revalidate tag. Now,

revalidate tag now requires a cache

profile. Devalidate tag allows you to

tag your cache and then allows you to

purge the cache. You can basically purge

the tagged cache. Now, this is

incredibly useful, especially when you

don't want to purge the cache of your

entire page. You only want to purge the

cache of a specific section in your

page. In that case, you can just tag

that and then page it. But now, you need

to pass in additional cache profiles.

What this means is you need to pass in

more information such as how long do you

want the tags to be cached, when do you

want to revalidate them, how long do you

want them to exist, expire, and so on.

Need to pass that value. For most cases,

it's max. That's what they recommend as

the default. And max, if you take a

look, it's going to be 5 minutes, 30

days revalidation period, and one year

expiry. But if you want more granular

controls, you could do so as well. Now

the use case of this would be blog post,

analytics dashboard, product listing

that don't need immediate updates but

should eventually revalidate. That's

where revalidate tag helps. Now here

revalidate tag works like a steel while

revalidate. The old content is served

instantly but nextjs quietly fetches the

latest data in the background. That's

what you need to know about revalidate

tag. Next is update tag. It's a new

server actions only API that provides

read your right semantics expiring and

immediately refreshing cache data within

the same request. Now this is huge

because you don't need to necessarily

request it and then ask to purge it. You

could just ask it to expire like cache

and refresh immediately so users can see

their changes right away. This ensures

interactive features reflect changes

immediately. So if you have specific

features where you want to see the data

right away, then you could do so. You

don't have to necessarily cache it for a

specific period and then ask it to

refresh and all of that. An example

would be user settings, profiles,

dashboards, anywhere the user expects

immediate feedback after a mutation. Now

unlike revalidate tag, update tag will

expire and refresh immediately. It's

instant. So, it's perfect for actions

where users expect to see their updates

right away, which is incredible that

this exists cuz I know it was a

complaint that many of my students

taking my nextgs course had cuz they

just wanted to see updates right away

and now you could do so. Next, we have

the refresh API. This is again a new

server actions only API for refreshing

uncashed data only. It does not touch

the cache at all. For example, this

would be useful in cases where you have

notification badges, maybe add toart

counts, live metrics, unread counts,

data that isn't cached but displayed

alongside cached content. You would use

something like this. For example, you

want to update the notification in the

database and you want to refresh the

notification count displayed in the

header which is fetched separately and

not cached. In that case, you could use

refresh function. This API is

complimentary to the client side router

refresh. So for example, if you want to

do this server side, you could do so

versus on the client side, you would do

router refresh itself. Now this does not

touch the cache at all. It only

refreshes live uncashed data. So your

static shell stays fast while just the

dynamic bits update. So keep that in

mind. Now remember I told you that there

is one API that I know is going to be a

game changer for me and it is in fact

the caching API. the update tag itself.

Now, I wanted to use a specific update

tag API because I wanted to immediately

get rid of the cache, refresh the cache,

especially when a student completes a

specific lesson in my course platform.

They go and press the button mark as

completed. Now, I really just wanted to

update the cache right away. I put the

tick mark right away so they know that

the lesson has been completed so I can

route them right away. And this specific

feature really allows me to do so. The

mount to lesson completed button does a

lot. So I could just leverage this

feature and instantly ask the user to

navigate to the next route while running

all the other features in the background

with the next.js after function. Now if

you don't know what after function is, I

would highly recommend you to check out

this specific video. API is going to be

a game changer for sure. My next API is

the build adapters API. If you want to

deploy your Nex.js app to your own infra

and customize your build steps such as

run Cloudflare workers, transform,

upload assets to S3 is a very common

one, all of that, then you could have

use the build adapters API for doing so.

So for example over here, it will allow

you to create custom adapters that hook

into the build process. You can define

your file here, adapter file, and then

pass in the adapter path over here. This

will allow you to deploy your

application wherever you like and you're

not necessarily tied to one specific

provider. So think of build adapters as

a plug-andplay adapters for deployment.

Netlify, Cloudflare or your internal

platform can hook directly into it. It

is quite but a massive move. Next is

truly becoming modular with this change.

The next really big update is enhanced

routing. Now, nextJS in 16 includes a

complete overhaul of routing and

navigation systems, making page

transitions linear and faster. Now, this

is a complaint that a lot of us had in

the community that when you click a

link, it doesn't feel instant even

though the link is not doing much. Now,

one of them is layout dduplication. For

example, whenever in the past when

prefetching multiple URLs with a shared

layout, the layout is downloaded once

instead of separately for each link.

Now, let's say a page with 50 product

links now downloads the shared layouts

once instead of 50 times, drastically

reducing the network transfer size. For

example, in my course platform, I have a

bunch of links. Instead of the layout

being downloaded several times, it's

just going to be downloaded once and

cache, which is awesome. Incremental

prefetching. This means smaller, smarter

network requests. NextJS only prefetches

parts not already in the cache rather

than entire pages. For example, now it's

going to look at caches. The prefetch

cache now cancels request when the link

leaves the viewport. prioritizes link

prefetching on hover or when entering

viewport and refetches links when their

data is invalidated and it works

seamlessly with the cache components.

Now if you think about it taking a step

back cache components is where we are

all headed which is why all these

changes incrementally are towards that.

Now the trade-off here is that you may

see more prefetch requests but with

lower total transfer sizes which means

less of a bundle but more requests in

general. It is going to be very useful

for the course platform that I've built

and for my students taking the model for

stackjs course because they're going to

find navigation quite instant. And if

you see it was actually quite instant

and that's basically because I've

actually upgraded my custom course

platform to next year 16 which is

awesome. Like I mentioned about cache

components, next year 16 now removes the

experimental PPR flag that is partial

pre- redering flag and PPR is in fact

being integrated into cache components.

Now you can opt into PPR using the

specific configuration but you can no

longer rely in when you upgrade to next

year 16 for the specific PPR flag. you

have to change your flag essentially so

that there are differences in the

implementation and cache components

bring additional features and behaviors

that will be documented and announced

ahead of the NexJS con that means it's

very soon so I'm really excited because

I'll be in California for that but this

is incredible because you now get cache

components which is amazing which is

huge but now you get PPR into it which

also makes a lot of sense because

partial pre-rendering

loads your static content and dynamic

content gets streamed in with it being

coupled with cache components. It can

then figure out what to cache, what not

to catch, and so on. So, this is

amazing. This unlocks a lot. And if you

don't know what cache components are,

then definitely check out my post on use

cache. It's completely free and you can

definitely go check it out. I'll link it

down in the description below as well.

Next year 16 also uses the latest Canary

release from React which is React 19.2.

You have to definitely check out this

specific video if you haven't already on

React 19.2 features that you absolutely

need to know about and it has view

transitions, use effect and activity. I

have some more videos dropping very soon

on this but definitely check out the

React 9.2 video. Next year 16 uses that

as a canary release. And lastly, there

are also some breaking changes. However,

the ones you need to be aware of is that

the node version has changed. Typescript

5 plus is now the minimum version. There

are few deprecated commands here. There

are few behavioral changes and so on.

The thing you need to be aware of is if

you're using revalidate tag then it has

an additional property you need to be

aware of. Builder file has is now been

renamed to proxy to clarify network

boundary and routing focus. This is

amazing because middleware the name

itself was not the best. So this makes

it even clear what this file does. But

this means that you would have to rename

your middleware file. So definitely keep

that in mind as you upgrade. And partial

pre-rendering are evolving into cache

components. So that flag is no longer

available as well. So keep that in mind.

And that's it. These are all the changes

in NextJS 16 beta that has been out. But

I'm sure there are quite a few features

that are going to drop closer to the

nextJS con in less than two weeks. So

keep an eye out on my channel for more

updates related to the next year's

release. So I plan to even drop a course

on next year 16 which is going to be

free. So keep an eye out on that and

subscribe to my channel if you haven't

already. As next steps, I definitely

recommend you to check out this React

19.2 2 video which goes handinhand with

nextj 16 beta so you are aware of all

the react 19.2 features in next year 16.

So thanks so much for watching. Bye for

now.