chore: update to react 19 and Nextjs 15

package.json

@@ -9,7 +9,7 @@
   },
   "type": "module",
   "scripts": {
-    "dev": "next dev",
+    "dev": "next dev --turbopack",
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
@@ -31,17 +31,17 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "cmdk": "^1.0.0",
-    "framer-motion": "^11.1.7",
+    "framer-motion": "^11.11.10",
     "fuse.js": "^7.0.0",
     "lucide-react": "^0.453.0",
     "mini-svg-data-uri": "^1.4.4",
-    "next": "14.2.15",
+    "next": "15.0.2",
     "next-themes": "^0.3.0",
     "pocketbase": "^0.21.4",
     "prettier-plugin-organize-imports": "^4.1.0",
-    "react": "^18",
+    "react": "19.0.0-rc-02c0e824-20241028",
     "react-code-blocks": "^0.1.6",
-    "react-dom": "^18",
+    "react-dom": "19.0.0-rc-02c0e824-20241028",
     "react-icons": "^5.1.0",
     "react-simple-typewriter": "^5.0.1",
     "sharp": "^0.33.5",
@@ -51,11 +51,11 @@
   },
   "devDependencies": {
     "@types/node": "^22",
-    "@types/react": "^18",
-    "@types/react-dom": "^18",
+    "@types/react": "npm:types-react@19.0.0-rc.1",
+    "@types/react-dom": "npm:types-react-dom@19.0.0-rc.1",
     "@typescript-eslint/eslint-plugin": "^8.8.1",
     "@typescript-eslint/parser": "^8.8.1",
-    "eslint-config-next": "^14.2.15",
+    "eslint-config-next": "15.0.2",
     "postcss": "^8",
     "eslint": "^9.13.0",
     "prettier": "^3.2.5",
@@ -64,5 +64,9 @@
     "tailwindcss-animate": "^1.0.7",
     "tailwindcss-animated": "^1.1.2",
     "typescript": "^5"
+  },
+  "overrides": {
+    "@types/react": "npm:types-react@19.0.0-rc.1",
+    "@types/react-dom": "npm:types-react-dom@19.0.0-rc.1"
   }
-}
+}

src/app/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 import AnimatedGradientText from "@/components/magicui/animated-gradient-text";
-import Particles from "@/components/magicui/particles";
+import Particles from "@/components/ui/particles";
 import { Button } from "@/components/ui/button";
 import { Separator } from "@/components/ui/separator";
 import { cn } from "@/lib/utils";

src/app/scripts/page.tsx

@@ -2,12 +2,11 @@ import { Metadata } from "next";
 import ScriptPage from "./_components/ScriptPage";
 
 type Props = {
-  searchParams: { [key: string]: string | string[] | undefined };
+  searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
 };
 
-export async function generateMetadata({
-  searchParams,
-}: Props): Promise<Metadata | null> {
+export async function generateMetadata(props: Props): Promise<Metadata | null> {
+  const searchParams = await props.searchParams;
   const scriptName = searchParams.id;
 
   if (!scriptName || typeof scriptName !== "string") {

src/components/magicui/number-ticker.tsx

@@ -10,11 +10,13 @@ export default function NumberTicker({
   direction = "up",
   delay = 0,
   className,
+  decimalPlaces = 0,
 }: {
   value: number;
   direction?: "up" | "down";
   className?: string;
   delay?: number; // delay in s
+  decimalPlaces?: number;
 }) {
   const ref = useRef<HTMLSpanElement>(null);
   const motionValue = useMotionValue(direction === "down" ? value : 0);
@@ -22,7 +24,10 @@ export default function NumberTicker({
     damping: 60,
     stiffness: 100,
   });
-  const isInView = useInView(ref, { once: true, margin: "0px" });
+  const isInView = useInView(ref as React.RefObject<Element>, {
+    once: true,
+    margin: "0px",
+  });
 
   useEffect(() => {
     isInView &&
@@ -35,18 +40,19 @@ export default function NumberTicker({
     () =>
       springValue.on("change", (latest) => {
         if (ref.current) {
-          ref.current.textContent = Intl.NumberFormat("en-US").format(
-            Number(latest.toFixed(0)),
-          );
+          ref.current.textContent = Intl.NumberFormat("en-US", {
+            minimumFractionDigits: decimalPlaces,
+            maximumFractionDigits: decimalPlaces,
+          }).format(Number(latest.toFixed(decimalPlaces)));
         }
       }),
-    [springValue],
+    [springValue, decimalPlaces],
   );
 
   return (
     <span
       className={cn(
-        "inline-block tabular-nums tracking-wider text-black dark:text-white",
+        "inline-block tabular-nums text-black dark:text-white tracking-wider",
         className,
       )}
       ref={ref}

src/components/ui/particles.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { cn } from "@/lib/utils";
 import React, { useEffect, useRef, useState } from "react";
 
 interface MousePosition {
@@ -70,7 +71,7 @@ const Particles: React.FC<ParticlesProps> = ({
   const canvasRef = useRef<HTMLCanvasElement>(null);
   const canvasContainerRef = useRef<HTMLDivElement>(null);
   const context = useRef<CanvasRenderingContext2D | null>(null);
-  const circles = useRef<any[]>([]);
+  const circles = useRef<Circle[]>([]);
   const mousePosition = MousePosition();
   const mouse = useRef<{ x: number; y: number }>({ x: 0, y: 0 });
   const canvasSize = useRef<{ w: number; h: number }>({ w: 0, h: 0 });
@@ -269,7 +270,11 @@ const Particles: React.FC<ParticlesProps> = ({
   };
 
   return (
-    <div className={className} ref={canvasContainerRef} aria-hidden="true">
+    <div
+      className={cn("pointer-events-none", className)}
+      ref={canvasContainerRef}
+      aria-hidden="true"
+    >
       <canvas ref={canvasRef} className="size-full" />
     </div>
   );

tsconfig.json

@@ -1,6 +1,10 @@
 {
   "compilerOptions": {
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -18,9 +22,19 @@
       }
     ],
     "paths": {
-      "@/*": ["./src/*"]
-    }
+      "@/*": [
+        "./src/*"
+      ]
+    },
+    "target": "ES2017"
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-  "exclude": ["node_modules"]
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
 }