Next js 15 is Here… New Changes Again?!

JavaScript Mastery

24 May 202408:13

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が提供する最新の機能で、最終出力を生成している間にもレスポンスをストリーミングして提供します。これにより、コードが一行ずつ生成される様子を見ながら待つ必要がなくなります。