Zenn
🔼

Next.js 14 がアナウンスされたので 要点をまとめてみた

2023/10/27に公開
JavaScript
Next.js
Vercel
#
App Router
#
nextjs14
tech

先日 Next.js 14 のリリースがアナウンスされました。

アナウンスされている情報を簡単な解説を交えながら要点をまとめていきます。

Updates

Turbopack

NextJS は Turbopack というバンドラーを次のマイナーリリースで安定版にする予定です。
それを利用したサーバー起動、コード更新が大幅に高速化されました。

サーバー起動は 53% 高速化、
コード更新は 94% 高速化されました。

...

有り得ない程早くなってますね。
一体何が有ったのか・・・

NextJS チームは Rust ベースのコンパイラのコードを修正したそうです。
現在テストの9割をパスしており、10割に達すれば、次のマイナーバージョンで Turbopack が NextJS のデフォルトになります。

更に七年以上残っていたバグも修正されるそうです。

Server Actions

サーバーアクションとは、単純な関数の最初に "use server" を付けることで利用できる機能です。 (ファイルの最初に付けることも可能で、常にサーバーサイドで動く関数になります。)

前までは unstable として提供されていましたが、安定版に切り替わります。

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 (@Preview)

Partial Prerenderingとは、一部が事前にレンダリングされ提供される機能の事です。

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

Suspenseコンポーネントに囲われている所が <Recommendations />がレンダリングされる前に <ProductListSkeleton /> をレンダリングし、<Recommendations /> がレンダリング完了した時に置き換えるそうです。 (2023/10/27 現在)

まだプレビュー版としての共有とのことです。

fix some metadata

以下のオプションが削除されるそうです。

viewport, colorScheme, themeColor

Next.js Learn Course

Next.js Learn という Next.jsの学習サイトにコースが追加されたようです。

追加されたコース一覧

The Next.js App Router: App Router
Styling and Tailwind CSS: スタイリングとTailwind CSS
Optimizing Fonts and Images: フォントと画像の最適化
Creating Layouts and Pages: レイアウトとページの作成
Navigating Between Pages: ページ間のナビゲーション
Setting Up Your Postgres Database: Postgresデータベースのセットアップ
Fetching Data with Server Components: サーバーコンポーネントを使用してデータを取得
Static and Dynamic Rendering: 静的および動的なレンダリング
Streaming: ストリーミング
Partial Prerendering (Optional): 部分的なプリレンダリング（オプション）
Adding Search and Pagination: 検索とページネーションの追加
Mutating Data: データの変更
Handling Errors: エラーの処理
Improving Accessibility: アクセシビリティの向上
Adding Authentication: 認証の追加
Adding Metadata: メタデータの追加

個人的には App Router のコースが滅茶苦茶助かりますね

終わりに

アナウンスツイートのリプでは
まずは Next.js 13 を安定版にして下さい🤣
や
私は今やっと Next.js 13の学習を始めた所です。

等の皮肉リプが多く見られました。
変更内容を見る感じ急いでリリースしたっぽいですね。

それにしても速度が 94% 上昇って一体何が有ったんでしょうか・・・

各リンク

アナウンスツイート
公式ブログ

Discussion