Next js 15 is Here… New Changes Again?!
Summary
TLDRこのビデオでは、VercelのCEOであるGMO Rouchが開発したNext.jsの最新バージョンであるNext.js 15について紹介しています。React 19のサポート、React Compilerの統合、および改善されたキャッシング技法などが含まれています。また、Next.jsがウェブAPIを変更しないようにしたことや、新しいPPR(部分的な事前レンダリング)機能、Next Afterという新しい機能についても触れています。さらに、開発プロセスを高速化するためにTurbopackを採用し、外部パッケージのバンドルもサポートしています。これらの新機能を学ぶためのガイドも提供されています。
Takeaways
- 😀 Vercel社のCEOであるGMO Rouchが、開発者がReact周りの設定に数週間を費やすことがあるのに対して、Vercelは8年間をかけてそのプロセスを簡素化しようとしています。
- 🚀 Next.js 15は、これまでのキャッシュの不都合を解消し、開発者の体験を改善することを目指しています。
- 💡 Next.jsはReactを置き換えることで、多くの開発者がアプリを書き換える必要があると感じていますが、実際にはそうではないと主張しています。
- 🔍 Next.js 15はReact 19の機能をサポートしており、これまでのuseRefなどの問題を解決するreact compilerを内蔵しています。
- 🛠️ React compilerはコードを最適化し、再チェックが必要ない部分を自動的に判断してアプリの実行速度を向上させます。
- 🌐 Next.jsはグローバルWeb APIを変更することから手を引いて、fetchやroute handlersが自動でキャッシュする動作を削除しました。
- 🎨 Next.js 15では、SSG、ISR、SSRを組み合わせた新しいレンダリング戦略であるPPR(部分的な事前レンダリング)が導入されています。
- 📺 YouTubeの再生カウントのように、重要な処理を優先して行い、その後に余計な処理を行うNext Afterという機能が追加されました。
- 🛠️ 開発者は現在、MPX create next appを使用してNext.js 15のRC版を試すことができますが、年末には正式版がリリースされる予定です。
- 🔧 Next.jsは開発モードでwebpackの代わりに高速なバンドラーであるTurbopackを採用し、開発プロセスを高速化しています。
- 📦 Next.jsはアプリディレクトリ内の外部パッケージをデフォルトでバンドルし、アプリケーションのcold startを改善し、開発者の体験を向上させています。
Q & A
Vercel社のCEOであるGMO Rouchはどのような問題を解決しようとしましたか?
-GMO Rouchは、開発者がReact周りのセットアップに数週間も費やすことがあるという問題を解決しようとしました。彼は8年間をかけて、他の開発者たちが同じような時間をかけずに開発できるようにプロセスをスピードアップしました。
Next.js 15の目的は何ですか?
-Next.js 15の目的は、React開発者が効率的に開発を行うためのプロセスをさらに高速化し、キャッシュの問題を改善することです。
Next.jsはなぜReactを「食べる」と言われていますか?
-Next.jsはReactの機能を拡張し、より高速で効率的な開発体験を提供するため、Reactを「食べる」と言われています。しかし、その多くはNext.jsのマジックのように感じる部分や、アプリを書き換える必要があると感じる開発者もいます。
Next.js 15がReact 19の何をサポートするようになりましたか?
-Next.js 15はReact 19のuseReplacementと呼ばれる新機能をサポートしました。これはReactのフックをほとんど置き換え、refをpropとして渡す機能を提供します。
React Compilerとは何で、なぜ重要なのですか?
-React CompilerはReactのコードを最適化するオープンソースのコンパイラです。開発者がuseMemoやuseCallbackなどの最適化技術をスキップしたり誤用したりすることからアプリが遅くなる問題を解決し、自動的にコードのどの部分が再チェックが必要かどうかを判断してアプリを高速化します。
Next.js 15ではGlobal Web APIsをどのように扱う予定ですか?
-Next.js 15では、以前はfetchを使用するとキャッシュ結果が変更される問題がありましたが、開発者からのフィードバックを受けて修正し、fetch、route handlers、linkを使用したクライアントナビゲーションは自動的に結果をキャッシュしなくなりました。必要であれば、フラグを渡してキャッシュを有効にすることができます。
Partial Pre-rendering (PPR)とは何ですか?
-Partial Pre-rendering (PPR)は、ページの一部をSSGでレンダリングし、もう一部分をSSRまたはISRで動的にレンダリングする新しいアプローチです。これにより、静的なコンテンツと動的なコンテンツを組み合わせて最適なパフォーマンスを実現できます。
Next.js 15でのNext Afterとは何ですか?
-Next Afterは、サーバーがウェブサイトのコードをブラウザに送信する際に、重要なタスクを優先的に処理し、その後に余計なタスクを実行する機能です。これにより、ユーザーはサーバーの余計なタスクが完了するのを待たずにコンテンツを受信できます。
Next.js 15で使用する新しいバンドラーは何ですか?
-Next.js 15では、開発モードで使用する新しいバンドラーとしてTurbopackが採用されています。これはwebpackと同じようにウェブサイトのファイルをバンドルしますが、より高速でスムーズです。
外部パッケージのバンドルはどのように改善される予定ですか?
-Next.js 15では、アプリディレクトリ内の外部パッケージもデフォルトでバンドルされるようになり、これによりアプリケーションのコールドスタートを改善し、遅延を減らし、開発者の体験を向上させます。
Vercelの最新機能としてAIストリームとは何ですか?
-AIストリームはVercelが提供する最新の機能で、最終出力を生成している間にもレスポンスをストリーミングして提供します。これにより、コードが一行ずつ生成される様子を見ながら待つ必要がなくなります。
Outlines
🚀 Next.js 15の新機能とアップグレードガイド
Vercel社CEOであるTanmai GopalがNext.js 15のリリースを発表しました。このアップグレードは、開発者がReactを使いやすくするための8年間の努力の集大成と位置付けられています。新機能として、React 19の`use`の改善、React Compilerのサポート、キャッシュの最適化、そして部分的な事前レンダリング(PPR)などが挙げられます。また、Next.jsはグローバルWeb APIを変更しないように変更され、`fetch`や`link`を使用したナビゲーションでのキャッシュも制御可能になりました。このセクションでは、Next.js 15の主な変更点と、それらを活用するためのガイドラインが説明されています。
🛠️ Next.js 15の追加新機能と開発効率の向上
Next.js 15では、新たな機能として`next/after`が導入され、サーバーの追加タスクが完了するまでユーザーを待たないようにする仕組みが提供されています。また、開発効率を高めるために、Next.jsはwebpackの代替として`turbopack`を採用し、開発モードでのバンドルプロセスを高速化しています。さらに、外部パッケージのバンドルもアプリディレクトリ内でデフォルトで行われ、アプリケーションのコールドスタートを改善し、開発者の体験を向上させています。Vercelの最新機能も紹介されており、AIがリアルタイムでコードを生成する様子を見ることができるとのことです。
Mindmap
Keywords
💡Next.js
💡React Compiler
💡Partial Pre-rendering (PPR)
💡Vercel
💡Release Candidate (RC)
💡Hydration
💡Global Web APIs
💡SSG (Static Site Generation)
💡Turbopack
💡Next After
Highlights
GMO Rouch, CEO of Versel, emphasizes speeding up development processes.
Next.js 15 aims to improve caching and hydration errors.
Developers express concerns about Next.js having too much 'magic' and potential app rewrites.
Introduction of a quick guide outlining Next.js 15 features.
Release candidate (RC) status of Next.js 15, moving to general availability (GA) later this year.
Next.js 15 supports React 19, including new React compiler features.
React compiler optimizes code by eliminating useMemo and useCallback hooks.
Next.js 15 stops modifying global web APIs, fixing issues with fetch and route handlers.
Introduction of PPR (Partial Pre-Rendering) for combining SSG and SSR.
Next.js introduces 'Next After' to prioritize important tasks on the server.
Instructions for using Next.js 15 features with MPX create next app.
Next.js 15 adopts TurboPack for faster development bundling.
Support for bundling external packages in the app directory to reduce latency.
Introduction of Vercel's AI streaming responses while creating final output.
Announcement of upcoming updates to Next.js course to include new features.
Transcripts
yesterday GMO Rouch the CEO of versell
realize that I'm spending weeks just
setting up all this stuff around react
instead he spent eight years to speed up
that process for every other developer
next GS5 aims to achieve that cashing no
longer sucks yeah cashing improvements
hydration errors improved developers not
yet ready saying that nextjs is eating
react that there's too much magic going
on and thinking they'll have to rewrite
their apps to keep up I used to agree
with all of these claims but I no longer
do this is not my first rodeo so for
that reason in this video I'll give you
a quick noons breakdown of what happened
during versel ship conference and bring
you up to date and no this isn't
sponsored by Rell it's just my honest
take on the news alongside this video
I've also prepared a quick next 15 guide
that outlines the most important new
features check it out in the description
with that said you don't need to run to
update your code immediately RC stands
for release candidate meaning it will
move to GA or general availability later
this year while they wait for react 19
to be fully supported and I'm happy to
say that we'll update our ultimate nsgs
course to v15 as soon as that happens
teaching you how to Leverage The most
important react 19 features and react
compiler which next 15 supports by
default improved caching methods partial
pre-rendering and even this new next
after thingy and to make sure I can
explain it properly I've already done
the research in the next 15 guide you
can already start learning about all
this stuff first and foremost next 15
now supports react 19's use replacing
most react hook or everybody's pain of
having no ability to pass ref as a prop
but what's even more interesting is that
nextjs now supports the newly open-
sourced react compiler which optimizes
your code out of the box eliminating use
memo and use callback Hooks and that's
great for multiple reasons having been a
developer for a long time it has been a
huge pain to see many developers either
skipping or misusing these optimization
techniques this is where react compiler
comes into the picture it helps your app
run faster by automatically figuring out
which parts of your code do or don't
need to be rechecked if they haven't
changed saving time and if you're
interested in understanding the inner
workings of react compiler make sure to
check out the official docs explaining
how it chooses which components to
memorize or to skip moving ahead next
nextjs has finally decided to stay away
from modifying Global web apis before
next 15 using fetch would cash its
results for you this upset some devs as
nextjs was directly changing the global
API but after seeing the confusion it
caused they fixed it it was similar with
route handlers by default get API routes
were being cached which left everyone
confused wondering why do I keep getting
the same results over and over it was
meant to be helpful but it backfired so
thankfully nextjs HT us and starting
from next 15 fetch route handlers and
client navigation using link won't
automatically cash results anymore but
if you do want to cash something you can
simply pass a flag to make it happen you
might have heard me talking about SSG
ISR and SSR plenty of times in my
courses by default
nextjs performs an SSG rendering
strategy and to use the other two we can
just provide a flag to that page and
switch to them immediately but you
needed to choose only one now we can do
something else entirely we can make one
part of the page SSG while the other
part of the page is SSR or ISR combining
The Best of Both Worlds this new
approach is called PPR part partial
pre-rendering and if you're wondering
whether this could actually be helpful
and work as described it does it really
does and to show you here's the demo
using this PPR strategy keep your eyes
glued on the screen while I explain this
notice that if you refresh the page
you'll see that the product details
remain static while the recommended
products and pricing update with each
refresh another use case of partial
pre-rendering can be found within our
Dev overflow application where question
details can stay static with SSG while
the voting and answers are Dynamic with
SSR so if you're enrolled in our next GS
course you'll soon find a new section
that covers this feature and explains
how to implement it in any nextjs
project another cool feature nextjs has
introduced is next after a bit of a
confusing name but I think it makes
sense when the browser requests the
website code the server does a bunch of
stuff to send it back to you but many
times alongside the website it also
needs to do extra things now it's not
fair that you have to wait longer just
because the server has some extra stuff
to do so next after lets the server do
all the important stuff first and only
then it takes care of the extra tasks
without making you wait a real example
of where you would use this is is
YouTube views YouTube can first process
your request and send this video out to
you and while you're watching it it can
increase the view counter feed the
algorithm with your preferences and
update the analytics but you get the
video first that's how you can use next
after but enough talk how can we really
use those next 15 features well to use
next5 for now you have to run MPX create
next app add RC instead of latest but
only for now because around the end of
this year we're most likely to see all
of these features being stable alongside
the usual installation questions it will
also ask you about turbo Turbo pack is a
super organized high-speed bundler for
web developers just like webpack bundles
up all your websites files and assets
turbo pack does the same but faster and
smoother from v15 nextjs will begin
adopting it as the primary bundler in
development mode instead of webpack
aiming to speed up development process
if you're excited about seeing all of
these features in action with a
step-by-step video let me know down in
the comments and I'll make it nextjs has
also added support for bundling external
packages in the app directory they're
bundled by default to improve the cold
start of the application reducing
latency and improving the overall World
developer experience there have also
been so many other changes also not
directly related to next 15 but ver
cel's latest features they added to v0
now their AI streams the response while
it's creating the final output no need
to wait click it and AI will write the
code line by line while you're watching
it do it but it's still only making some
basic HTML stuff so no need to worry
that it will replace you but I have to
give it to it it has silky smooth
streaming we love
streaming that's it for this quick video
and I'll see you in the next one have a
wonderful day
5.0 / 5 (0 votes)