こんにちは。プログラミングスクールHappiness Chainでメンターをしているryoです。

2023年10月27日（金）午前2時から開催されたNext.jsカンファレンスにてNext.js14の発表がありましたので、今回のアップデート内容を記載していきたいと思います。

以下公式のリリースノートになります。

Turbopack使用時の信頼性向上（Turbopackの5000の統合テストがパス）

Next.js13にて発表されたTurbopack（Next.js向けに開発された試験的なもの）ですが、最初にNext.jsの全機能にサポートするようになりました。
100%のテストが合格したら安定版に移行するとのことです。
Turbopack未使用でも起動・リフレッシュが早いと思っていましたが、大規模になるほどその恩恵は大きくなるみたいです。
以下はNext.jsで開発されたvercel.comでのベンチマークですが、

ローカルサーバーの起動が53.3%高速化
コード更新によるリフレッシュが94.7%高速化

上記を見ると、現状からnext dev --turoを使わない手はないかなと思いました。

Server Actionsを安定版としてリリース

Next.js9より導入されたAPI Routesにて、バックエンドを構築することができるようになりましたが、そちらをより簡素化することと、クライアント依存でのパフォーマンス低下の際のUX向上を目的として、リリースされました。

App Routeを作成せず、コンポーネントにて関数を呼び出すだけで済むため、かなり簡素化されるなと思いました。
また、データ変更、再レンダリング、リダイレクトが1回の通信にて済むので、UX的にもいいかなと思いました。
こちら詳細を別途記事に書きたいと思います。

export default function Page() {
  async function create(formData: FormData) {
    'use server';
    const id = await createItem(formData);
  }
 
  return (
    <form action={create}>
      <input type="text" name="name" />
      <button type="submit">Submit</button>
    </form>
  );
}

Partial Prerendering（試験的）

動的コンテンツの初期読み込みの高速化のためで、React Suspenseをサポート(?)しました。
Suspenseを用いて以下のように記載した場合、

export default function Page() {
  return (
    <main>
      <header>
        <h1>My Store</h1>
        <Suspense fallback={<CartSkeleton />}>
          <ShoppingCart />
        </Suspense>
      </header>
      <Banner />
      <Suspense fallback={<ProductListSkeleton />}>
        <Recommendations />
      </Suspense>
      <NewProducts />
    </main>
  );
}

Partial Prerenderingを有効にすると、以下のHTMLが即座に構築されます。

<main>
  <header>
    <h1>My Store</h1>
    <div class="cart-skeleton">
      <!-- Hole -->
    </div>
  </header>
  <div class="banner" />
  <div class="product-list-skeleton">
    <!-- Hole -->
  </div>
  <section class="new-products" />
</main>

※こちらは試験的な機能で、現在開発中になりますので、アップデートされ次第、こちらに記載できればと思います。

メタデータの改善

メタデータをブロッキングメタデータとノンブロッキングメタデータに分離して、ノンブロッキングメタデータによって、UXを損なわないようにされました（初期レンダリング時に一部メタデータが送信されるようになった）。
Next.js14から、メタデータのviewport、colorScheme、themeColorのオプションがgenerateViewportを使う形になりました。

Next.js学習コースのリリース

Next.jsの一通りの知見がハンズオン形式で学べます。
コース内容を見た感じ、かなりクオリティが高いなと思いましたので、おすすめです。