O hirunewani blog

Frontend Weekly 2024-10-25

Created at

Next.js 15、Zustand v5、Svelte 5、Chakra UI v3、React Compiler、Sassの`@import`廃止などについて

Next.js 15

Next.js 15がリリースされた。

https://nextjs.org/blog/next-15

マイグレーションガイドに加えて、codemodも公開されている。

https://nextjs.org/docs/app/building-your-application/upgrading/version-15

デフォルトキャッシュの無効化または変更

破壊的な変更として、fetchやGETルートハンドラー、クライアントルーターのデフォルトのキャッシュ戦略に次のような変更が加えられた。

  • Fetchのキャッシュオプションをno-storeに変更
    • キャッシュを有効化したい場合は、fetchのキャッシュオプションにforce-cacheを指定するなどの対応が必要
    • 余談：今までデフォルトがforce-cacheであるという説明が稀に見られたが、Dynamic functions以降はno-storeになるなど最適だと思われるオプションが自動的に選択されていたため不正確
  • GETルートハンドラーのデフォルトキャッシュを無効化
    • キャッシュを有効化したい場合は、GETルートハンドラを定義したファイルでexport dynamic = 'force-static'を指定するなどの対応が必要
  • クライアントルーターがデフォルトでページコンポーネントをキャッシュしないように変更
    • ただし、一部の動作は変更されない
      • Partial Renderingを引き続きサポートするため、共有レイアウトデータはサーバーからrefetchされない
      • ブラウザがスクロール位置を復元できるように、Back/forward navigationではキャッシュが有効
    • 余談：このキャッシュへの理解が不十分であり、例えば商品データを追加したのに一覧に反映されないバグが稀に見られた。revalidatePathなどによる明示的な再検証が必要

Async Request APIs

cookiesやheaders、params、searchParamsなどのAPIが非同期関数に変更された。

Form Component

HTMLのform要素の拡張であり、送信時に共有レイアウトとクライアントの状態を保持するクライアントナビゲーションなどをサポートしており、パフォーマンスやUXの向上が期待できる。

https://nextjs.org/blog/next-15#form-component

import Form from "next/form";

export default function Page() {
  return (
    <Form action="/search">
      <input name="query" />
      <button type="submit">Submit</button>
    </Form>
  );
}

その他

その他のいくつかの変更点。

Zustand v5

Zustand v5がリリースされた。

https://github.com/pmndrs/zustand/releases/tag/v5.0.0

新機能追加はなく、非推奨な機能などの削除が行われたのみ。

Svelte 5

Svelte 5がリリースされた。

https://svelte.dev/blog/svelte-5-is-alive

Previewの際、話題になっていたrunesが遂にサポートされた。

- let count = 0;
+ let count = $state(0);

Chakra UI v3

Chakra UI v3がリリースされた。

https://www.chakra-ui.com/blog/00-announcing-v3

Panda CSSへの移行は行われず、Park UI(Ark UI) + emotionの構成になった。 また、いくつかのコンポーネントはshadcn/uiのようにCLI経由でスニペットを追加する形式になっている。

Panda CSSについては、React v19のstyleに期待しており、導入しない可能性があると言及されている。

We might not even have to use Panda at all. The progress of the style tag in React 19 is very promising and we give Chakra even more performance boost without any migration cost.

React CompilerをReact v18で利用する

React Compilerがベータリリースされた。

https://react.dev/blog/2024/10/21/react-compiler-beta-release

設定を変更することでReact v17とv18でも利用可能。

https://react.dev/learn/react-compiler#using-react-compiler-with-react-17-or-18

// babel.config.js
const ReactCompilerConfig = {
  target: "18", // '17' | '18' | '19'
};

module.exports = function () {
  return {
    plugins: [["babel-plugin-react-compiler", ReactCompilerConfig]],
  };
};

Sass: @import is deprecated

Sassの@import がv3.0.0で廃止予定。

https://sass-lang.com/blog/import-is-deprecated/

以前からデバックが困難であるという指摘があり、@useや@forwardの利用が推奨されている。

これはCSSの@importとは無関係であり、CSSの@importは廃止もされなければ非推奨でもないので注意。