migrate to next 15 and react 19

src/api/cookies.ts

@@ -1,7 +1,8 @@
 import { cookies } from "next/headers";
 
-export function authCookieHeader() {
-    const sessionId = cookies().get("session")?.value ?? null;
+export async function authCookieHeader() {
+    const allCookies = await cookies();
+    const sessionId = allCookies.get("session")?.value ?? null;
     return {
         headers: {
             Cookie: `session=${sessionId}`

src/app/[orgId]/layout.tsx

@@ -40,23 +40,28 @@ const topNavItems = [
 
 interface ConfigurationLaytoutProps {
     children: React.ReactNode;
-    params: { orgId: string };
+    params: Promise<{ orgId: string }>;
 }
 
-export default async function ConfigurationLaytout({
-    children,
-    params,
-}: ConfigurationLaytoutProps) {
+export default async function ConfigurationLaytout(
+    props: ConfigurationLaytoutProps
+) {
+    const params = await props.params;
+
+    const { children } = props;
+
     const user = await verifySession();
 
     if (!user) {
         redirect("/auth/login");
     }
 
+    const cookie = await authCookieHeader();
+
     try {
         await internal.get<AxiosResponse<GetOrgResponse>>(
             `/org/${params.orgId}`,
-            authCookieHeader(),
+            cookie
         );
     } catch {
         redirect(`/`);
@@ -66,7 +71,7 @@ export default async function ConfigurationLaytout({
     try {
         const res = await internal.get<AxiosResponse<ListOrgsResponse>>(
             `/orgs`,
-            authCookieHeader(),
+            cookie
         );
         if (res && res.data.data.orgs) {
             orgs = res.data.data.orgs;

src/app/[orgId]/page.tsx

@@ -1,10 +1,11 @@
 import { redirect } from "next/navigation";
 
 type OrgPageProps = {
-    params: { orgId: string };
+    params: Promise<{ orgId: string }>;
 };
 
-export default async function Page({ params }: OrgPageProps) {
+export default async function Page(props: OrgPageProps) {
+    const params = await props.params;
     redirect(`/${params.orgId}/sites`);
 
     return <></>;

src/app/[orgId]/resources/[resourceId]/layout.tsx

@@ -22,20 +22,23 @@ export const metadata: Metadata = {
 
 interface SettingsLayoutProps {
     children: React.ReactNode;
-    params: { resourceId: string; orgId: string };
+    params: Promise<{ resourceId: string; orgId: string }>;
 }
 
-export default async function SettingsLayout({
-    children,
-    params,
-}: SettingsLayoutProps) {
+export default async function SettingsLayout(props: SettingsLayoutProps) {
+    const params = await props.params;
+
+    const {
+        children
+    } = props;
+
     let resource = null;
 
     if (params.resourceId !== "create") {
         try {
             const res = await internal.get<AxiosResponse<GetResourceResponse>>(
                 `/resource/${params.resourceId}`,
-                authCookieHeader(),
+                await authCookieHeader(),
             );
             resource = res.data.data;
         } catch {

src/app/[orgId]/resources/[resourceId]/page.tsx

@@ -3,11 +3,12 @@ import { Separator } from "@/components/ui/separator";
 import { CreateResourceForm } from "./components/CreateResource";
 import { GeneralForm } from "./components/GeneralForm";
 
-export default function SettingsPage({
-    params,
-}: {
-    params: { resourceId: string };
-}) {
+export default async function SettingsPage(
+    props: {
+        params: Promise<{ resourceId: string }>;
+    }
+) {
+    const params = await props.params;
     const isCreate = params.resourceId === "create";
 
     return (

src/app/[orgId]/resources/[resourceId]/targets/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { useEffect, useState, use } from "react";
 import { PlusCircle, Trash2, Server, Globe, Cpu } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
@@ -25,11 +25,12 @@ const isValidIPAddress = (ip: string) => {
     return ipv4Regex.test(ip);
 };
 
-export default function ReverseProxyTargets({
-    params,
-}: {
-    params: { resourceId: string };
-}) {
+export default function ReverseProxyTargets(
+    props: {
+        params: Promise<{ resourceId: string }>;
+    }
+) {
+    const params = use(props.params);
     const [targets, setTargets] = useState<ListTargetsResponse["targets"]>([]);
     const [nextId, setNextId] = useState(1);
     const [ipError, setIpError] = useState("");

src/app/[orgId]/resources/page.tsx

@@ -5,15 +5,16 @@ import { AxiosResponse } from "axios";
 import { ListResourcesResponse } from "@server/routers/resource";
 
 type ResourcesPageProps = {
-    params: { orgId: string };
+    params: Promise<{ orgId: string }>;
 };
 
-export default async function Page({ params }: ResourcesPageProps) {
+export default async function Page(props: ResourcesPageProps) {
+    const params = await props.params;
     let resources: ListResourcesResponse["resources"] = [];
     try {
         const res = await internal.get<AxiosResponse<ListResourcesResponse>>(
             `/org/${params.orgId}/resources`,
-            authCookieHeader(),
+            await authCookieHeader(),
         );
         resources = res.data.data.resources;
     } catch (e) {

src/app/[orgId]/sites/[niceId]/layout.tsx

@@ -22,20 +22,23 @@ import { ClientLayout } from "./components/ClientLayout";
 
 interface SettingsLayoutProps {
     children: React.ReactNode;
-    params: { niceId: string; orgId: string };
+    params: Promise<{ niceId: string; orgId: string }>;
 }
 
-export default async function SettingsLayout({
-    children,
-    params,
-}: SettingsLayoutProps) {
+export default async function SettingsLayout(props: SettingsLayoutProps) {
+    const params = await props.params;
+
+    const {
+        children
+    } = props;
+
     let site = null;
 
     if (params.niceId !== "create") {
         try {
             const res = await internal.get<AxiosResponse<GetSiteResponse>>(
                 `/org/${params.orgId}/site/${params.niceId}`,
-                authCookieHeader(),
+                await authCookieHeader(),
             );
             site = res.data.data;
         } catch {

src/app/[orgId]/sites/[niceId]/page.tsx

@@ -3,11 +3,12 @@ import { Separator } from "@/components/ui/separator";
 import { CreateSiteForm } from "./components/CreateSite";
 import { GeneralForm } from "./components/GeneralForm";
 
-export default function SettingsPage({
-    params,
-}: {
-    params: { niceId: string };
-}) {
+export default async function SettingsPage(
+    props: {
+        params: Promise<{ niceId: string }>;
+    }
+) {
+    const params = await props.params;
     const isCreate = params.niceId === "create";
 
     return (

src/app/[orgId]/sites/page.tsx

@@ -5,15 +5,16 @@ import { AxiosResponse } from "axios";
 import SitesTable, { SiteRow } from "./components/SitesTable";
 
 type SitesPageProps = {
-    params: { orgId: string };
+    params: Promise<{ orgId: string }>;
 };
 
-export default async function Page({ params }: SitesPageProps) {
+export default async function Page(props: SitesPageProps) {
+    const params = await props.params;
     let sites: ListSitesResponse["sites"] = [];
     try {
         const res = await internal.get<AxiosResponse<ListSitesResponse>>(
             `/org/${params.orgId}/sites`,
-            authCookieHeader(),
+            await authCookieHeader(),
         );
         sites = res.data.data.sites;
     } catch (e) {

src/app/auth/login/page.tsx

@@ -3,11 +3,12 @@ import { verifySession } from "@app/lib/auth/verifySession";
 import Link from "next/link";
 import { redirect } from "next/navigation";
 
-export default async function Page({
-    searchParams,
-}: {
-    searchParams: { [key: string]: string | string[] | undefined };
-}) {
+export default async function Page(
+    props: {
+        searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
+    }
+) {
+    const searchParams = await props.searchParams;
     const user = await verifySession();
 
     if (user) {

src/app/auth/signup/page.tsx

@@ -3,11 +3,12 @@ import { verifySession } from "@app/lib/auth/verifySession";
 import Link from "next/link";
 import { redirect } from "next/navigation";
 
-export default async function Page({
-    searchParams,
-}: {
-    searchParams: { [key: string]: string | string[] | undefined };
-}) {
+export default async function Page(
+    props: {
+        searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
+    }
+) {
+    const searchParams = await props.searchParams;
     const user = await verifySession();
 
     if (user) {

src/app/auth/verify-email/page.tsx

@@ -2,11 +2,12 @@ import VerifyEmailForm from "@app/app/auth/verify-email/VerifyEmailForm";
 import { verifySession } from "@app/lib/auth/verifySession";
 import { redirect } from "next/navigation";
 
-export default async function Page({
-    searchParams,
-}: {
-    searchParams: { [key: string]: string | string[] | undefined };
-}) {
+export default async function Page(
+    props: {
+        searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
+    }
+) {
+    const searchParams = await props.searchParams;
     const user = await verifySession();
 
     if (!user) {

src/app/layout.tsx

@@ -29,7 +29,7 @@ export default async function RootLayout({
         try {
             const res = await internal.get<AxiosResponse<ListOrgsResponse>>(
                 `/orgs`,
-                authCookieHeader(),
+                await authCookieHeader(),
             );
             if (res && res.data.data.orgs) {
                 orgs = res.data.data.orgs;

src/app/page.tsx

@@ -20,7 +20,7 @@ export default async function Page() {
     try {
         const res = await internal.get<AxiosResponse<ListOrgsResponse>>(
             `/orgs`,
-            authCookieHeader(),
+            await authCookieHeader(),
         );
         if (res && res.data.data.orgs) {
             orgs = res.data.data.orgs;

src/lib/auth/verifySession.ts

@@ -2,13 +2,13 @@ import { internal } from "@app/api";
 import { authCookieHeader } from "@app/api/cookies";
 import { GetUserResponse } from "@server/routers/user";
 import { AxiosResponse } from "axios";
-import { cookies } from "next/headers";
 
 export async function verifySession(): Promise<GetUserResponse | null> {
-    const sessionId = cookies().get("session")?.value ?? null;
-
     try {
-        const res = await internal.get<AxiosResponse<GetUserResponse>>("/user", authCookieHeader());
+        const res = await internal.get<AxiosResponse<GetUserResponse>>(
+            "/user",
+            await authCookieHeader()
+        );
 
         return res.data.data;
     } catch {