chore: upgrade next, eslint-config-next and next-intl (#1807)

* chore: upgrade next version * chore: update next-intl * chore: tweal lock file * chore: tweak I18n.ts * chore: changeset * chore: import i18n.ts into lib folder * chore: update changeset * chore: update next-intl configuration * chore: app router updates * chore: upgrade @types/react, @types/react-dom * chore: upgrade next to 14.1.3 * chore: deprecate NextIntlClientProvider usage * chore: cleanup with-next-app-i18n * example: added dynamic metadata to with-next-app-i18n to be closer to real usage * fix: missing messages import * chore: lint generateMetadata * chore: amend changeset * chore: upgrade next-intl * chore: changeset for with-next-app-i18n --------- Co-authored-by: Magomed Khamidov <[email protected]> Co-authored-by: Daniel Sinclair <[email protected]>
rainbow-me · Mar 11, 2024 · 6982833 · 6982833
1 parent df572f1
commit 6982833
Show file tree

Hide file tree

Showing 28 changed files with 334 additions and 418 deletions.
diff --git a/.changeset/calm-badgers-flash.md b/.changeset/calm-badgers-flash.md
@@ -0,0 +1,23 @@
+---
+"@rainbow-me/create-rainbowkit": patch
+"generated-test-app": patch
+"rainbowkit-next-app": patch
+"with-next-siwe-iron-session": patch
+"with-next-rainbow-button": patch
+"with-next-siwe-next-auth": patch
+"with-next-custom-button": patch
+"with-next-wallet-button": patch
+"with-next-app-i18n": patch
+"with-next-mint-nft": patch
+"with-next-app": patch
+"with-next": patch
+"example": patch
+"site": patch
+---
+
+Updated the following packages:
+
+- `next` to `^14.1.3`
+- `eslint-config-next` to `^14.1.3`
+- `@types/react` to `^18.2.64`
+- `@types/react` to `^18.2.64`
diff --git a/.changeset/giant-poems-wink.md b/.changeset/giant-poems-wink.md
@@ -0,0 +1,5 @@
+---
+"with-next-app-i18n": patch
+---
+
+We've migrated `with-next-app-i18n` to `next-intl` version `^3.9.4` and adopted the latest best practices. The example also now includes a `messages/` translation sample to replicate real-world usage.
diff --git a/examples/with-create-react-app/package.json b/examples/with-create-react-app/package.json
@@ -9,7 +9,7 @@
     "@testing-library/user-event": "^14.5.2",
     "@types/jest": "^29.5.2",
     "@types/node": "^18.19.3",
-    "@types/react": "^18.2.43",
+    "@types/react": "^18.2.64",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",
     "react": "^18.2.0",

diff --git a/examples/with-next-app-i18n/app/[locale]/layout.tsx b/examples/with-next-app-i18n/app/[locale]/layout.tsx
@@ -1,21 +1,34 @@
-import { NextIntlClientProvider } from 'next-intl';
+import { getTranslations, unstable_setRequestLocale } from 'next-intl/server';
 import type { Locale } from '@rainbow-me/rainbowkit';
 import { Providers } from './providers';
- 
+
 export function generateStaticParams() {
   return [{ locale: 'en-US' }, { locale: 'zh-CN' }];
 }
 
-export default async function LocaleLayout(
-  { children, params: { locale }}: 
-  { children: React.ReactNode, params: { locale: Locale} }
+// Dynamic metadata with locale
+export async function generateMetadata(
+  { params: { locale } }: { params: { locale: Locale } }
 ) {
+  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);
+
   return (
     <html lang={locale}>
       <body>
-        <NextIntlClientProvider locale={locale}>
-          <Providers locale={locale}>{children}</Providers>
-        </NextIntlClientProvider>
+        <Providers locale={locale}>{children}</Providers>
       </body>
     </html>
   );

diff --git a/examples/with-next-app-i18n/app/page.tsx b/examples/with-next-app-i18n/app/page.tsx
@@ -1,8 +1,6 @@
 import { redirect } from 'next/navigation';
 
 // This page only renders when the app is built statically (output: 'export')
-function RootPage() {
+export default function RootPage() {
   redirect('/en-US');
 }
-
-export default RootPage;
diff --git a/examples/with-next-app-i18n/i18n.ts b/examples/with-next-app-i18n/i18n.ts
@@ -0,0 +1,13 @@
+import { notFound } from 'next/navigation';
+import { getRequestConfig } from 'next-intl/server';
+
+const locales = ['en-US', 'zh-CN'];
+
+export default getRequestConfig(async ({ locale }) => {
+  // Validate that the incoming `locale` parameter is valid
+  if (!locales.includes(locale)) notFound();
+
+  return {
+    messages: (await import(`./messages/${locale}.json`)).default
+  };
+});
diff --git a/examples/with-next-app-i18n/messages/en-US.json b/examples/with-next-app-i18n/messages/en-US.json
@@ -0,0 +1,5 @@
+{
+  "Metadata": {
+    "title": "RainbowKit Example"
+  }
+}
diff --git a/examples/with-next-app-i18n/messages/zh-CN.json b/examples/with-next-app-i18n/messages/zh-CN.json
@@ -0,0 +1,5 @@
+{
+  "Metadata": {
+    "title": "RainbowKit 示例"
+  }
+}
diff --git a/examples/with-next-app-i18n/middleware.ts b/examples/with-next-app-i18n/middleware.ts
@@ -1,11 +1,13 @@
 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'
 });
 
 export const config = {
-  // Skip all paths that should not be internationalized
-  matcher: ['/((?!api|_next|_vercel|.*\\..*).*)']
+  // Match only internationalized pathnames
+  matcher: ['/', '/(de|en)/:path*']
 };
diff --git a/examples/with-next-app-i18n/next.config.js b/examples/with-next-app-i18n/next.config.js
@@ -1,3 +1,7 @@
+const createNextIntlPlugin = require('next-intl/plugin');
+
+const withNextIntl = createNextIntlPlugin();
+
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
@@ -7,4 +11,4 @@ const nextConfig = {
   },
 };
 
-module.exports = nextConfig;
+module.exports = withNextIntl(nextConfig);
diff --git a/examples/with-next-app-i18n/package.json b/examples/with-next-app-i18n/package.json
@@ -10,8 +10,8 @@
   },
   "dependencies": {
     "@rainbow-me/rainbowkit": "workspace:*",
-    "next": "^14.0.4",
-    "next-intl": "^2.20.2",
+    "next": "^14.1.3",
+    "next-intl": "^3.9.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "viem": "^2.7.12",
@@ -20,10 +20,10 @@
   },
   "devDependencies": {
     "@types/node": "^18.19.3",
-    "@types/react": "^18.2.43",
+    "@types/react": "^18.2.64",
     "eslint": "^8.15.0",
-    "eslint-config-next": "^14.0.4",
-    "next": "^14.0.4",
+    "eslint-config-next": "^14.1.3",
+    "next": "^14.1.3",
     "typescript": "^5.0.4"
   },
   "engines": {

diff --git a/examples/with-next-app/package.json b/examples/with-next-app/package.json
@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "@rainbow-me/rainbowkit": "workspace:*",
-    "next": "^14.0.4",
+    "next": "^14.1.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "viem": "^2.7.12",
@@ -19,10 +19,10 @@
   },
   "devDependencies": {
     "@types/node": "^18.19.3",
-    "@types/react": "^18.2.43",
+    "@types/react": "^18.2.64",
     "eslint": "^8.15.0",
-    "eslint-config-next": "^14.0.4",
-    "next": "^14.0.4",
+    "eslint-config-next": "^14.1.3",
+    "next": "^14.1.3",
     "typescript": "^5.0.4"
   },
   "engines": {

diff --git a/examples/with-next-custom-button/package.json b/examples/with-next-custom-button/package.json
@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "@rainbow-me/rainbowkit": "workspace:*",
-    "next": "^14.0.4",
+    "next": "^14.1.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "viem": "^2.7.12",
@@ -19,9 +19,9 @@
   },
   "devDependencies": {
     "@types/node": "^18.19.3",
-    "@types/react": "^18.2.43",
+    "@types/react": "^18.2.64",
     "eslint": "^8.15.0",
-    "eslint-config-next": "^14.0.4",
+    "eslint-config-next": "^14.1.3",
     "typescript": "^5.0.4"
   }
 }
diff --git a/examples/with-next-mint-nft/package.json b/examples/with-next-mint-nft/package.json
@@ -11,7 +11,7 @@
   "dependencies": {
     "@rainbow-me/rainbowkit": "workspace:*",
     "framer-motion": "^6.3.3",
-    "next": "^14.0.4",
+    "next": "^14.1.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "viem": "^2.7.12",
@@ -20,9 +20,9 @@
   },
   "devDependencies": {
     "@types/node": "^18.19.3",
-    "@types/react": "^18.2.43",
+    "@types/react": "^18.2.64",
     "eslint": "^8.15.0",
-    "eslint-config-next": "^14.0.4",
+    "eslint-config-next": "^14.1.3",
     "typescript": "^5.0.4"
   }
 }
diff --git a/examples/with-next-rainbow-button/package.json b/examples/with-next-rainbow-button/package.json
@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "@rainbow-me/rainbow-button": "workspace:*",
-    "next": "^14.0.4",
+    "next": "^14.1.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "viem": "^2.7.12",
@@ -19,9 +19,9 @@
   },
   "devDependencies": {
     "@types/node": "^18.19.3",
-    "@types/react": "^18.2.43",
+    "@types/react": "^18.2.64",
     "eslint": "^8.15.0",
-    "eslint-config-next": "^14.0.4",
+    "eslint-config-next": "^14.1.3",
     "typescript": "^5.0.4"
   }
 }
diff --git a/examples/with-next-siwe-iron-session/package.json b/examples/with-next-siwe-iron-session/package.json
@@ -12,7 +12,7 @@
     "@rainbow-me/rainbowkit": "workspace:*",
     "ethers": "^5.6.8",
     "iron-session": "^6.3.1",
-    "next": "^14.0.4",
+    "next": "^14.1.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "siwe": "^2.1.4",
@@ -22,9 +22,9 @@
   },
   "devDependencies": {
     "@types/node": "^18.19.3",
-    "@types/react": "^18.2.43",
+    "@types/react": "^18.2.64",
     "eslint": "^8.15.0",
-    "eslint-config-next": "^14.0.4",
+    "eslint-config-next": "^14.1.3",
     "typescript": "^5.0.4"
   }
 }
diff --git a/examples/with-next-siwe-next-auth/package.json b/examples/with-next-siwe-next-auth/package.json
@@ -12,7 +12,7 @@
     "@rainbow-me/rainbowkit": "workspace:*",
     "@rainbow-me/rainbowkit-siwe-next-auth": "workspace:*",
     "ethers": "^5.6.8",
-    "next": "^14.0.4",
+    "next": "^14.1.3",
     "next-auth": "4.24.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -23,9 +23,9 @@
   },
   "devDependencies": {
     "@types/node": "^18.19.3",
-    "@types/react": "^18.2.43",
+    "@types/react": "^18.2.64",
     "eslint": "^8.15.0",
-    "eslint-config-next": "^14.0.4",
+    "eslint-config-next": "^14.1.3",
     "typescript": "^5.0.4"
   }
 }
diff --git a/examples/with-next-wallet-button/package.json b/examples/with-next-wallet-button/package.json
@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "@rainbow-me/rainbowkit": "workspace:*",
-    "next": "^14.0.4",
+    "next": "^14.1.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "viem": "^2.7.12",
@@ -19,9 +19,9 @@
   },
   "devDependencies": {
     "@types/node": "^18.19.3",
-    "@types/react": "^18.2.43",
+    "@types/react": "^18.2.64",
     "eslint": "^8.15.0",
-    "eslint-config-next": "^14.0.4",
+    "eslint-config-next": "^14.1.3",
     "typescript": "^5.0.4"
   }
 }
diff --git a/examples/with-next/package.json b/examples/with-next/package.json
@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "@rainbow-me/rainbowkit": "workspace:*",
-    "next": "^14.0.4",
+    "next": "^14.1.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "viem": "^2.7.12",
@@ -19,9 +19,9 @@
   },
   "devDependencies": {
     "@types/node": "^18.19.3",
-    "@types/react": "^18.2.43",
+    "@types/react": "^18.2.64",
     "eslint": "^8.15.0",
-    "eslint-config-next": "^14.0.4",
+    "eslint-config-next": "^14.1.3",
     "typescript": "^5.0.4"
   }
 }
diff --git a/examples/with-remix/package.json b/examples/with-remix/package.json
@@ -22,8 +22,8 @@
   "devDependencies": {
     "@remix-run/dev": "^2.7.2",
     "@remix-run/eslint-config": "^2.7.2",
-    "@types/react": "^18.2.43",
-    "@types/react-dom": "^18.2.17",
+    "@types/react": "^18.2.64",
+    "@types/react-dom": "^18.2.21",
     "eslint": "^8.15.0",
     "typescript": "^5.0.4"
   },

diff --git a/examples/with-vite/package.json b/examples/with-vite/package.json
@@ -18,8 +18,8 @@
     "@tanstack/react-query": "^5.22.2"
   },
   "devDependencies": {
-    "@types/react": "^18.2.43",
-    "@types/react-dom": "^18.2.17",
+    "@types/react": "^18.2.64",
+    "@types/react-dom": "^18.2.21",
     "@vitejs/plugin-react": "^4.2.1",
     "typescript": "^5.0.4",
     "vite": "^5.0.7"

diff --git a/package.json b/package.json
@@ -51,8 +51,8 @@
     "@testing-library/react": "^14.1.2",
     "@testing-library/user-event": "^14.5.2",
     "@types/node": "^18.19.3",
-    "@types/react": "^18.2.43",
-    "@types/react-dom": "^18.2.17",
+    "@types/react": "^18.2.64",
+    "@types/react-dom": "^18.2.21",
     "@vanilla-extract/esbuild-plugin": "^2.3.1",
     "@vanilla-extract/vite-plugin": "^3.9.3",
     "autoprefixer": "^10.4.16",
@@ -63,7 +63,7 @@
     "husky": "^8.0.3",
     "jsdom": "^23.0.1",
     "lokijs": "^1.5.12",
-    "next": "^14.0.4",
+    "next": "^14.1.3",
     "next-auth": "4.24.5",
     "postcss": "^8.4.32",
     "postcss-prefix-selector": "^1.16.0",