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

Outlines

00:00

🚀 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の主な変更点と、それらを活用するためのガイドラインが説明されています。

05:00

🛠️ Next.js 15の追加新機能と開発効率の向上

Next.js 15では、新たな機能として`next/after`が導入され、サーバーの追加タスクが完了するまでユーザーを待たないようにする仕組みが提供されています。また、開発効率を高めるために、Next.jsはwebpackの代替として`turbopack`を採用し、開発モードでのバンドルプロセスを高速化しています。さらに、外部パッケージのバンドルもアプリディレクトリ内でデフォルトで行われ、アプリケーションのコールドスタートを改善し、開発者の体験を向上させています。Vercelの最新機能も紹介されており、AIがリアルタイムでコードを生成する様子を見ることができるとのことです。

Mindmap

Keywords

💡Next.js

Next.jsは、Reactフレームワークであり、ウェブアプリケーションの開発を効率化するツールです。このビデオでは、Next.jsの最新バージョンであるNext.js 15の紹介とその新機能の解説が行われています。Next.jsは、開発者がReactをより速く簡単に使用できるように設計されており、ウェブ開発におけるテーマとメッセージに非常に密接に関係しています。

💡React Compiler

React Compilerは、Reactアプリケーションのコードを最適化するためのツールです。ビデオでは、Next.js 15がReact Compilerをサポートし、開発者がuseMemoやuseCallbackのような最適化テクニックを自動的に使用できるようになるという点に焦点が当てられています。これは、アプリケーションのパフォーマンスを向上させる上で重要な役割を果たしており、ビデオの主題に直接関係しています。

💡Partial Pre-rendering (PPR)

Partial Pre-renderingは、Next.js 15で導入された新しいレンダリング戦略です。これは、ページの一部をStatic Site Generation（SSG）としてレンダリングし、残りの部分をServer-side Rendering（SSR）またはIncremental Static Regeneration（ISR）として扱うことができます。ビデオでは、PPRがどのように役立つのかを説明しており、デモも紹介されています。これは、ウェブサイトのパフォーマンスとユーザーエクスペリエンスを向上させる重要な概念です。

💡Vercel

Vercelは、Next.jsを開発している企業です。ビデオでは、VercelのCEOであるGMO RouchがNext.jsの開発と改善に貢献したと紹介されています。Vercelは、ウェブ開発者にとって重要なプラットフォームであり、ビデオのテーマと内容を理解する上で重要なキーワードです。

💡Release Candidate (RC)

Release Candidateは、ソフトウェアの開発プロセスにおける一段階を指します。これは、ソフトウェアが正式にリリースされる前に最終テストを行っている状態を意味しており、ビデオではNext.js 15のRCについて触れています。これは、開発者が新しい機能を試すことができる重要な時期であり、ビデオのテーマに関連しています。

💡Hydration

Hydrationは、Reactアプリケーションにおいて、サーバーサイドで生成されたコンポーネントをクライアントサイドで再アクティブにするプロセスです。ビデオでは、Next.js 15がhydrationエラーを改善し、開発者にとってより良いエクスペリエンスを提供するという点に言及されています。これは、ウェブアプリケーションのパフォーマンスとユーザーエクスペリエンスに直接関係する重要な概念です。

💡Global Web APIs

Global Web APIsは、ウェブ開発において使用される標準的なAPI群です。ビデオでは、Next.jsがGlobal Web APIsを変更しないように決定し、fetchを使用する際のキャッシュに関する問題が解決されたと説明されています。これは、ウェブアプリケーションの互換性と予測可能性を高めるための重要な変更であり、ビデオの内容に密接に関係しています。

💡SSG (Static Site Generation)

Static Site Generationは、ウェブサイトを事前にレンダリングし、静的なファイルとして提供することでウェブサイトのパフォーマンスを向上させる方法です。ビデオでは、Next.jsのデフォルトのレンダリング戦略としてSSGが使用されており、PPRと組み合わせて使用される例も紹介されています。これは、ウェブサイトの高速化とスケーラビリティに重要な役割を果たすキーワードです。

💡Turbopack

Turbopackは、ウェブ開発者がウェブサイトのファイルを高速にバンドルするためのツールです。ビデオでは、Next.js 15が開発モードでTurbopackを主なバンドラーとして採用し、開発プロセスを高速化するという点に言及されています。これは、開発者の生産性とウェブアプリケーションのパフォーマンスに直接関係する重要な技術です。

💡Next After

Next Afterは、Next.js 15で導入された新しい機能で、サーバーがウェブサイトコードを提供する際に重要なタスクを優先して処理し、その後に他のタスクを実行するように設計されています。ビデオでは、YouTubeのビューカウンターを例に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.