Next.js 15 + React 19

TL;DR#

npm を使用している場合は、フラグを使用して shadcn/ui 依存関係をインストールできます。 shadcn CLI を実行すると、フラグを選択するよう求められます。 pnpm、bun、yarn にはフラグは必要ありません。

各パッケージの React 19 サポートのステータスについては、アップグレードステータス を参照してください。

何が起こっていますか？#

React 19 は現在 rc であり、最新の Next.js 15 リリースでテストおよびサポートされています。

React 19 をサポートするには、パッケージの管理者はパッケージをテストして更新し、ピアの依存関係として React 19 を含める必要があります。これはすでに進行中です。

コピー"peerDependencies": {
-  "react": "^16.8 || ^17.0 || ^18.0",
+  "react": "^16.8 || ^17.0 || ^18.0 || ^19.0",
-  "react-dom": "^16.8 || ^17.0 || ^18.0"
+  "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0"
},

それまでの間、ピアの依存関係として React 19 をリストしていない パッケージをインストールすると、次のようなエラーメッセージが表示されます。

コピーnpm error code ERESOLVE
npm error ERESOLVE unable to resolve dependency tree
npm error
npm error While resolving: my-app@0.1.0
npm error Found: react@19.0.0-rc-69d4b800-20241021
npm error node_modules/react
npm error   react@"19.0.0-rc-69d4b800-20241021" from the root project

これを修正する方法#

解決策 1: --force または --legacy-peer-deps#

--force フラグまたは --legacy-peer-deps フラグを使用してパッケージを強制的にインストールできます。

コピーnpm i <package> --force
 
npm i <package> --legacy-peer-deps

これにより、パッケージがインストールされ、ピアの依存関係の警告が無視されます。

解決策 2: React 18 を使用する#

react および react-dom をバージョン 18 にダウングレードできます。これは、インストールしているパッケージと互換性があり、依存関係が更新されたときにアップグレードできます。

コピーnpm i react@18 react-dom@18

どちらのソリューションを選択する場合でも、アプリを徹底的にテストして、 回帰はありません。

Next.js 15 で shadcn/ui を使用する#

pnpm、bun、yarn の使用#

インストールガイド の指示に従って、shadcn/ui をインストールします。フラグは必要ありません。

npm の使用#

npx shadcn@latest init -d を実行すると、ピアの依存関係の問題を解決するためのオプションを選択するように求められます。

コピーIt looks like you are using React 19.
Some packages may fail to install due to peer dependency issues (see https://ui.shadcn.com/react-19).
 
? How would you like to proceed? › - Use arrow-keys. Return to submit.
❯   Use --force
    Use --legacy-peer-deps

その後、選択したフラグを使用してコマンドを実行できます。

コンポーネントの追加#

コンポーネントを追加するプロセスは上記と同じです。ピアの依存関係の問題を解決するには、フラグを選択します。

新しい依存関係をインストールした後は、必ずアプリをテストしてください。

アップグレードステータス#

アップグレードの進行状況を簡単に追跡できるように、shadcn/ui 依存関係の React 19 サポートステータスを示す表を次に示します。

• ✅ - npm、pnpm、bun を使用して React 19 で動作します。
• 🚧 - pnpm と bun を使用して React 19 で動作します。 npm のフラグが必要です。 PR中です。

ご質問がある場合は、GitHub で Issue を作成 してください。

Recharts#

React 19 で recharts を使用するには、react-is 依存関係をオーバーライドする必要があります。

コピー"overrides": {
  "react-is": "^19.0.0-rc-69d4b800-20241021"
}