2023年10月26日にリリースされていたNext.js 14 。Next.js 14でリリースされた気になるポイントだけ簡単にまとめておきます。

Next.js Blogで公開された内容（外部リンク）を見ると、今回のバージョンでは以下に重点を置きたと解説されています。

  • ローカル環境での起動時間の高速化（短縮化）：53％高速化
  • コード更新時の高速化：94％高速化
  • Server Actions（安定版）：Progressively enhanced mutations
    • 　キャッシュト再検証の統合：部分的な事前レンダリング
    • 　シンプルなファンクションコール、または、フォーム上でのネイティブな動作
  • 高速な初期静的応答＋動的コンテンツのストリーミング
  • Next.js Learn：App Router、Auth、データベースなどを教える無料コース

その中でも今回のNext.js 14で気になったのは、「Next.js Learn」と「Server Actions」の２つ。

Next.js Learn 無料学習コンテンツ

今回発表されたNext.js Learnでは、無料でNext.js 14を学ぶことができるオンライン学習です。

Next.js Learnのページにアクセスしますと、Next.jsの構築から学習できるコンテンツが用意されていて、今回のコンテンツで学習する概要、前提知識などが簡潔にまとめられています。

ページを次へと進むと、ページに記載されている順番通り進めていくだけで環境を構築することができるように解説されており、とても学びやすい学習コンテンツになっています。

内容も第１章から第16章まであり、内容も十分。必要なことだけが簡潔に記載されているので、これからNext.jsを学ぼうと考えている方にとって、これ以上の教材はいらないのではないか？と思わせる内容です。

以下の画像にリンクを貼ってありますので、気になる方はNext.js Learnを訪れて是非学習してみてください。

Server Actionsが正式版に

今回発表されたNext.js 14では、Server Actionsが正式版となると発表されています。

Server Actionsとは

Server Actionsとは、Next.jsがバージョン13.4で追加してきた機能で、クライアント側の（fetch関数など）処理を記述することなく、サーバ上でデータ更新を行うことができるとても便利な機能です。

Server Actionsがリリースされる以前のNext.jsでは、データを更新する為のJavaScriptなどのコードをクライアント側に記述していました。

Server Actions機能がリリースしてからのVersionではクライアント側の処理が必要なくなった為、クライアント側に記述していたJavaScriptなどのコードを削減することができる上に、JavaScriptなどを利用することができない環境でもフォームなどの機能を実装することができるようになります。

昨今のWebシステム（Webアプリ）ではサーバとクライアント間の応答速度が重視され、応答時間の長いWebシステムは敬遠されることを考えると、応答速度の短縮はサイトの滞在時間を増やすことができる手段となりますので、UIのユーザビリティやエクスペリエンス以外にも、SEO対策としても有効性があるとも考えられます。

今日は昨日と違って、朝から風もなく秋晴れ。仕事日和です。

今日も一日頑張りましょう！