feat: upgrade to nextjs 15

app/api/evaluators/[evaluatorId]/route.tsx

@@ -3,8 +3,9 @@ import { getTrustedAttestor } from "@/github/getTrustedAttestor";
 
 export async function GET(
   request: NextRequest,
-  { params }: { params: { evaluatorId: string } },
+  props: { params: Promise<{ evaluatorId: string }> },
 ) {
+  const params = await props.params;
   const { evaluatorId } = params;
 
   if (!evaluatorId) {

app/api/hypercerts/[hypercertId]/image/route.ts

@@ -62,8 +62,9 @@ async function servePlaceholderImage() {
 // GET handler to fetch and return the image associated with the given hypercert ID
 export async function GET(
   request: NextRequest,
-  { params }: { params: { hypercertId: string } },
+  props: { params: Promise<{ hypercertId: string }> },
 ) {
+  const params = await props.params;
   const { hypercertId } = params;
 
   // Validate hypercert ID

app/collections/[collectionId]/page.tsx

@@ -29,13 +29,12 @@ const CollectionPageInner = async ({
   );
 };
 
-export default async function CollectionPage({
-  params,
-}: {
-  params: {
+export default async function CollectionPage(props: {
+  params: Promise<{
     collectionId: string;
-  };
+  }>;
 }) {
+  const params = await props.params;
   return (
     <main className="flex flex-col p-8 md:p-24 pb-24 space-y-4">
       <Suspense fallback={"Loading"}>

app/collections/edit/[collectionId]/page.tsx

@@ -4,11 +4,13 @@ import {
 } from "@/components/collections/collection-form";
 import { getCollectionById } from "@/collections/getCollectionById";
 
-const EditCollectionPage = async ({
-  params: { collectionId },
-}: {
-  params: { collectionId: string };
+const EditCollectionPage = async (props: {
+  params: Promise<{ collectionId: string }>;
 }) => {
+  const params = await props.params;
+
+  const { collectionId } = params;
+
   const data = await getCollectionById(collectionId);
 
   if (!data) {

app/evaluators/[evaluatorId]/page.tsx

@@ -2,11 +2,10 @@ import EvaluatorDetail from "@/components/evaluator/evaluator-detail";
 import PageSkeleton from "@/components/hypercert/page-skeleton";
 import { Suspense } from "react";
 
-export default async function EvaluatorPage({
-  params,
-}: {
-  params: { evaluatorId: string };
+export default async function EvaluatorPage(props: {
+  params: Promise<{ evaluatorId: string }>;
 }) {
+  const params = await props.params;
   return (
     <main className="flex flex-col p-8 md:p-24 pb-24 space-y-4">
       <section>

app/evaluators/page.tsx

@@ -9,11 +9,10 @@ export const metadata: Metadata = {
     "Hypercerts trusted evaluators attest to the correctness of hypercerts.",
 };
 
-export default function EvaluatorsPage({
-  searchParams,
-}: {
-  searchParams: Record<string, string>;
+export default async function EvaluatorsPage(props: {
+  searchParams: Promise<Record<string, string>>;
 }) {
+  const searchParams = await props.searchParams;
   return (
     <main className="flex flex-col p-8 md:px-24 pt-8 pb-24 md:pb-6 space-y-4 flex-1 container max-w-3xl">
       <h1 className="font-serif text-3xl lg:text-5xl tracking-tight">

app/explore/page.tsx

@@ -12,11 +12,10 @@ export const metadata: Metadata = {
     "The best place to discover and contribute to hypercerts and hyperboards.",
 };
 
-export default function ExplorePage({
-  searchParams,
-}: {
-  searchParams: Record<string, string>;
+export default async function ExplorePage(props: {
+  searchParams: Promise<Record<string, string>>;
 }) {
+  const searchParams = await props.searchParams;
   return (
     <main className="flex flex-col p-8 md:px-24 pt-8 pb-24 space-y-4 flex-1 container max-w-screen-2xl">
       <h1 className="font-serif text-3xl lg:text-5xl tracking-tight w-full">

app/hypercerts/[hypercertId]/page.tsx

@@ -1,4 +1,4 @@
-import { Metadata, ResolvingMetadata } from "next";
+import { Metadata, NextPage, ResolvingMetadata } from "next";
 
 import { getHypercert } from "@/hypercerts/getHypercert";
 
@@ -23,15 +23,14 @@ import {
   marketplaceListingsFlag,
 } from "@/flags/chain-actions-flag";
 
-type Props = {
-  params: { hypercertId: string };
-  searchParams: Record<string, string>;
-};
-
 export async function generateMetadata(
-  { params }: Props,
+  props: {
+    params: Promise<{ hypercertId: string }>;
+    searchParams: Promise<Record<string, string>>;
+  },
   parent: ResolvingMetadata,
 ): Promise<Metadata> {
+  const params = await props.params;
   const { hypercertId } = params;
   const hypercert = await getHypercert(hypercertId);
 
@@ -48,7 +47,13 @@ export async function generateMetadata(
     },
   };
 }
-export default async function HypercertPage({ params, searchParams }: Props) {
+
+export default async function HypercertPage(props: {
+  params: Promise<{ hypercertId: string }>;
+  searchParams: Promise<Record<string, string>>;
+}) {
+  const searchParams = await props.searchParams;
+  const params = await props.params;
   const { hypercertId } = params;
 
   const hypercert = await getHypercert(hypercertId);

app/hypercerts/new-transferable/page.tsx

@@ -6,11 +6,10 @@ import { getBlueprintById } from "@/blueprints/getBlueprints";
 import { TransferRestrictions } from "@hypercerts-org/sdk";
 import { Alert, AlertTitle, AlertDescription } from "@/components/ui/alert";
 
-export default async function NewHypercertPage({
-  searchParams,
-}: {
-  searchParams: { blueprintId?: string };
+export default async function NewHypercertPage(props: {
+  searchParams: Promise<{ blueprintId?: string }>;
 }) {
+  const searchParams = await props.searchParams;
   let formValues: HypercertFormValues | undefined;
   let parsedId: number | undefined;
   if (searchParams.blueprintId) {

app/hypercerts/new/page.tsx

@@ -4,11 +4,10 @@ import {
 } from "@/components/hypercert/hypercert-minting-form";
 import { getBlueprintById } from "@/blueprints/getBlueprints";
 
-export default async function NewHypercertPage({
-  searchParams,
-}: {
-  searchParams: { blueprintId?: string };
+export default async function NewHypercertPage(props: {
+  searchParams: Promise<{ blueprintId?: string }>;
 }) {
+  const searchParams = await props.searchParams;
   let formValues: HypercertFormValues | undefined;
   let parsedId: number | undefined;
   let blueprintChainId: number | undefined;

app/layout.tsx

@@ -49,12 +49,15 @@ export const metadata: Metadata = {
   ],
 };
 
-export default function RootLayout({
+export default async function RootLayout({
   children,
 }: Readonly<{
   children: React.ReactNode;
 }>) {
-  const initialState = cookieToInitialState(config, headers().get("cookie"));
+  const initialState = cookieToInitialState(
+    config,
+    (await headers()).get("cookie"),
+  );
   return (
     <html lang="en">
       <body

app/profile/[address]/page.tsx

@@ -9,13 +9,12 @@ import { CollectionsTabContent } from "@/app/profile/[address]/collections-tab-c
 import { MarketplaceTabContent } from "@/app/profile/[address]/marketplace-tab-content";
 import { BlueprintsTabContent } from "@/app/profile/[address]/blueprint-tab-content";
 
-export default function ProfilePage({
-  params,
-  searchParams,
-}: {
-  params: { address: string };
-  searchParams: Record<string, string>;
+export default async function ProfilePage(props: {
+  params: Promise<{ address: string }>;
+  searchParams: Promise<Record<string, string>>;
 }) {
+  const searchParams = await props.searchParams;
+  const params = await props.params;
   const address = params.address;
   const tab = searchParams?.tab || "hypercerts-owned";
   const mainTab = tab?.split("-")[0] ?? "hypercerts";

components/copy-button.tsx

@@ -1,6 +1,8 @@
 import { Button } from "./ui/button";
 import { Copy } from "lucide-react";
 
+import type { JSX } from "react";
+
 export function CopyButton({
   textToCopy,
   ...props

components/hypercert/evaluate-drawer.tsx

@@ -41,7 +41,7 @@ function isAnySectionInvalid(state: AllEvaluationStates) {
 
 export function EvaluateDrawer({ hypercertId }: { hypercertId: string }) {
   const { toast } = useToast();
-  const tagifyRef = useRef<Tagify<Tagify.BaseTagData>>();
+  const tagifyRef = useRef<Tagify<Tagify.BaseTagData>>(undefined);
   const [chainId, contractAddress, tokenId] = hypercertId.split("-");
   const rpcSigner = useEthersSigner({ chainId: +chainId });
 

components/hypercert/hypercert-minting-form/form-steps.tsx

@@ -81,7 +81,7 @@ interface FormStepsProps {
   form: UseFormReturn<HypercertFormValues>;
   currentStep: number;
   setCurrentStep: (step: number) => void;
-  cardRef: RefObject<HTMLDivElement>;
+  cardRef: RefObject<HTMLDivElement | null>;
   reset: () => void;
   isBlueprint?: boolean;
   blueprintChainId?: number;

components/ui/calendar.tsx

@@ -1,13 +1,13 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import { ChevronLeft, ChevronRight } from "lucide-react"
-import { DayPicker } from "react-day-picker"
+import * as React from "react";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { DayPicker } from "react-day-picker";
 
-import { cn } from "@/lib/utils"
-import { buttonVariants } from "@/components/ui/button"
+import { cn } from "@/lib/utils";
+import { buttonVariants } from "@/components/ui/button";
 
-export type CalendarProps = React.ComponentProps<typeof DayPicker>
+export type CalendarProps = React.ComponentProps<typeof DayPicker>;
 
 function Calendar({
   className,
@@ -27,7 +27,7 @@ function Calendar({
         nav: "space-x-1 flex items-center",
         nav_button: cn(
           buttonVariants({ variant: "outline" }),
-          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
+          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100",
         ),
         nav_button_previous: "absolute left-1",
         nav_button_next: "absolute right-1",
@@ -39,28 +39,32 @@ function Calendar({
         cell: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
         day: cn(
           buttonVariants({ variant: "ghost" }),
-          "h-9 w-9 p-0 font-normal aria-selected:opacity-100"
+          "h-9 w-9 p-0 font-normal aria-selected:opacity-100",
         ),
         day_range_end: "day-range-end",
         day_selected:
           "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
         day_today: "bg-accent text-accent-foreground",
         day_outside:
-          "day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30",
+          "day-outside text-muted-foreground aria-selected:bg-accent/50 aria-selected:text-muted-foreground",
         day_disabled: "text-muted-foreground opacity-50",
         day_range_middle:
           "aria-selected:bg-accent aria-selected:text-accent-foreground",
         day_hidden: "invisible",
         ...classNames,
       }}
       components={{
-        IconLeft: ({ ...props }) => <ChevronLeft className="h-4 w-4" />,
-        IconRight: ({ ...props }) => <ChevronRight className="h-4 w-4" />,
+        IconLeft: ({ className, ...props }) => (
+          <ChevronLeft className={cn("h-4 w-4", className)} {...props} />
+        ),
+        IconRight: ({ className, ...props }) => (
+          <ChevronRight className={cn("h-4 w-4", className)} {...props} />
+        ),
       }}
       {...props}
     />
-  )
+  );
 }
-Calendar.displayName = "Calendar"
+Calendar.displayName = "Calendar";
 
-export { Calendar }
+export { Calendar };

package.json

@@ -19,7 +19,7 @@
     "@hypercerts-org/contracts": "2.0.0-alpha.12",
     "@hypercerts-org/marketplace-sdk": " 0.5.0-alpha.0",
     "@hypercerts-org/sdk": "2.5.0-beta.6",
-    "@next/env": "^14.2.10",
+    "@next/env": "15.1.7",
     "@openzeppelin/merkle-tree": "^1.0.6",
     "@radix-ui/react-accordion": "^1.2.3",
     "@radix-ui/react-alert-dialog": "^1.1.6",
@@ -41,9 +41,9 @@
     "@safe-global/api-kit": "^2.5.9",
     "@safe-global/protocol-kit": "^5.2.2",
     "@safe-global/types-kit": "^1.0.2",
-    "@tanstack/query-core": "^5.66.0",
-    "@tanstack/react-query": "^5.66.0",
-    "@tanstack/react-query-devtools": "4",
+    "@tanstack/query-core": "^5.66.4",
+    "@tanstack/react-query": "^5.66.9",
+    "@tanstack/react-query-devtools": "^5.66.9",
     "@tanstack/react-table": "^8.17.3",
     "@types/lodash": "^4.17.15",
     "@types/validator": "^13.12.2",
@@ -62,11 +62,11 @@
     "graphql-request": "^7.0.1",
     "html-to-image": "^1.11.11",
     "lodash": "^4.17.21",
-    "lucide-react": "^0.373.0",
-    "next": "^14.2.18",
-    "react": "^18.3.1",
+    "lucide-react": "^0.475.0",
+    "next": "15.1.7",
+    "react": "19.0.0",
     "react-day-picker": "^8.10.1",
-    "react-dom": "^18.3.1",
+    "react-dom": "19.0.0",
     "react-hook-form": "^7.51.3",
     "react-markdown": "^9.0.3",
     "react-use": "^17.5.1",
@@ -78,8 +78,8 @@
     "tailwindcss-animate": "^1.0.7",
     "use-debounce": "^10.0.4",
     "validator": "^13.12.0",
-    "vaul": "^0.9.0",
-    "viem": "^2.23.0",
+    "vaul": "^1.1.2",
+    "viem": "^2.23.4",
     "wagmi": "^2.14.11",
     "zod": "^3.23.4",
     "zustand": "^4.5.2"
@@ -90,12 +90,12 @@
     "@commitlint/config-conventional": "^19.4.1",
     "@testing-library/react": "^16.0.0",
     "@types/node": "^20",
-    "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.3.0",
+    "@types/react": "19.0.10",
+    "@types/react-dom": "19.0.4",
     "@types/yaireo__tagify": "^4.18.0",
     "@vitejs/plugin-react": "^4.3.1",
     "eslint": "^8.56.0",
-    "eslint-config-next": "14.2.3",
+    "eslint-config-next": "15.1.7",
     "eslint-config-prettier": "^9.1.0",
     "husky": "^9.1.5",
     "jsdom": "^24.1.1",
@@ -105,5 +105,11 @@
     "tailwindcss": "^3.4.1",
     "typescript": "^5.4.5",
     "vitest": "^2.0.5"
+  },
+  "pnpm": {
+    "overrides": {
+      "@types/react": "19.0.10",
+      "@types/react-dom": "19.0.4"
+    }
   }
 }