Migrate to nextjs 15

packages/nextjs/app/blockexplorer/_components/AddressStorageTab.tsx

@@ -34,7 +34,7 @@ export const AddressStorageTab = ({ address }: { address: Address }) => {
         }
         setStorage(storageData);
       } catch (error) {
-        console.error("Failed to fetch storage:", error);
+        console.warn("Failed to fetch storage:", error);
       }
     };
 

packages/nextjs/app/blockexplorer/_components/SearchBar.tsx

@@ -22,7 +22,7 @@ export const SearchBar = () => {
           return;
         }
       } catch (error) {
-        console.error("Failed to fetch transaction:", error);
+        console.warn("Failed to fetch transaction:", error);
       }
     }
 

packages/nextjs/app/blockexplorer/address/[address]/page.tsx

@@ -7,7 +7,7 @@ import { isZeroAddress } from "~~/utils/scaffold-eth/common";
 import { GenericContractsDeclaration } from "~~/utils/scaffold-eth/contract";
 
 type PageProps = {
-  params: { address: string };
+  params: Promise<{ address: string }>;
 };
 
 async function fetchByteCodeAndAssembly(buildInfoDirectory: string, contractPath: string) {
@@ -82,7 +82,8 @@ export function generateStaticParams() {
   return [{ address: "0x0000000000000000000000000000000000000000" }];
 }
 
-const AddressPage = async ({ params }: PageProps) => {
+const AddressPage = async (props: PageProps) => {
+  const params = await props.params;
   const address = params?.address as string;
 
   if (isZeroAddress(address)) return null;

packages/nextjs/app/blockexplorer/transaction/[txHash]/page.tsx

@@ -4,14 +4,15 @@ import { Hash } from "viem";
 import { isZeroAddress } from "~~/utils/scaffold-eth/common";
 
 type PageProps = {
-  params: { txHash?: Hash };
+  params: Promise<{ txHash?: Hash }>;
 };
 
 export function generateStaticParams() {
   // An workaround to enable static exports in Next.js, generating single dummy page.
   return [{ txHash: "0x0000000000000000000000000000000000000000" }];
 }
-const TransactionPage: NextPage<PageProps> = ({ params }: PageProps) => {
+const TransactionPage: NextPage<PageProps> = async (props: PageProps) => {
+  const params = await props.params;
   const txHash = params?.txHash as Hash;
 
   if (isZeroAddress(txHash)) return null;

packages/nextjs/app/debug/_components/contract/WriteOnlyFunctionForm.tsx

@@ -55,7 +55,7 @@ export const WriteOnlyFunctionForm = ({
         await writeTxn(makeWriteWithParams);
         onChange();
       } catch (e: any) {
-        console.error("⚡️ ~ file: WriteOnlyFunctionForm.tsx:handleWrite ~ error", e);
+        console.warn("⚡️ ~ file: WriteOnlyFunctionForm.tsx:handleWrite ~ error", e);
       }
     }
   };

packages/nextjs/components/scaffold-eth/Faucet.tsx

@@ -48,7 +48,7 @@ export const Faucet = () => {
             </p>
           </>,
         );
-        console.error("⚡️ ~ file: Faucet.tsx:getFaucetAddress ~ error", error);
+        console.warn("⚡️ ~ file: Faucet.tsx:getFaucetAddress ~ error", error);
       }
     };
     getFaucetAddress();
@@ -69,7 +69,7 @@ export const Faucet = () => {
       setInputAddress(undefined);
       setSendValue("");
     } catch (error) {
-      console.error("⚡️ ~ file: Faucet.tsx:sendETH ~ error", error);
+      console.warn("⚡️ ~ file: Faucet.tsx:sendETH ~ error", error);
       setLoading(false);
     }
   };

packages/nextjs/components/scaffold-eth/FaucetButton.tsx

@@ -40,7 +40,7 @@ export const FaucetButton = () => {
       });
       setLoading(false);
     } catch (error) {
-      console.error("⚡️ ~ file: FaucetButton.tsx:sendETH ~ error", error);
+      console.warn("⚡️ ~ file: FaucetButton.tsx:sendETH ~ error", error);
       setLoading(false);
     }
   };

packages/nextjs/hooks/scaffold-eth/useContractLogs.ts

@@ -10,7 +10,7 @@ export const useContractLogs = (address: Address) => {
 
   useEffect(() => {
     const fetchLogs = async () => {
-      if (!client) return console.error("Client not found");
+      if (!client) return console.warn("Client not found");
       try {
         const existingLogs = await client.getLogs({
           address: address,
@@ -19,7 +19,7 @@ export const useContractLogs = (address: Address) => {
         });
         setLogs(existingLogs);
       } catch (error) {
-        console.error("Failed to fetch logs:", error);
+        console.warn("Failed to fetch logs:", error);
       }
     };
     fetchLogs();

packages/nextjs/hooks/scaffold-eth/useDeployedContractInfo.ts

@@ -71,7 +71,7 @@ export function useDeployedContractInfo<TContractName extends ContractName>(
         }
         setStatus(ContractCodeStatus.DEPLOYED);
       } catch (e) {
-        console.error(e);
+        console.warn(e);
         setStatus(ContractCodeStatus.NOT_FOUND);
       }
     };

packages/nextjs/hooks/scaffold-eth/useOutsideClick.ts

@@ -5,7 +5,7 @@ import React, { useEffect } from "react";
  * @param ref - react ref of the element
  * @param callback - callback function to call when clicked outside
  */
-export const useOutsideClick = (ref: React.RefObject<HTMLElement>, callback: { (): void }) => {
+export const useOutsideClick = (ref: React.RefObject<HTMLElement | null>, callback: { (): void }) => {
   useEffect(() => {
     function handleOutsideClick(event: MouseEvent) {
       if (!(event.target instanceof Element)) {

packages/nextjs/hooks/scaffold-eth/useTransactor.tsx

@@ -42,7 +42,7 @@ export const useTransactor = (_walletClient?: WalletClient): TransactionFunc =>
   const result: TransactionFunc = async (tx, options) => {
     if (!walletClient) {
       notification.error("Cannot access account");
-      console.error("⚡️ ~ file: useTransactor.tsx ~ error");
+      console.warn("⚡️ ~ file: useTransactor.tsx ~ error");
       return;
     }
 
@@ -93,7 +93,7 @@ export const useTransactor = (_walletClient?: WalletClient): TransactionFunc =>
       if (notificationId) {
         notification.remove(notificationId);
       }
-      console.error("⚡️ ~ file: useTransactor.ts ~ error", error);
+      console.warn("⚡️ ~ file: useTransactor.ts ~ error", error);
       const message = getParsedError(error);
 
       // if receipt was reverted, show notification with block explorer link and return error

packages/nextjs/next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

packages/nextjs/next.config.js → packages/nextjs/next.config.ts

@@ -1,7 +1,6 @@
-// @ts-check
+import type { NextConfig } from "next";
 
-/** @type {import('next').NextConfig} */
-const nextConfig = {
+const nextConfig: NextConfig = {
   reactStrictMode: true,
   typescript: {
     ignoreBuildErrors: process.env.NEXT_PUBLIC_IGNORE_BUILD_ERROR === "true",
@@ -16,4 +15,4 @@ const nextConfig = {
   },
 };
 
-module.exports = nextConfig;
+export default nextConfig;

packages/nextjs/package.json

@@ -23,13 +23,13 @@
     "blo": "^1.2.0",
     "burner-connector": "0.0.9",
     "daisyui": "4.12.10",
-    "next": "^14.2.11",
+    "next": "^15.1.6",
     "next-nprogress-bar": "^2.3.13",
     "next-themes": "^0.3.0",
     "qrcode.react": "^4.0.1",
-    "react": "^18.3.1",
+    "react": "^19.0.0",
     "react-copy-to-clipboard": "^5.1.0",
-    "react-dom": "^18.3.1",
+    "react-dom": "^19.0.0",
     "react-hot-toast": "^2.4.0",
     "usehooks-ts": "^3.1.0",
     "viem": "2.21.32",
@@ -39,11 +39,11 @@
   "devDependencies": {
     "@trivago/prettier-plugin-sort-imports": "^4.3.0",
     "@types/node": "^18.19.50",
-    "@types/react": "^18.3.5",
+    "@types/react": "^19.0.7",
     "abitype": "1.0.6",
     "autoprefixer": "^10.4.20",
     "eslint": "^8.57.1",
-    "eslint-config-next": "^14.2.15",
+    "eslint-config-next": "^15.1.4",
     "eslint-config-prettier": "^8.10.0",
     "eslint-plugin-prettier": "^5.2.1",
     "postcss": "^8.4.45",

packages/nextjs/utils/scaffold-eth/fetchPriceFromUniswap.ts

@@ -63,7 +63,7 @@ export const fetchPriceFromUniswap = async (targetNetwork: ChainWithAttributes):
     const price = parseFloat(route.midPrice.toSignificant(6));
     return price;
   } catch (error) {
-    console.error(
+    console.warn(
       `useNativeCurrencyPrice - Error fetching ${targetNetwork.nativeCurrency.symbol} price from Uniswap: `,
       error,
     );

packages/nextjs/utils/scaffold-eth/notification.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { ToastPosition, toast } from "react-hot-toast";
+import { Toast, ToastPosition, toast } from "react-hot-toast";
 import { XMarkIcon } from "@heroicons/react/20/solid";
 import {
   CheckCircleIcon,
@@ -44,7 +44,7 @@ const Notification = ({
   position = DEFAULT_POSITION,
 }: NotificationProps) => {
   return toast.custom(
-    t => (
+    (t: Toast) => (
       <div
         className={`flex flex-row items-start justify-between max-w-sm rounded-xl shadow-center shadow-accent bg-base-200 p-4 transform-gpu relative transition-all duration-500 ease-in-out space-x-2
         ${