【和訳】Next.js14のリリースで、Server ActionsがStableになったらしい

技術

先日開催された(らしい。素人すぎてさっき知った)、Next.js Conference 2023で、Nextの最新バージョンであるNext.js 14がリリースされたそうです。
13のalphaのときから、「これ便利そうじゃね?(初心者並感想)」と感じていたServer ActionsがStableになったということで、ついでに14になってどう変わったのかを調べてみました。
ということで、とりあえず公式ブログ(https://nextjs.org/blog/next-14)を見ました。
んにゃぴ・・・よくわかんなかったです。なので、毎度のごとく解説させるついでに和訳もGPT様にやってもらいました。
以下、その内容です。

プロンプト:以下の記事を、中学生程度の理解力でも分かるような平易な言葉遣いを選びつつ、内容を一切省くことなく和訳してください。
(Next.jsの公式ブログの記事コピペ)

↓出力された和訳を整えました。

Next.js 14

Next.js 14の主な内容

  • Turbopack: App & Pagesルーターのテスト5,000件が合格
  • ローカルサーバー起動が53%速くなりました
  • Fast Refreshによるコード更新が94%速くなりました
  • Server Actions (安定版): 徐々に強化される変更機能
  • キャッシュや再検証との統合
  • シンプルな関数呼び出し、またはフォームでネイティブに機能
  • 部分的なプリレンダリング (プレビュー): 初期の静的な応答が早く、動的なコンテンツのストリーミングが可能
  • Next.js Learn (新): Appルーター、認証、データベースなどを教える無料コース

Next.js Compiler: Turbocharged

  • Next.js 13以降、ページとAppルーターの両方でローカル開発のパフォーマンス向上に取り組んでいます。
  • Rustベースのコンパイラがすぐに安定します。Turbopack(Rustエンジン)を使って5,000のテストが合格。
  • Vercel.comでのテストでは、サーバー起動が最大53.3%速く、Fast Refreshによるコード更新が最大94.7%速くなりました。

フォームと変更

Next.js 9で導入されたAPIルートは、フロントエンドコードと一緒にバックエンドエンドポイントを簡単に構築できます。
例えば、pages/api/submit.tsファイルを新規作成することができます。
そしてクライアント側では、Reactとイベントハンドラ(onSubmitなど)を使用してAPIルートへのfetchを行うことができます。

Server Actions (安定版)

APIルートを手動で作成する代わりに、Reactコンポーネントから直接呼び出せるサーバー上で安全に実行される関数を定義できます。
サーバーアクションは過去にサーバー中心のフレームワークを使用していた開発者にとって馴染み深いものです。
フォームを通じてサーバーアクションを使用することは進化的な強化に役立ちますが、フォームなしで直接関数として呼び出すことも可能です。

キャッシュ、再検証、リダイレクトなど

サーバーアクションはAppルーターモデル全体に深く統合されています。
キャッシュされたデータを再検証する、異なるルートにリダイレクトする、クッキーを設定・読み取る、最適なUI更新をハンドルする、サーバーからのエラーを表示する、クライアント上の読み込み状態を表示するなどの機能があります。

部分的なプリレンダリング (プレビュー)

SSR、SSG、ISRの研究開発から発展した、動的コンテンツのためのコンパイラ最適化技術です。
部分的なプリレンダリングは、ReactのSuspense境界によって定義されます。

メタデータの改善

以前のバージョンでは、ページやコンポーネントの静的メタデータを定義するのが難しい場合がありました。
Next.js 14では、コンポーネントの静的メタデータを直接定義し、コンパイル時にそれらを収集・利用することができます。

Next.js Learnコース

Next.jsの開発チームが提供する新しい無料オンラインコースです。
コースは初心者から上級者まで、Next.jsの全範囲にわたっています。
これには、Appルーター、認証、データベースの統合など、実践的なトピックが含まれます。

その他の変更

[破壊的変更] Node.jsの最小バージョンが18.17に
[破壊的変更] next-swcビルドのWASMターゲットを削除
[破壊的変更] @next/fontのサポート終了、next/fontへの移行
[破壊的変更] ImageResponseのインポート先の変更、next exportコマンドの非推奨化
[非推奨] next/imageのonLoadingCompleteとdomainsの非推奨化
[機能] fetchキャッシュ周りの詳細なログ記録を有効化
[改善] 基本的なcreate-next-appアプリケーションの関数サイズの削減と起動時間の最適化
[改善] ESLintの設定ファイルが推奨プラクティスに従って改善された
[改善] モジュール間の依存性管理が簡単化された

コメント

タイトルとURLをコピーしました