upgrade to next 15 and react 19

MCDReforged · Dec 19, 2024 · db4d726 · db4d726
1 parent a0fba83
commit db4d726
Show file tree

Hide file tree

Showing 14 changed files with 1,572 additions and 1,090 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev",
+    "dev": "next dev --turbopack",
     "build": "next build",
     "start": "next start",
     "lint": "next lint"
@@ -12,7 +12,7 @@
     "@mantine/core": "^7.15.1",
     "@mantine/hooks": "^7.15.1",
     "@mantine/nprogress": "^7.15.1",
-    "@next/bundle-analyzer": "^14.2.20",
+    "@next/bundle-analyzer": "15.1.2",
     "@tabler/icons-react": "^3.26.0",
     "@vercel/analytics": "^1.4.1",
     "@vercel/speed-insights": "^1.1.0",
@@ -22,11 +22,10 @@
     "hast-util-from-html": "^2.0.3",
     "highlight.js": "^11.11.0",
     "mermaid": "^11.4.1",
-    "next": "14.2.20",
+    "next": "15.1.2",
     "next-intl": "3.26.2",
-    "nuqs": "^1.20.0",
-    "react": "^18",
-    "react-dom": "^18",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
     "react-markdown": "^9.0.1",
     "rehype-raw": "^7.0.0",
     "rehype-sanitize": "^6.0.0",
@@ -38,15 +37,19 @@
   },
   "devDependencies": {
     "@types/node": "^20",
-    "@types/react": "^18",
-    "@types/react-dom": "^18",
+    "@types/react": "19.0.2",
+    "@types/react-dom": "19.0.2",
     "autoprefixer": "^10.4.20",
-    "eslint": "^8",
-    "eslint-config-next": "14.2.20",
+    "eslint": "^9",
+    "eslint-config-next": "15.1.2",
     "postcss": "^8.4.49",
     "postcss-preset-mantine": "^1.17.0",
     "postcss-simple-vars": "^7.0.1",
     "tailwindcss": "^3.4.17",
     "typescript": "^5"
+  },
+  "overrides": {
+    "@types/react": "19.0.2",
+    "@types/react-dom": "19.0.2"
   }
 }
diff --git a/src/app/[locale]/layout.tsx b/src/app/[locale]/layout.tsx
@@ -3,14 +3,17 @@ import { Navbar } from "@/components/layout/navbar";
 import { RouterTransition } from "@/components/layout/router-transition";
 import { siteConfig } from "@/site/config";
 import { pick } from "@/utils/i18n-utils";
-import { ColorSchemeScript } from '@mantine/core'
+import { ColorSchemeScript, mantineHtmlProps } from '@mantine/core'
 import "@/styles/globals.css";
 import "@/styles/variables.css";
 import { clsx } from "clsx";
 import type { Metadata } from 'next'
 import { NextIntlClientProvider } from "next-intl";
 import { getMessages, setRequestLocale } from "next-intl/server";
-import '@mantine/core/styles.css'
+// https://github.com/mantinedev/mantine/issues/6109
+// https://mantine.dev/styles/mantine-styles/#css-layers
+import '@mantine/core/styles.layer.css'
+import React from "react";
 import styles from './layout.module.css';
 import MantineThemeProvider from "./mantine-theme-provider";
 import { StatsScripts } from "./stats-scripts";
@@ -31,19 +34,24 @@ export async function generateStaticParams() {
   return siteConfig.languages.map(locale => ({locale}))
 }
 
-export default async function RootLayout({
-  children,
-  params: {locale},
-}: {
+interface RootLayoutProps {
   children: React.ReactNode
-  params: {locale: string}
-}) {
+  params: Promise<{locale: string}>
+}
+
+export default async function RootLayout(props: RootLayoutProps) {
+  const {locale} = await props.params
+  const {children} = props
+
   setRequestLocale(locale)
   const messages = await getMessages()
 
   // noinspection HtmlRequiredTitleElement
   return (
-    <html lang={locale}>
+    <html
+      lang={locale}
+      {...mantineHtmlProps}  // https://github.com/mantinedev/mantine/issues/7008
+    >
       <head>
         <ColorSchemeScript defaultColorScheme="auto"/>
         <StatsScripts/>

diff --git a/src/app/[locale]/page.tsx b/src/app/[locale]/page.tsx
@@ -1,7 +1,9 @@
 import { setRequestLocale } from "next-intl/server";
 import { HomePage } from "./homepage";
 
-export default function Home({params: {locale}}: { params: { locale: string } }) {
+export default async function Home(props: { params: Promise<{ locale: string }> }) {
+  const {locale} = await props.params
+
   setRequestLocale(locale);
 
   return (

diff --git a/src/app/[locale]/plugin/[pluginId]/dependencies/page.tsx b/src/app/[locale]/plugin/[pluginId]/dependencies/page.tsx
@@ -28,7 +28,9 @@ async function PageContent({plugin}: { plugin: AllOfAPlugin }) {
   )
 }
 
-export default async function Page({params: {pluginId, locale}}: { params: { pluginId: string, locale: string } }) {
+export default async function Page(props: { params: Promise<{ pluginId: string, locale: string }> }) {
+  const {pluginId, locale} = await props.params
+
   setRequestLocale(locale);
   const plugin = await getPluginOr404(pluginId)
 

diff --git a/src/app/[locale]/plugin/[pluginId]/introduction/page.tsx b/src/app/[locale]/plugin/[pluginId]/introduction/page.tsx
@@ -3,7 +3,9 @@ import { setRequestLocale } from "next-intl/server";
 import React from "react";
 import { PluginContentIntroduction } from "./plugin-content-introduction";
 
-export default async function Page({params: {pluginId, locale}}: { params: { pluginId: string, locale: string } }) {
+export default async function Page(props: { params: Promise<{ pluginId: string, locale: string }> }) {
+  const {pluginId, locale} = await props.params
+
   setRequestLocale(locale);
   const plugin = await getPluginOr404(pluginId)
 

diff --git a/src/app/[locale]/plugin/[pluginId]/layout.tsx b/src/app/[locale]/plugin/[pluginId]/layout.tsx
@@ -9,7 +9,9 @@ import { LayoutScrollFix } from "./layout-scroll-fix";
 import { PluginContentCard } from "./plugin-content-card";
 import { Sidebar } from "./sidebar";
 
-export async function generateMetadata({params: {locale, pluginId}}: {params: {locale: string, pluginId: string}}) {
+export async function generateMetadata(props: {params: Promise<{locale: string, pluginId: string}>}) {
+  const {pluginId, locale} = await props.params
+
   const t = await getTranslations({locale, namespace: 'metadata.title'})
   const plugin = await getPlugin(pluginId)
   return {
@@ -26,10 +28,13 @@ export async function generateStaticParams() {
 
 interface LayoutProps {
   children: React.ReactNode
-  params: { pluginId: string, locale: string }
+  params: Promise<{ pluginId: string, locale: string }>
 }
 
-export default async function Layout({children, params: {locale, pluginId}}: LayoutProps) {
+export default async function Layout(props: LayoutProps) {
+  const {pluginId, locale} = await props.params
+  const {children} = props
+
   setRequestLocale(locale)
   const plugin = await getPluginOr404(pluginId)
   const everything = await getEverything()

diff --git a/src/app/[locale]/plugin/[pluginId]/page.tsx b/src/app/[locale]/plugin/[pluginId]/page.tsx
@@ -2,7 +2,9 @@ import { getPluginOr404 } from "@/catalogue/data";
 import { setRequestLocale } from "next-intl/server";
 import { PluginContentIntroduction } from "./introduction/plugin-content-introduction";
 
-export default async function Page({params: {pluginId, locale}}: { params: { pluginId: string, locale: string } }) {
+export default async function Page(props: { params: Promise<{ pluginId: string, locale: string }> }) {
+  const {pluginId, locale} = await props.params
+
   setRequestLocale(locale);
   const plugin = await getPluginOr404(pluginId)
 

diff --git a/src/app/[locale]/plugin/[pluginId]/readme/page.tsx b/src/app/[locale]/plugin/[pluginId]/readme/page.tsx
@@ -3,7 +3,9 @@ import { setRequestLocale } from "next-intl/server";
 import React from "react";
 import { PluginContentReadme } from "./plugin-content-readme";
 
-export default async function Page({params: {pluginId, locale}}: { params: { pluginId: string, locale: string } }) {
+export default async function Page(props: { params: Promise<{ pluginId: string, locale: string }> }) {
+  const {pluginId, locale} = await props.params
+
   setRequestLocale(locale);
   const plugin = await getPluginOr404(pluginId)
 

diff --git a/src/app/[locale]/plugin/[pluginId]/release/[version]/page.tsx b/src/app/[locale]/plugin/[pluginId]/release/[version]/page.tsx
@@ -20,7 +20,8 @@ function getRelease(plugin: AllOfAPlugin, version: string): ReleaseInfo | undefi
   }
 }
 
-export async function generateMetadata({params}: {params: PageParams}) {
+export async function generateMetadata(props: {params: Promise<PageParams>}) {
+  const params = await props.params
   const t = await getTranslations({locale: params.locale, namespace: 'metadata.title'})
   const plugin = await getPlugin(params.pluginId)
 
@@ -52,7 +53,8 @@ export async function generateStaticParams({params}: {params: {pluginId: string}
   }
 }
 
-export default async function Page({params}: {params: PageParams}) {
+export default async function Page(props: {params: Promise<PageParams>}) {
+  const params = await props.params;
   setRequestLocale(params.locale)
 
   const version = decodeURIComponent(params.version)

diff --git a/src/app/[locale]/plugin/[pluginId]/release/page.tsx b/src/app/[locale]/plugin/[pluginId]/release/page.tsx
@@ -2,7 +2,9 @@ import { redirect } from "@/common/navigation";
 import { routes } from "@/site/routes";
 import { setRequestLocale } from "next-intl/server";
 
-export default function Page({params: {locale, pluginId}}: { params: { locale: string, pluginId: string } }) {
+export default async function Page(props: { params: Promise<{ locale: string, pluginId: string }> }) {
+  const {pluginId, locale} = await props.params
+
   setRequestLocale(locale)
 
   redirect({href: routes.pluginTab(pluginId, 'releases'), locale})

diff --git a/src/app/[locale]/plugin/[pluginId]/releases/page.tsx b/src/app/[locale]/plugin/[pluginId]/releases/page.tsx
@@ -95,7 +95,9 @@ async function PluginContentReleases({plugin}: {plugin: AllOfAPlugin}) {
   )
 }
 
-export default async function Page({params: {pluginId, locale}}: { params: { pluginId: string, locale: string } }) {
+export default async function Page(props: { params: Promise<{ pluginId: string, locale: string }> }) {
+  const {pluginId, locale} = await props.params
+
   setRequestLocale(locale);
   const plugin = await getPluginOr404(pluginId)
 

diff --git a/src/app/[locale]/plugin/page.tsx b/src/app/[locale]/plugin/page.tsx
@@ -2,7 +2,9 @@ import { redirect } from "@/common/navigation";
 import { routes } from "@/site/routes";
 import { setRequestLocale } from "next-intl/server";
 
-export default function Page({params: {locale}}: { params: { locale: string } }) {
+export default async function Page(props: { params: Promise<{ locale: string }> }) {
+  const {locale} = await props.params
+
   setRequestLocale(locale)
 
   redirect({href: routes.catalogue(), locale})

diff --git a/src/app/[locale]/plugins/page.tsx b/src/app/[locale]/plugins/page.tsx
@@ -7,14 +7,18 @@ import { DisplayStrategyContextProvider } from "./display-strategy-provider";
 import { PluginList } from "./plugin-list";
 import { Sidebar } from "./sidebar";
 
-export async function generateMetadata({params: {locale}}: {params: {locale: string}}) {
+export async function generateMetadata(props: {params: Promise<{locale: string}>}) {
+  const {locale} = await props.params
+
   const t = await getTranslations({locale, namespace: 'metadata.title'});
   return {
     title: t('catalogue'),
   }
 }
 
-export default async function Page({params: {locale}}: {params: {locale: string}}) {
+export default async function Page(props: {params: Promise<{locale: string}>}) {
+  const {locale} = await props.params
+
   setRequestLocale(locale)
   const messages = await getMessages()
   const everything = await getSimpleEverything()