fix(deps): update nextjs monorepo to v15 (major) (#1844)

packages/api/package.json

@@ -8,7 +8,8 @@
     ".": "./src/index.ts",
     "./client": "./src/client.ts",
     "./server": "./src/server.ts",
-    "./websocket": "./src/websocket.ts"
+    "./websocket": "./src/websocket.ts",
+    "./shared": "./src/shared.ts"
   },
   "main": "./index.ts",
   "types": "./index.ts",
@@ -42,8 +43,9 @@
     "@trpc/server": "next",
     "dockerode": "^4.0.3",
     "lodash.clonedeep": "^4.5.0",
-    "next": "^14.2.22",
-    "react": "^19.0.0",
+    "next": "15.1.3",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
     "superjson": "2.2.2",
     "trpc-to-openapi": "^2.1.1"
   },

packages/api/src/client.ts

@@ -1,7 +1,10 @@
+"use client";
+
 import { createTRPCClient, createTRPCReact, httpLink } from "@trpc/react-query";
 import SuperJSON from "superjson";
 
 import type { AppRouter } from ".";
+import { createHeadersCallbackForSource } from "./shared";
 
 export const clientApi = createTRPCReact<AppRouter>();
 export const fetchApi = createTRPCClient<AppRouter>({
@@ -26,42 +29,3 @@ function getBaseUrl() {
 export function getTrpcUrl() {
   return `${getBaseUrl()}/api/trpc`;
 }
-
-/**
- * Creates a headers callback for a given source
- * It will set the x-trpc-source header and cookies if needed
- * @param source trpc source request comes from
- * @returns headers callback
- */
-export function createHeadersCallbackForSource(source: string) {
-  return async () => {
-    const headers = new Headers();
-    headers.set("x-trpc-source", source);
-
-    const cookies = await importCookiesAsync();
-    // We need to set cookie for ssr requests (for example with useSuspenseQuery or middleware)
-    if (cookies) {
-      headers.set("cookie", cookies);
-    }
-
-    return headers;
-  };
-}
-
-/**
- * This is a workarround as cookies are not passed to the server
- * when using useSuspenseQuery or middleware
- * @returns cookie string on server or null on client
- */
-async function importCookiesAsync() {
-  if (typeof window === "undefined") {
-    return await import("next/headers").then(({ cookies }) =>
-      cookies()
-        .getAll()
-        .map(({ name, value }) => `${name}=${value}`)
-        .join(";"),
-    );
-  }
-
-  return null;
-}

packages/api/src/server.ts

@@ -9,7 +9,7 @@ import { auth } from "@homarr/auth/next";
  * handling a tRPC call from a React Server Component.
  */
 const createContext = cache(async () => {
-  const heads = new Headers(headers());
+  const heads = new Headers(await headers());
   heads.set("x-trpc-source", "rsc");
 
   return createTRPCContext({

packages/api/src/shared.ts

@@ -0,0 +1,38 @@
+/**
+ * Creates a headers callback for a given source
+ * It will set the x-trpc-source header and cookies if needed
+ * @param source trpc source request comes from
+ * @returns headers callback
+ */
+export function createHeadersCallbackForSource(source: string) {
+  return async () => {
+    const headers = new Headers();
+    headers.set("x-trpc-source", source);
+
+    const cookies = await importCookiesAsync();
+    // We need to set cookie for ssr requests (for example with useSuspenseQuery or middleware)
+    if (cookies) {
+      headers.set("cookie", cookies);
+    }
+
+    return headers;
+  };
+}
+
+/**
+ * This is a workarround as cookies are not passed to the server
+ * when using useSuspenseQuery or middleware
+ * @returns cookie string on server or null on client
+ */
+async function importCookiesAsync() {
+  if (typeof window !== "undefined") {
+    return null;
+  }
+
+  const { cookies } = await import("next/headers");
+
+  return (await cookies())
+    .getAll()
+    .map(({ name, value }) => `${name}=${value}`)
+    .join(";");
+}

packages/auth/configuration.ts

@@ -74,7 +74,7 @@ export const createConfiguration = (
           userId: user.id,
         });
 
-        cookies().set(sessionTokenCookieName, sessionToken, {
+        (await cookies()).set(sessionTokenCookieName, sessionToken, {
           path: "/",
           expires: expires,
           httpOnly: true,
@@ -99,8 +99,9 @@ export const createConfiguration = (
       error: "/auth/login",
     },
     jwt: {
-      encode() {
-        const cookie = cookies().get(sessionTokenCookieName)?.value;
+      // eslint-disable-next-line no-restricted-syntax
+      async encode() {
+        const cookie = (await cookies()).get(sessionTokenCookieName)?.value;
         return cookie ?? "";
       },
 

packages/auth/events.ts

@@ -54,7 +54,7 @@ export const createSignInEventHandler = (db: Database): Exclude<NextAuthConfig["
     logger.info(`User '${dbUser.name}' logged in at ${dayjs().format()}`);
 
     // We use a cookie as localStorage is not shared with server (otherwise flickering would occur)
-    cookies().set(colorSchemeCookieKey, dbUser.colorScheme, {
+    (await cookies()).set(colorSchemeCookieKey, dbUser.colorScheme, {
       path: "/",
       expires: dayjs().add(1, "year").toDate(),
     });

packages/auth/index.ts

@@ -20,7 +20,7 @@ declare module "next-auth" {
 export * from "./security";
 
 // See why it's unknown in the [...nextauth]/route.ts file
-export const createHandlers = (provider: SupportedAuthProvider | "unknown", useSecureCookies: boolean) =>
-  createConfiguration(provider, headers(), useSecureCookies);
+export const createHandlersAsync = async (provider: SupportedAuthProvider | "unknown", useSecureCookies: boolean) =>
+  createConfiguration(provider, await headers(), useSecureCookies);
 
 export { getSessionFromTokenAsync as getSessionFromToken, sessionTokenCookieName } from "./session";

packages/auth/package.json

@@ -34,10 +34,10 @@
     "bcrypt": "^5.1.1",
     "cookies": "^0.9.1",
     "ldapts": "7.3.0",
-    "next": "^14.2.22",
+    "next": "15.1.3",
     "next-auth": "5.0.0-beta.25",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react": "19.0.0",
+    "react-dom": "19.0.0"
   },
   "devDependencies": {
     "@homarr/eslint-config": "workspace:^0.2.0",

packages/auth/test/events.spec.ts

@@ -29,7 +29,7 @@ vi.mock("next/headers", async (importOriginal) => {
 
   vi.spyOn(result, "set");
 
-  const cookies = () => result;
+  const cookies = () => Promise.resolve(result);
 
   return { ...mod, cookies } satisfies HeadersExport;
 });
@@ -238,7 +238,7 @@ describe("createSignInEventHandler should create signInEventHandler", () => {
     });
 
     // Assert
-    expect(cookies().set).toHaveBeenCalledWith(
+    expect((await cookies()).set).toHaveBeenCalledWith(
       colorSchemeCookieKey,
       "dark",
       expect.objectContaining({

packages/common/package.json

@@ -28,8 +28,9 @@
   "dependencies": {
     "@homarr/log": "workspace:^0.1.0",
     "dayjs": "^1.11.13",
-    "next": "^14.2.22",
-    "react": "^19.0.0"
+    "next": "15.1.3",
+    "react": "19.0.0",
+    "react-dom": "19.0.0"
   },
   "devDependencies": {
     "@homarr/eslint-config": "workspace:^0.2.0",

packages/modals-collection/package.json

@@ -35,8 +35,9 @@
     "@mantine/core": "^7.15.2",
     "@tabler/icons-react": "^3.26.0",
     "dayjs": "^1.11.13",
-    "next": "^14.2.22",
-    "react": "^19.0.0"
+    "next": "15.1.3",
+    "react": "19.0.0",
+    "react-dom": "19.0.0"
   },
   "devDependencies": {
     "@homarr/eslint-config": "workspace:^0.2.0",

packages/modals/package.json

@@ -26,7 +26,7 @@
     "@homarr/ui": "workspace:^0.1.0",
     "@mantine/core": "^7.15.2",
     "@mantine/hooks": "^7.15.2",
-    "react": "^19.0.0"
+    "react": "19.0.0"
   },
   "devDependencies": {
     "@homarr/eslint-config": "workspace:^0.2.0",

packages/old-import/package.json

@@ -40,8 +40,9 @@
     "@mantine/core": "^7.15.2",
     "@mantine/hooks": "^7.15.2",
     "adm-zip": "0.5.16",
-    "next": "^14.2.22",
-    "react": "^19.0.0",
+    "next": "15.1.3",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
     "superjson": "2.2.2",
     "zod": "^3.24.1",
     "zod-form-data": "^2.0.5"

packages/spotlight/package.json

@@ -37,8 +37,9 @@
     "@mantine/spotlight": "^7.15.2",
     "@tabler/icons-react": "^3.26.0",
     "jotai": "^2.11.0",
-    "next": "^14.2.22",
-    "react": "^19.0.0",
+    "next": "15.1.3",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
     "use-deep-compare-effect": "^1.8.1"
   },
   "devDependencies": {

packages/translation/package.json

@@ -32,9 +32,10 @@
     "dayjs": "^1.11.13",
     "deepmerge": "4.3.1",
     "mantine-react-table": "2.0.0-beta.7",
-    "next": "^14.2.22",
+    "next": "15.1.3",
     "next-intl": "3.26.3",
-    "react": "^19.0.0"
+    "react": "19.0.0",
+    "react-dom": "19.0.0"
   },
   "devDependencies": {
     "@homarr/eslint-config": "workspace:^0.2.0",

packages/ui/package.json

@@ -34,8 +34,9 @@
     "@mantine/hooks": "^7.15.2",
     "@tabler/icons-react": "^3.26.0",
     "mantine-react-table": "2.0.0-beta.7",
-    "next": "^14.2.22",
-    "react": "^19.0.0"
+    "next": "15.1.3",
+    "react": "19.0.0",
+    "react-dom": "19.0.0"
   },
   "devDependencies": {
     "@homarr/eslint-config": "workspace:^0.2.0",

packages/widgets/package.json

@@ -62,8 +62,9 @@
     "clsx": "^2.1.1",
     "dayjs": "^1.11.13",
     "mantine-react-table": "2.0.0-beta.7",
-    "next": "^14.2.22",
-    "react": "^19.0.0",
+    "next": "15.1.3",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
     "video.js": "^8.21.0"
   },
   "devDependencies": {

packages/widgets/src/notebook/component.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import dynamic from "next/dynamic";
 
 import "@mantine/tiptap/styles.css";