loneProgrammer

Next.js v15＆React 19における重要な変更点

NextJs

NextJs version 15とReact 19において、useFormStateがuseActionStateに置き換わり、いくつかの重要な変更が導入されました。

useActionStateについての重要な変更点

  • 基本的な改善点
  • useFormStatusを使用せずとも、pending状態を直接受け取れるようになりました。これにより、ローディング状態の管理がよりシンプルになりました。
  • useActionStateの第二引数にセットする状態変数の仕様変更
  • useActionStateの第二引数にセットする状態変数の仕様が変更されています。
  • ちなみに、この状態変数は、コンポーネントと、サーバーアクションズ間で、アタイを管理するためのものです。
  • オブジェクト形式の状態管理の変更
  • React 18のuseFormStateでは、オブジェクト形式の状態変数でも更新が正常に反映されていました。
  • useActionStateでは、特別な対応をしない限り、オブジェクト形式の状態更新が反映されなくなりました。
  • 数値型や文字列型などの単一値の場合は、従来通り問題なく更新が反映されます。
  • この様な変更が加えられた理由は、イミュータブルな状態管理の原則に従うためだと考えられます。
  • イミュータブルとは、データの直接的な変更を避け、代わりに新しい状態を作成して置き換えることを指します。
  • これにより、状態の変更が追跡しやすくなり、予測可能性が高まるとともに、Reactの差分検出機能が効率的に働くようになる。
  • フォーム実行時の動作変更
  • サーバーアクションズ関数をフォームから実行した場合、フォーム要素の値が全て初期状態にリセットされるようになりました。

これらの変更点は、アプリケーションの設計と実装に大きな影響を与える可能性があるため、移行時には注意が必要です。

Next.js 15での破壊的変更

  • cookiesの非同期化
  • // 変更前
import { cookies } from 'next/headers';
const accessToken = cookies().get('accessToken')?.value;

// 変更後
import { cookies } from 'next/headers';
const accessToken = (await cookies()).get('accessToken')?.value;
  • searchParamsの型定義変更
  • // 変更前
const MainPage = ({
　searchParams,
}: {
　searchParams: { [key: string]: string | undefined }
}) => {
　let initialSearch = searchParams.search ? searchParams.search : "";
　// ...
}

// 変更後
const MainPage = async (
　props: {
　　searchParams: Promise＜{ [key: string]: string | undefined }＞
　}
) => {
　const searchParams = await props.searchParams;
　let initialSearch = searchParams.search ? searchParams.search : "";
　// ...
}
  • 動的ルーティングのパラメータ処理
  • // 変更前：/[id]/page.tsx
const PostIdPage = async({
　params
}: {
　params: { id: number }
}) => {
　const postId = params.id as number;
　// ...
}

// 変更後：/[id]/page.tsx
const PostIdPage = async (
　props: {
　　params: Promise＜{ id: number }＞
　}
) => {
　const params = await props.params;
　// ...
}

注意事項

これらの変更点は、アプリケーションの設計と実装に大きな影響を与える可能性があるため、移行時には慎重な対応が必要です。特に非同期処理の扱いについて、十分な確認とテストを行うことを推奨します。

↓ お勧め記事 ↓