HTNCodeをサポート

お好きな金額でサポートしていただけると嬉しいです！

(50円〜10,000円[税込]まで)

Next.js14が公開されたのでアップデートしてみた

作成日時：2023年10月28日 00:03

更新日時：2023年10月28日 19:33

Next.js

React

はじめに

Next.js14がついに公開されましたね。自身のサイトも、Next.js14にアップデートしてみました。
公式アナウンスにて、変更点がまとめられていましたのでChatGPTのお力を借りつつ、和訳してみたものをまとめます。

※まだ本記事執筆時点で、Next.js14は安定版になっていませんので、試される方は自己責任でお願いいたします。

■【公式】Next.js14 Blog
https://nextjs.org/blog/next-14

変更点

・--turboオプションの追加
・Server Actionsの安定版リリース
・Partial Prerendering
・metadataのオプションの削除
・Next.js Learnの追加

順に和訳を見ていきます。

--turboオプションの追加

Next.js 14では、開発モード next dev コマンドに --turbo オプションが追加され、Rust製のモジュールバンドラーツール Turbopackを使うことでホットリロードなどのリアルタイムコード反映エクスペリエンスが向上しています。

大規模なNext.jsアプリケーションでの統合テストでは、サーバー起動で53.3%、コード更新で94.7%の高速化を実現しました。安定版は今後の試験を重ねることでリリースされる予定です。

94.7%の高速化ってすごいですよね。笑
つまり、もんのすごーーーく早くなったってことです。正直、これはとっても嬉しい変更でした。
安定版ももうすぐみたいなので、楽しみに待ちましょう。

Server Actionsの反映

ReactのServer Actionsを組み入れたApp Router、API Routeによる入力フォームの簡易化などが導入され、フロントエンド/バックエンドのコーディングの労力が削減されました。また、ページ内での部分的なレンダリングをタグベースの簡易な処理で可能とするPartial Prerenderingも開発中のプレビュー機能として発表されています。

ServerActionsというのは、use serverをつけることで、そのスコープ範囲がサーバーサイドで動かせる機能のことです。それが今回安定版としてリリースされました。ついでにキャッシュの最適化とかもされてます。

export default function Page() {
  async function create(formData: FormData) {
    'use server';
    const id = await createItem(formData);　//ここがサーバーサイドで実行されます。
  }
 
 // 以下はSSRされた上でクライアントサイドで実行されます。
  return (
    <form action={create}>
      <input type="text" name="name" />
      <button type="submit">Submit</button>
    </form>
  );
}

Partial Prerendering

次にPartial Prerenderingですが、これはまだプレビュー版です。
Suspenseコンポーネントで囲った部分のコンポーネントがレンダリングされる前に、fallbackで指定したコンポーネントをレンダリングし、囲った部分のコンポーネントのレンダリングが完了した時に置き換えてくれるそうです。

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>
  );
}

metadataのオプションの削除

以下の3つのオプションが削除されます。

・viewport
・colorScheme
・themeColor

Next.js Learnの追加

Next.js Learn（Next.jsの学習用サイトです）に新たなコースが追加されました。
まだまだ今からNext.js13の勉強しようと思ってたのに・・・！みたいな方も結構いらっしゃるんじゃないでしょうか。
そういう方はこれ見ていただけたら結構助かるんじゃないかと思いました。

■Next.js Learn
https://nextjs.org/learn

補足

その他の点として、サイボウズ株式会社フロントエンドエンジニアのまっつー様がZennで書かれてた以下記事なんかも非常に参考になりました。
ありがとうございます。

■Next.js 14 で導入された React Taint APIs を試してみた
https://zenn.dev/cybozu_frontend/articles/react-taint-apis

おわりに

以上、Next.js14についての紹介でした。
まだまだこれからいろんな記事やドキュメントが出てくると思いますので、楽しみにしつつ、遅れないようについていきたいと思います！

それではまた。

HTNCode