Migrate to nextjs 15

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/utilsDisplay.tsx

@@ -19,7 +19,7 @@ type ResultFontSize = "sm" | "base" | "xs" | "lg" | "xl" | "2xl" | "3xl";
 export const displayTxResult = (
   displayContent: DisplayContent | DisplayContent[],
   fontSize: ResultFontSize = "base",
-): string | ReactElement | number => {
+): string | ReactElement<any> | number => {
   if (displayContent == null) {
     return "";
   }

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/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.4",
     "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.54",
@@ -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/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
         ${