軽いWebアプリをnext14から15にアプデして出たものを修正する

環境

• Next.js v15.0.0
• React v18
  • Next.jsを使う以上、v19rcにアプデしても良いのかもしれない

Next.js v15.0.0 をインストール

npm install next@15.0.0

lint をして build してみる

npm lint
npm run build

いくつかエラーが出たので対応する

src/app/list/[itemId]/page.tsx
Type error: Type 'Readonly<{ params: { itemId: string; }; searchParams: { genre: string; name: string; }; }>' does not satisfy the constraint 'PageProps'.
  Types of property 'params' are incompatible.
    Type '{ itemId: string; }' is missing the following properties from type 'Promise<any>': then, catch, finally, [Symbol.toStringTag]

Dynamic APIs が変更になった

https://nextjs.org/docs/messages/sync-dynamic-apis#why-this-warning-occurred

params, searchParams は Promise で受け取る形になっていたので修正する

before

// props
type Props = Readonly<{
  params: { itemId: string };
  searchParams: { genre: string; name: string };
}>;

// Page内
export default async function Page({ params, searchParams }: Props) {
    const { itemId } = params;
    const { genre, name } = searchParams;

after

// props
type Props = {
  params: Promise<{ itemId: string }>;
  searchParams: Promise<{ genre: string; name: string }>;
};

// Page内
export default async function Page({ params, searchParams }: Props) {
    const { itemId } = await params;
    const { genre, name } = await searchParams;

ReactDOM.useFormState has been renamed to React.useActionState. Please update SearchDbForm to use React.useActionState.

Server Actions をしているときの useFormState が useActionState に命名が変更になったので、変更が必要だった。

before

import { useFormState } from 'react-dom';

// 本処理
  const [state, searchFormAction] = useFormState(
    searchAction,
    initialState
  );

after

import { useActionState } from 'react';

// 本処理
  const [state, searchFormAction] = useActionState(
    searchAction,
    initialState
  );

その他

他にも色々と出たので、時間がある時に更新する。