update nextjs to rc1

.gitignore

@@ -35,3 +35,5 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+docker-compose-dev.yaml
+Dockerfile.dev

Dockerfile

@@ -1,6 +1,6 @@
 FROM node:22-alpine AS base
 
-ENV YARN_VERSION=4.3.1
+ENV YARN_VERSION=4.5
 RUN corepack enable && corepack prepare yarn@${YARN_VERSION} --activate
 RUN yarn set version ${YARN_VERSION}
 RUN apk add --no-cache libc6-compat
@@ -25,7 +25,7 @@ RUN \
 
 COPY src ./src
 COPY public ./public
-COPY next.config.mjs .
+COPY next.config.ts .
 COPY tsconfig.json .
 COPY postcss.config.js .
 COPY mdx-components.tsx .

next.config.mjs → next.config.ts

@@ -1,7 +1,6 @@
 import createMDX from "@next/mdx";
-
-/** @type {import('next').NextConfig} */
-const nextConfig = {
+import type { NextConfig } from "next";
+const nextConfig: NextConfig = {
   pageExtensions: ["js", "jsx", "md", "mdx", "ts", "tsx"],
   output: "standalone",
   experimental: {
@@ -34,7 +33,7 @@ const nextConfig = {
   env: {
     NEXT_PUBLIC_SITE: "https://djadetech.com",
   },
-  headers() {
+  async headers() {
     return [
       {
         source: "/assets/:slug*",

package.json

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev -p 3001",
+    "dev": "next dev --turbo -p 3001",
     "build": "next build",
     "start": "next start -p 3001",
     "lint": "next lint",
@@ -15,7 +15,7 @@
   "dependencies": {
     "@mdx-js/loader": "^3.0.1",
     "@mdx-js/react": "^3.0.1",
-    "@next/mdx": "^14.2.5",
+    "@next/mdx": "15.0.0-rc.1",
     "@radix-ui/react-avatar": "^1.1.0",
     "@radix-ui/react-dialog": "^1.1.1",
     "@radix-ui/react-dropdown-menu": "^2.1.1",
@@ -32,30 +32,33 @@
     "drizzle-orm": "^0.33.0",
     "jose": "^5.6.3",
     "lucide-react": "^0.427.0",
-    "next": "15.0.0-rc.0",
+    "next": "15.0.0-rc.1",
     "next-themes": "^0.3.0",
     "postgres": "^3.4.4",
-    "react": "19.0.0-rc-f994737d14-20240522",
-    "react-dom": "19.0.0-rc-f994737d14-20240522",
+    "react": "19.0.0-rc-cd22717c-20241013",
+    "react-dom": "19.0.0-rc-cd22717c-20241013",
     "server-only": "^0.0.1",
     "sharp": "^0.33.4",
-    "tailwind-merge": "^2.4.0",
-    "tailwindcss-animate": "^1.0.7"
+    "tailwind-merge": "^2.4.0"
   },
   "devDependencies": {
     "@faker-js/faker": "^9.0.0",
     "@tailwindcss/postcss": "^4.0.0-alpha.17",
     "@types/node": "^20",
-    "@types/react": "^18",
-    "@types/react-dom": "^18",
+    "@types/react": "npm:[email protected]",
+    "@types/react-dom": "npm:[email protected]",
     "drizzle-kit": "^0.24.1",
-    "eslint": "^8",
-    "eslint-config-next": "15.0.0-rc.0",
+    "eslint": "^9.12.0",
+    "eslint-config-next": "15.0.0-rc.1",
     "prettier": "^3.3.2",
     "prettier-plugin-tailwindcss": "^0.6.5",
     "tailwindcss": "^4.0.0-alpha.17",
     "tsx": "^4.16.2",
     "typescript": "^5.5.3"
   },
-  "packageManager": "[email protected]+sha512.af78262d7d125afbfeed740602ace8c5e4405cd7f4735c08feb327286b2fdb2390fbca01589bfd1f50b1240548b74806767f5a063c94b67e431aabd0d86f7774"
+  "packageManager": "[email protected]",
+  "resolutions": {
+    "@types/react": "npm:[email protected]",
+    "@types/react-dom": "npm:[email protected]"
+  }
 }

src/app/asteroidz/components/Tooltip.tsx

@@ -12,13 +12,13 @@ const Tooltip = ({
   content: string[];
 }) => {
   const [active, setActive] = useState(false);
-  const refTimeout = useRef<NodeJS.Timeout>();
-  const refDisplay = useRef<NodeJS.Timeout>();
+  const refTimeout = useRef<NodeJS.Timeout>(null);
+  const refDisplay = useRef<NodeJS.Timeout>(null);
   const anchorRef = useRef<HTMLDivElement>(null);
 
   const showTip = () => {
-    clearTimeout(refTimeout.current);
-    clearTimeout(refDisplay.current);
+    if (refTimeout.current) clearTimeout(refTimeout.current);
+    if (refDisplay.current) clearTimeout(refDisplay.current);
     refTimeout.current = setTimeout(() => {
       setActive(true);
     }, delay || 400);
@@ -28,8 +28,8 @@ const Tooltip = ({
   };
 
   const hideTip = () => {
-    clearTimeout(refTimeout.current);
-    clearTimeout(refDisplay.current);
+    if (refTimeout.current) clearTimeout(refTimeout.current);
+    if (refDisplay.current) clearTimeout(refDisplay.current);
     setActive(false);
   };
 

src/app/asteroidz/components/Total.tsx

@@ -4,7 +4,7 @@ import { useGameState } from "./Context";
 
 const Total = () => {
   const currentScore = useGameState().currentScore;
-  const refDisplay = useRef<typeof setDisplay>();
+  const refDisplay = useRef<typeof setDisplay>(null);
   const [displayTotal, setDisplayTotal] = useState(0);
 
   useEffect(() => {

src/app/asteroidz/components/UserName.tsx

@@ -6,7 +6,7 @@ const UserName = () => {
   const [showName, setShowName] = useState(false);
   const userName = useGameState().playerName;
   const dispatch = useGameStateDispatch();
-  const ref = useRef<NodeJS.Timeout>();
+  const ref = useRef<NodeJS.Timeout>(null);
   const inputRef = useRef<HTMLInputElement>(null);
 
   useEffect(() => {
@@ -18,27 +18,27 @@ const UserName = () => {
   const onClick = (e: React.MouseEvent<HTMLDivElement>) => {
     e.stopPropagation();
     setShowName(!showName);
-    clearTimeout(ref.current);
+    if (ref.current) clearTimeout(ref.current);
   };
 
   const onFocus = (e: React.FocusEvent<HTMLInputElement>) => {
     e.currentTarget.select();
     setShowName(true);
-    clearTimeout(ref.current);
+    if (ref.current) clearTimeout(ref.current);
   };
   const onKeyDown = (e: React.KeyboardEvent) => {
     if (e.code == "Enter") {
       setShowName(false);
     }
-    clearTimeout(ref.current);
+    if (ref.current) clearTimeout(ref.current);
   };
 
   const onMouseLeave = () => {
     ref.current = setTimeout(() => setShowName(false), 3000);
   };
 
   const onMouseEnter = () => {
-    clearTimeout(ref.current);
+    if (ref.current) clearTimeout(ref.current);
   };
 
   const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {

src/app/asteroidz/components/ViewPort.tsx

@@ -23,8 +23,8 @@ export type Score = {
 const ViewPort = () => {
   const [clickValues, setClickValues] = useState([] as Score[]);
   const [cpsValues, setCpsValues] = useState([] as Score[]);
-  const refTimer = useRef<typeof sendAddCps>();
-  const refShake = useRef<NodeJS.Timeout>();
+  const refTimer = useRef<typeof sendAddCps>(null);
+  const refShake = useRef<NodeJS.Timeout>(null);
   const dispatch = useGameStateDispatch();
   const inven = useGameState().items;
   const [clickStats, setClickStats] = useState({} as stats);

src/app/genshin/components/Char-Selector.tsx

@@ -8,7 +8,6 @@ export default function CharSelector({
   setCurrentCharacter,
   characterLoading,
   setCharacterLoading,
-  characterRef,
 }: {
   characters: (typeof genshinData)[0]["characters"];
   currentCharacter: string;
@@ -17,7 +16,6 @@ export default function CharSelector({
   >;
   characterLoading: boolean;
   setCharacterLoading: React.Dispatch<React.SetStateAction<boolean>>;
-  characterRef: React.RefObject<HTMLImageElement>;
 }) {
   const onClick = (direction: "left" | "right") => {
     const index = characters.findIndex(
@@ -61,13 +59,13 @@ export default function CharSelector({
                 ].relativePath
               }
               quality={75}
-              ref={character.name === currentCharacter ? characterRef : null}
               alt={character.name}
               onClick={() => {
                 if (currentCharacter === character.name) return;
                 setCurrentCharacter(character);
                 setCharacterLoading(true);
               }}
+              id={`icon-${character.name}`}
               fill={true}
               priority={true}
               sizes="20vw"

src/app/genshin/components/Character.tsx

@@ -13,16 +13,18 @@ export default function Character({ data }: { data: Cities }) {
   const [xdown, setXdown] = useState(0);
   const [ydown, setYdown] = useState(0);
   const [characterLoading, setCharacterLoading] = useState(true);
-  const characterRef = useRef<HTMLImageElement>(null);
 
   useEffect(() => {
     setCharacterLoading(true);
     setCurrentCharacter(data[currentCity].characters[0]);
   }, [currentCity, data]);
 
   useEffect(() => {
-    if (characterRef.current) {
-      characterRef.current!.scrollIntoView({
+    const characterRef = document.getElementById(
+      `icon-${currentCharacter.name}`,
+    )
+    if (characterRef) {
+      characterRef.scrollIntoView({
         behavior: "smooth",
         block: "center",
         inline: "center",
@@ -100,7 +102,6 @@ export default function Character({ data }: { data: Cities }) {
           setCurrentCharacter={setCurrentCharacter}
           characterLoading={characterLoading}
           setCharacterLoading={setCharacterLoading}
-          characterRef={characterRef}
         />
       </div>
     </>

src/app/genshin/components/Profile.tsx

@@ -19,7 +19,7 @@ export default function Profile({
         onTouchStart={(e) => handleTouchStart(e)}
         key={currentCharacter}
         quality={75}
-        className="left-[calc(50%-63vh)] z-0 h-svh w-auto max-w-none overflow-clip object-cover"
+        className="left-[calc(50%-63vh)] z-0 h-svh w-auto max-w-none overflow-clip object-cover opacity-0"
         style={{ inset: undefined, width: undefined, height: undefined }}
         src={
           portrait[
@@ -31,7 +31,11 @@ export default function Profile({
         alt={currentCharacter}
         fill={true}
         priority={true}
-        onLoad={() => setCharacterLoading(false)}
+        onLoad={(e) => {
+          setCharacterLoading(false);
+          e.currentTarget.classList.add("animate-slide-in");
+          e.currentTarget.classList.remove("opacity-0");
+        }}
         sizes="100vw"
         placeholder="blur"
         blurDataURL={

src/app/global.css

@@ -26,6 +26,7 @@
   --animate-acordian-down: animate-acordian-down 0.2s ease-out;
   --animate-acordian-up: animate-acordian-up 0.2s ease-out;
   --animate-appear-up: animate-appear-up 500ms ease-in-out;
+  --animate-slide-in: animate-slide-in 500ms ease-in-out;
   --font-family-sans: var(--font-inter), sans-serif;
 }
 
@@ -227,3 +228,10 @@
     transform: translateY(0%);
   }
 }
+
+@keyframes animate-slide-in {
+  from {
+    opacity: 0;
+    transform: translateX(4rem);
+  }
+}

src/app/layout.tsx

@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 import { ThemeProvider } from "next-themes";
 import { Inter } from "next/font/google";
+import Script from "next/script";
 import "./global.css";
 
 export const metadata: Metadata = {
@@ -21,6 +22,11 @@ export default function RootLayout({
   return (
     <html lang="en" suppressHydrationWarning>
       <body className={`${inter.variable} font-sans`}>
+        {/*<Script
+          strategy="afterInteractive"
+          src="./data.js"
+          data-cf-beacon='{"token": "d7471a6eb8864867b7e120a5d7046876"}'
+        ></Script>*/}
         <ThemeProvider enableSystem={true} attribute="class">
           {children}
         </ThemeProvider>

src/app/redirect/[[...redirect]]/route.ts

@@ -2,10 +2,8 @@ import { NextResponse } from "next/server";
 import { exchangeCodeForSession } from "@/lib/auth";
 // The client you created from the Server-Side Auth instructions
 
-export async function GET(
-  request: Request,
-  { params }: { params: { redirect?: string[] } },
-) {
+export async function GET(request: Request, props: { params: Promise<{ redirect?: string[] }> }) {
+  const params = await props.params;
   const { searchParams, origin } = new URL(request.url);
   const code = searchParams.get("code");