chore(explorer): upgrade next.js v14 -> v15 (wip)

package.json

@@ -66,5 +66,11 @@
   "engines": {
     "node": "18.x || 20.x",
     "pnpm": "^9.6.0"
+  },
+  "pnpm": {
+    "overrides": {
+      "@types/react": "19.0.8",
+      "@types/react-dom": "19.0.3"
+    }
   }
 }

packages/explorer/package.json

@@ -29,7 +29,7 @@
     "clean:explorer": "shx rm -rf .next .turbo",
     "clean:js": "shx rm -rf dist",
     "dev": "tsup --watch",
-    "explorer:dev": "next dev --port 13690",
+    "explorer:dev": "next dev --turbopack --port 13690",
     "explorer:start": "node .next/standalone/packages/explorer/server.js",
     "knip": "knip",
     "lint": "next lint"
@@ -66,12 +66,12 @@
     "debug": "^4.3.4",
     "lucide-react": "^0.408.0",
     "monaco-editor": "^0.52.0",
-    "next": "14.2.5",
+    "next": "15.1.6",
     "node-sql-parser": "^5.3.3",
     "nuqs": "^1.19.2",
     "query-string": "^9.1.0",
-    "react": "^18",
-    "react-dom": "^18",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
     "react-hook-form": "^7.52.1",
     "sonner": "^1.5.0",
     "sql-autocomplete": "^1.1.1",
@@ -85,10 +85,10 @@
     "@trivago/prettier-plugin-sort-imports": "^4.3.0",
     "@types/better-sqlite3": "^7.6.4",
     "@types/debug": "^4.1.7",
-    "@types/react": "18.2.22",
-    "@types/react-dom": "18.2.7",
+    "@types/react": "19.0.8",
+    "@types/react-dom": "19.0.3",
     "@types/yargs": "^17.0.10",
-    "eslint-config-next": "14.2.3",
+    "eslint-config-next": "15.1.6",
     "knip": "^5.30.2",
     "postcss": "^8",
     "prettier": "3.2.5",

packages/explorer/src/app/(explorer)/[chainName]/layout.tsx

@@ -1,16 +1,19 @@
 "use client";
 
 import { notFound } from "next/navigation";
+import { use } from "react";
 import { isValidChainName } from "../../../common";
 
-type Props = {
-  params: {
-    chainName: string;
-  };
+export default function ChainLayout({
+  params,
+  children,
+}: {
+  params: Promise<{ chainName: string }>;
   children: React.ReactNode;
-};
+}): React.ReactNode {
+  const resolvedParams = use(params);
+  const { chainName } = resolvedParams;
 
-export default function ChainLayout({ params: { chainName }, children }: Props) {
   if (!isValidChainName(chainName)) {
     return notFound();
   }

packages/explorer/src/app/(explorer)/[chainName]/page.tsx

@@ -1,11 +1,15 @@
 import { redirect } from "next/navigation";
 
 type Props = {
-  params: {
+  params: Promise<{
     chainName: string;
-  };
+  }>;
 };
 
-export default async function ChainPage({ params: { chainName } }: Props) {
+export default async function ChainPage(props: Props) {
+  const params = await props.params;
+
+  const { chainName } = params;
+
   return redirect(`/${chainName}/worlds`);
 }

packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/layout.tsx

@@ -2,20 +2,25 @@
 
 import { notFound } from "next/navigation";
 import { Address } from "viem";
+import { use } from "react";
 import { isValidChainName } from "../../../../../common";
 import { Navigation } from "../../../../../components/Navigation";
 import { Providers } from "./Providers";
 import { TransactionsWatcher } from "./observe/TransactionsWatcher";
 
 type Props = {
-  params: {
+  params: Promise<{
     chainName: string;
     worldAddress: Address;
-  };
+  }>;
   children: React.ReactNode;
 };
 
-export default function WorldLayout({ params: { chainName }, children }: Props) {
+export default function WorldLayout(props: Props) {
+  const params = use(props.params);
+  const { chainName } = params;
+  const { children } = props;
+
   if (!isValidChainName(chainName)) {
     return notFound();
   }

packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/page.tsx

@@ -2,12 +2,16 @@ import { redirect } from "next/navigation";
 import { supportedChainName } from "../../../../../common";
 
 type Props = {
-  params: {
+  params: Promise<{
     chainName: supportedChainName;
     worldAddress: string;
-  };
+  }>;
 };
 
-export default async function WorldPage({ params: { chainName, worldAddress } }: Props) {
+export default async function WorldPage(props: Props) {
+  const params = await props.params;
+
+  const { chainName, worldAddress } = params;
+
   return redirect(`/${chainName}/worlds/${worldAddress}/explore`);
 }

packages/explorer/src/app/(explorer)/[chainName]/worlds/page.tsx

@@ -19,7 +19,7 @@ async function fetchWorlds(chainName: supportedChainName): Promise<Address[]> {
   let worldsApiUrl: string | null = null;
 
   if (indexer.type === "sqlite") {
-    const headersList = headers();
+    const headersList = await headers();
     const host = headersList.get("host") || "";
     const protocol = headersList.get("x-forwarded-proto") || "http";
     const baseUrl = `${protocol}://${host}`;
@@ -46,12 +46,16 @@ async function fetchWorlds(chainName: supportedChainName): Promise<Address[]> {
 }
 
 type Props = {
-  params: {
+  params: Promise<{
     chainName: supportedChainName;
-  };
+  }>;
 };
 
-export default async function WorldsPage({ params: { chainName } }: Props) {
+export default async function WorldsPage(props: Props) {
+  const params = await props.params;
+
+  const { chainName } = params;
+
   const worlds = await fetchWorlds(chainName);
   if (worlds.length === 1) {
     return redirect(`/${chainName}/worlds/${worlds[0]}`);

packages/explorer/src/app/(explorer)/hooks/usePrevious.ts

@@ -1,7 +1,7 @@
 import { useEffect, useRef } from "react";
 
 export function usePrevious<T>(value: T): T | undefined {
-  const ref = useRef<T>();
+  const ref = useRef<T>(undefined);
   useEffect(() => {
     ref.current = value;
   }, [value]);