chore: react 19, next 15 support (#2282)

* chore: react 19 upgrade * fix: react type resolution, framer-motion upgrade * fix: jsx types, useRef nullable * fix: nft mint example * fix: content-layer builds * chore: upgrade next-auth * chore: upgrade react types * chore: upgrade packageManager version * fix: react, react-dom overrride resolution * revert: upgrade next-auth * fix: react-three/fiber reconciler * chore: next 15 upgrade * chore: next-intl upgrade * chore: upgrade wagmi to ^2.14.7 * chore: docs sitemap * chore: upgrade jest libraries * chore: upgrade next-auth * chore: with-next-app-i18n style * chore: with-next-app-i18n changeset chore: tweak * chore: rainbowkit changeset * chore: examples, site changesets * chore: changeset docs site * fix: react-remove-scroll peer warning
rainbow-me · Jan 13, 2025 · f533ac2 · f533ac2
1 parent 176534f
commit f533ac2
Show file tree

Hide file tree

Showing 49 changed files with 1,336 additions and 982 deletions.
diff --git a/.changeset/bright-gorillas-listen.md b/.changeset/bright-gorillas-listen.md
@@ -0,0 +1,7 @@
+---
+"with-next-app-i18n": minor
+---
+
+Upgraded `next-intl` to `3.26.3` and resolved [breaking changes](https://next-intl.dev/blog/next-intl-3-22) introduced in `3.22` in anticipation of v4 and Next 15. 
+
+Migrated to `/i18n/request.ts` and `/i18n/routing.ts` architecture. Refactored middleware. Adopted async `params` prop in `generateMetadata` and `getRequestConfig` to support Next v15. Adopted `setRequestLocale` over `unstable_setRequestLocale`.
diff --git a/.changeset/eleven-balloons-heal.md b/.changeset/eleven-balloons-heal.md
@@ -0,0 +1,5 @@
+---
+"@rainbow-me/rainbowkit": patch
+---
+
+Support for React 19.
diff --git a/.changeset/gentle-months-sip.md b/.changeset/gentle-months-sip.md
@@ -0,0 +1,17 @@
+---
+"@rainbow-me/create-rainbowkit": patch
+"rainbowkit-next-app": patch
+"example": patch
+"site": patch
+"with-next": patch
+"with-next-app": patch
+"with-vite": patch
+"with-next-custom-button": patch
+"with-next-wallet-button": patch
+"with-create-react-app": patch
+"with-next-app-i18n": patch
+"with-next-mint-nft": patch
+"with-remax": patch
+---
+
+Upgraded to Next 15 at `15.1.4` and resolved [breaking changes](https://nextjs.org/docs/app/building-your-application/upgrading/version-15). Upgraded to React 19 at `19.0.0` and resolved [breaking changes](https://react.dev/blog/2024/04/25/react-19-upgrade-guide). Upgraded `wagmi` to `^2.14.7`.
diff --git a/.changeset/old-news-tap.md b/.changeset/old-news-tap.md
@@ -0,0 +1,5 @@
+---
+"site": patch
+---
+
+Upgraded `framer-motion`, `@react-three/fiber`, and `contentlayer` to resolve breaking changes in Next 15. Fixed `JSX` type imports.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -3,7 +3,7 @@ name: CI
 on: [pull_request, push]
 
 env:
-  pnpm: 9.12.0
+  pnpm: 9.15.0
   RAINBOW_PROVIDER_API_KEY: ${{ secrets.RAINBOW_PROVIDER_API_KEY }}
   WALLETCONNECT_PROJECT_ID: ${{ secrets.WALLETCONNECT_PROJECT_ID }}
 

diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
@@ -6,7 +6,7 @@ on:
       - main
 
 env:
-  pnpm: 9.12.0
+  pnpm: 9.15.0
   RAINBOW_PROVIDER_API_KEY: RAINBOW_PROVIDER_API_KEY
 
 concurrency: ${{ github.workflow }}-${{ github.ref }}

diff --git a/examples/with-create-react-app/package.json b/examples/with-create-react-app/package.json
@@ -4,19 +4,19 @@
   "private": true,
   "dependencies": {
     "@rainbow-me/rainbowkit": "workspace:*",
-    "@testing-library/jest-dom": "^6.2.0",
-    "@testing-library/react": "^16.0.1",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.1.0",
     "@testing-library/user-event": "^14.5.2",
     "@types/jest": "^29.5.12",
     "@types/node": "^20.14.8",
-    "@types/react": "^18.3.5",
-    "react-dom": "^18.3.1",
+    "@types/react": "^19.0.6",
+    "react-dom": "^19.0.0",
     "react-scripts": "5.0.1",
-    "react": "^18.3.1",
+    "react": "^19.0.0",
     "typescript": "5.5.2",
     "util": "0.12.5",
     "viem": "2.21.55",
-    "wagmi": "^2.14.3",
+    "wagmi": "^2.14.7",
     "@tanstack/react-query": "^5.55.3"
   },
   "scripts": {

diff --git a/examples/with-next-app-i18n/next-env.d.ts b/examples/with-next-app-i18n/next-env.d.ts
@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
diff --git a/examples/with-next-app-i18n/package.json b/examples/with-next-app-i18n/package.json
@@ -9,18 +9,17 @@
   },
   "dependencies": {
     "@rainbow-me/rainbowkit": "workspace:*",
-    "next": "^14.2.10",
-    "next-intl": "^3.19.1",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "next": "^15.1.4",
+    "next-intl": "^3.26.3",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "viem": "2.21.55",
-    "wagmi": "^2.14.3",
+    "wagmi": "^2.14.7",
     "@tanstack/react-query": "^5.55.3"
   },
   "devDependencies": {
     "@types/node": "^20.14.8",
-    "@types/react": "^18.3.5",
-    "next": "^14.2.10",
+    "@types/react": "^19.0.6",
     "typescript": "5.5.2"
   },
   "engines": {

diff --git a/examples/with-next-app-i18n/src/app/[locale]/layout.tsx b/examples/with-next-app-i18n/src/app/[locale]/layout.tsx
@@ -1,4 +1,4 @@
-import { getTranslations, unstable_setRequestLocale } from 'next-intl/server';
+import { getTranslations, setRequestLocale } from 'next-intl/server';
 import type { Locale } from '@rainbow-me/rainbowkit';
 import { Providers } from './providers';
 
@@ -7,23 +7,27 @@ export function generateStaticParams() {
 }
 
 // Dynamic metadata with locale
-export async function generateMetadata(
-  { params: { locale } }: { params: { locale: Locale } }
-) {
+export async function generateMetadata(props: { params: Promise<{ locale: Locale }> }) {
+  const params = await props.params;
+  const { locale } = params;
+
   const t = await getTranslations({ locale, namespace: 'Metadata' });
   return {
     title: t('title')
   };
 }
 
-export default function LocaleLayout({
-  children,
-  params: { locale },
-}: {
-  children: React.ReactNode;
-  params: { locale: Locale };
-}) {
-  unstable_setRequestLocale(locale);
+export default async function LocaleLayout(
+  props: {
+    children: React.ReactNode;
+    params: Promise<{ locale: Locale }>;
+  }
+) {
+  const { children } = props;
+  const params = await props.params;
+  const { locale } = params;
+
+  setRequestLocale(locale);
 
   return (
     <html lang={locale}>

diff --git a/examples/with-next-app-i18n/src/i18n.ts b/examples/with-next-app-i18n/src/i18n.ts
diff --git a/examples/with-next-app-i18n/src/i18n/request.ts b/examples/with-next-app-i18n/src/i18n/request.ts
@@ -0,0 +1,17 @@
+import { getRequestConfig } from 'next-intl/server';
+import { routing } from './routing';
+
+export default getRequestConfig(async ({ requestLocale }) => {
+  // This typically corresponds to the `[locale]` segment
+  let locale = await requestLocale;
+
+  // Ensure that the incoming locale is valid
+  if (!locale || !routing.locales.includes(locale as any)) {
+    locale = routing.defaultLocale;
+  }
+
+  return {
+    locale,
+    messages: (await import(`../../messages/${locale}.json`)).default
+  };
+});
diff --git a/examples/with-next-app-i18n/src/i18n/routing.ts b/examples/with-next-app-i18n/src/i18n/routing.ts
@@ -0,0 +1,8 @@
+import { defineRouting } from 'next-intl/routing';
+
+export const routing = defineRouting({
+  // A list of all locales that are supported
+  locales: ['en-US', 'zh-CN'],
+  // Used when no locale matches
+  defaultLocale: 'en-US',
+});
diff --git a/examples/with-next-app-i18n/src/middleware.ts b/examples/with-next-app-i18n/src/middleware.ts
@@ -1,13 +1,9 @@
 import createMiddleware from 'next-intl/middleware';
-
-export default createMiddleware({
-  // A list of all locales that are supported
-  locales: ['en-US', 'zh-CN'],
-  // Used when no locale matches
-  defaultLocale: 'en-US'
-});
-
+import { routing } from './i18n/routing';
+
 export const config = {
   // Match only internationalized pathnames
   matcher: ['/', '/(de|en)/:path*']
 };
+
+export default createMiddleware(routing);
diff --git a/examples/with-next-app/next-env.d.ts b/examples/with-next-app/next-env.d.ts
@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
diff --git a/examples/with-next-app/package.json b/examples/with-next-app/package.json
@@ -9,16 +9,16 @@
   },
   "dependencies": {
     "@rainbow-me/rainbowkit": "workspace:*",
-    "next": "^14.2.10",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "next": "^15.1.4",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "viem": "2.21.55",
-    "wagmi": "^2.14.3",
+    "wagmi": "^2.14.7",
     "@tanstack/react-query": "^5.55.3"
   },
   "devDependencies": {
     "@types/node": "^20.14.8",
-    "@types/react": "^18.3.5",
+    "@types/react": "^19.0.6",
     "typescript": "5.5.2"
   },
   "engines": {

diff --git a/examples/with-next-custom-button/next-env.d.ts b/examples/with-next-custom-button/next-env.d.ts
@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/pages/api-reference/config/typescript for more information.
diff --git a/examples/with-next-custom-button/package.json b/examples/with-next-custom-button/package.json
@@ -9,16 +9,16 @@
   },
   "dependencies": {
     "@rainbow-me/rainbowkit": "workspace:*",
-    "next": "^14.2.10",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "next": "^15.1.4",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "viem": "2.21.55",
-    "wagmi": "^2.14.3",
+    "wagmi": "^2.14.7",
     "@tanstack/react-query": "^5.55.3"
   },
   "devDependencies": {
     "@types/node": "^20.14.8",
-    "@types/react": "^18.3.5",
+    "@types/react": "^19.0.6",
     "typescript": "5.5.2"
   }
 }
diff --git a/examples/with-next-mint-nft/next-env.d.ts b/examples/with-next-mint-nft/next-env.d.ts
@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/pages/api-reference/config/typescript for more information.
diff --git a/examples/with-next-mint-nft/package.json b/examples/with-next-mint-nft/package.json
@@ -9,17 +9,17 @@
   },
   "dependencies": {
     "@rainbow-me/rainbowkit": "workspace:*",
-    "framer-motion": "^11.5.4",
-    "next": "^14.2.10",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "framer-motion": "^11.15.0",
+    "next": "^15.1.4",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "viem": "2.21.55",
-    "wagmi": "^2.14.3",
+    "wagmi": "^2.14.7",
     "@tanstack/react-query": "^5.55.3"
   },
   "devDependencies": {
     "@types/node": "^20.14.8",
-    "@types/react": "^18.3.5",
+    "@types/react": "^19.0.6",
     "typescript": "5.5.2"
   }
 }
diff --git a/examples/with-next-rainbow-button/next-env.d.ts b/examples/with-next-rainbow-button/next-env.d.ts
@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/pages/api-reference/config/typescript for more information.
diff --git a/examples/with-next-rainbow-button/package.json b/examples/with-next-rainbow-button/package.json
@@ -9,16 +9,16 @@
   },
   "dependencies": {
     "@rainbow-me/rainbow-button": "workspace:*",
-    "next": "^14.2.10",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "next": "^15.1.4",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "viem": "2.21.55",
-    "wagmi": "^2.14.3",
+    "wagmi": "^2.14.7",
     "@tanstack/react-query": "^5.55.3"
   },
   "devDependencies": {
     "@types/node": "^20.14.8",
-    "@types/react": "^18.3.5",
+    "@types/react": "^19.0.6",
     "typescript": "5.5.2"
   }
 }
diff --git a/examples/with-next-siwe-iron-session/next-env.d.ts b/examples/with-next-siwe-iron-session/next-env.d.ts
@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/pages/api-reference/config/typescript for more information.
diff --git a/examples/with-next-siwe-iron-session/package.json b/examples/with-next-siwe-iron-session/package.json
@@ -10,16 +10,16 @@
   "dependencies": {
     "@rainbow-me/rainbowkit": "workspace:*",
     "iron-session": "^6.3.1",
-    "next": "^14.2.10",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "next": "^15.1.4",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "viem": "2.21.55",
-    "wagmi": "^2.14.3",
+    "wagmi": "^2.14.7",
     "@tanstack/react-query": "^5.55.3"
   },
   "devDependencies": {
     "@types/node": "^20.14.8",
-    "@types/react": "^18.3.5",
+    "@types/react": "^19.0.6",
     "typescript": "5.5.2"
   }
 }
diff --git a/examples/with-next-siwe-next-auth/next-env.d.ts b/examples/with-next-siwe-next-auth/next-env.d.ts
@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/pages/api-reference/config/typescript for more information.
diff --git a/examples/with-next-siwe-next-auth/package.json b/examples/with-next-siwe-next-auth/package.json
@@ -10,17 +10,17 @@
   "dependencies": {
     "@rainbow-me/rainbowkit": "workspace:*",
     "@rainbow-me/rainbowkit-siwe-next-auth": "workspace:*",
-    "next": "^14.2.10",
-    "next-auth": "4.24.5",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "next": "^15.1.4",
+    "next-auth": "4.24.11",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "viem": "2.21.55",
-    "wagmi": "^2.14.3",
+    "wagmi": "^2.14.7",
     "@tanstack/react-query": "^5.55.3"
   },
   "devDependencies": {
     "@types/node": "^20.14.8",
-    "@types/react": "^18.3.5",
+    "@types/react": "^19.0.6",
     "typescript": "5.5.2"
   }
 }
diff --git a/examples/with-next-wallet-button/next-env.d.ts b/examples/with-next-wallet-button/next-env.d.ts
@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/pages/api-reference/config/typescript for more information.