feat: update next

apps/storyblok/package.json

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev --port=4050 --experimental-https",
+    "dev": "next dev --turbo --port=4050 --experimental-https",
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
@@ -16,9 +16,9 @@
   "dependencies": {
     "@shared/ui": "workspace:*",
     "@storyblok/react": "^3.0.10",
-    "next": ">=14.1.1",
-    "react": "^18",
-    "react-dom": "^18",
+    "next": "15.1.0",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
     "storyblok-rich-text-react-renderer": "^2.9.1"
   },
   "devDependencies": {
@@ -27,17 +27,23 @@
     "@shared/ts-config": "workspace:*",
     "@tailwindcss/typography": "^0.5.10",
     "@types/node": "^20",
-    "@types/react": "^18",
-    "@types/react-dom": "^18",
+    "@types/react": "19.0.1",
+    "@types/react-dom": "19.0.1",
     "autoprefixer": "^10.0.1",
     "eslint": "^8",
-    "eslint-config-next": "14.1.0",
+    "eslint-config-next": "15.0.4",
     "postcss": "^8",
     "prettier": "^3.2.5",
     "prettier-plugin-tailwindcss": "^0.5.14",
     "storyblok": "^3.34.0",
     "storyblok-backup": "^0.3.0",
     "tailwindcss": "^3.4.3",
     "typescript": "5.4.5"
+  },
+  "pnpm": {
+    "overrides": {
+      "@types/react": "19.0.1",
+      "@types/react-dom": "19.0.1"
+    }
   }
 }

apps/storyblok/src/app/[[...slug]]/page.tsx

@@ -1,29 +1,28 @@
 import type { Metadata } from "next";
+import { draftMode } from "next/headers";
 import { notFound } from "next/navigation";
 import { StoryblokStory } from "@storyblok/react/rsc";
 
-import {
-  checkDraftModeToken,
-  fetchAllPages,
-  fetchStoryBySlug,
-  getMetaData,
-} from "@/lib/api";
+import { fetchAllPages, fetchStoryBySlug, getMetaData } from "@/lib/api";
 import CoreLayout from "@/components/CoreLayout";
 
-const isDraftModeEnv = process.env.NEXT_PUBLIC_IS_PREVIEW === "true";
-export const dynamic = isDraftModeEnv ? "force-dynamic" : "force-static";
+// export const fetchCache = "default-cache";
+// export const dynamicParams = true;
+// export const dynamic = "force-static";
 
 type Props = {
-  params: { slug?: string[] };
-  searchParams: { [key: string]: string | string[] | undefined };
+  params: Promise<{ slug?: string[] }>;
+  searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
 };
 
-export async function generateMetadata({ params }: Props): Promise<Metadata> {
+export async function generateMetadata(props: Props): Promise<Metadata> {
+  const params = await props.params;
+
   return await getMetaData(params.slug);
 }
 
 export async function generateStaticParams() {
-  if (isDraftModeEnv) return [];
+  return [];
 
   const pages = await fetchAllPages();
 
@@ -38,13 +37,13 @@ export async function generateStaticParams() {
   return paths;
 }
 
-export default async function Home({ params, searchParams }: Props) {
-  const isDraftModeEnabled = await checkDraftModeToken(searchParams);
+export default async function Home(props: Props) {
+  const params = await props.params;
+  const { isEnabled } = await draftMode();
 
-  const { story, links } = await fetchStoryBySlug(
-    isDraftModeEnabled,
-    params.slug,
-  );
+  console.log("draft mode: ", isEnabled);
+
+  const { story, links } = await fetchStoryBySlug(isEnabled, params.slug);
 
   if (!story) {
     notFound();

apps/storyblok/src/app/api/draft/route.ts

@@ -0,0 +1,34 @@
+import crypto from "crypto";
+import { draftMode } from "next/headers";
+import { redirect } from "next/navigation";
+
+export async function GET(request: Request) {
+  const { searchParams, origin } = new URL(request.url);
+  const space_id = searchParams.get("_storyblok_tk[space_id]");
+  const timestamp = searchParams.get("_storyblok_tk[timestamp]");
+  const token = searchParams.get("_storyblok_tk[token]");
+  const slug = searchParams.get("slug");
+
+  const validationString =
+    space_id + ":" + process.env.SB_PREVIEW_TOKEN + ":" + timestamp;
+
+  const validationToken = crypto
+    .createHash("sha1")
+    .update(validationString)
+    .digest("hex");
+
+  if (
+    token == validationToken &&
+    Number(timestamp) > Math.floor(Date.now() / 1000) - 3600
+  ) {
+    (await draftMode()).enable();
+
+    console.log("🔥 draft mode enabled");
+
+    redirect(`${origin}/${slug}`);
+  }
+
+  console.log("❌ draft mode is NOT enabled, invalid token");
+
+  return new Response("Draft mode is NOT enabled, invalid token");
+}

apps/storyblok/src/components/DataContext/index.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { createContext, useContext } from "react";
+import { createContext, use } from "react";
 
 import type { IDataContextProviderProps, IDataContextValues } from "./types";
 
@@ -15,17 +15,19 @@ export function DataContextProvider({
   globalComponentsStories,
 }: IDataContextProviderProps) {
   return (
-    <DataContext.Provider
+    // @ts-ignore
+    <DataContext
       value={{
         allResolvedLinks,
         globalComponentsStories,
       }}
     >
+      {/* @ts-ignore */}
       {children}
-    </DataContext.Provider>
+    </DataContext>
   );
 }
 
 export const useDataContext = () => {
-  return useContext(DataContext);
+  return use(DataContext);
 };

apps/storyblok/src/lib/api.ts

@@ -73,8 +73,6 @@ export async function fetchStoryBySlug(
     `${API_GATE}/stories/${slug?.join("/") || ""}?${searchParams.toString()}`,
   ).then((res) => res.json());
 
-  console.log("links length: ", links.length);
-
   return {
     story,
     links,
@@ -155,25 +153,6 @@ export async function fetchStoriesByParams(
   }
 }
 
-// Check if the draft mode token is valid
-export async function checkDraftModeToken(searchParams: {
-  [key: string]: string | string[] | undefined;
-}) {
-  if (isDevMode) return true;
-
-  let isDraftModeEnabled = process.env.NEXT_PUBLIC_IS_PREVIEW === "true";
-
-  if (isDraftModeEnabled && process.env.NODE_ENV !== "development") {
-    isDraftModeEnabled = await fetch(
-      `${process.env.NEXT_PUBLIC_DOMAIN}/api/checkToken?space_id=${searchParams?.["_storyblok_tk[space_id]"]}&timestamp=${searchParams?.["_storyblok_tk[timestamp]"]}&token=${searchParams?.["_storyblok_tk[token]"]}`,
-    )
-      .then((res) => res.json())
-      .then((res) => res.result);
-  }
-
-  return isDraftModeEnabled;
-}
-
 export async function getMetaData(slug?: string[]): Promise<Metadata> {
   const isDraftModeEnabled = isDraftModeEnv;
 

packages/tailwind-config/lib/plugin.ts

@@ -20,8 +20,8 @@ export const customPlugin = plugin(
         typography: {
           DEFAULT: {
             css: {
-              "--tw-prose-headings": `var("--text")`,
-              "--tw-prose-invert-headings": `var("--text")`,
+              "--tw-prose-headings": `var(--text)`,
+              "--tw-prose-invert-headings": `var(--text)`,
             },
           },
         },

packages/ui/components/sections/carousel/index.tsx

@@ -103,20 +103,22 @@ export function Carousel({
       />
 
       <GenericCarousel
-        slides={slides.map((slide) => ({
-          children: (({
-            isNext,
-            isActive,
-          }: {
-            isNext: boolean;
-            isActive: boolean;
-          }) => (
-            <CarouselCard
-              {...slide}
-              isActive={effect === "coverflow" ? isNext : isActive}
-            />
-          )) as unknown as React.ReactNode,
-        }))}
+        slides={
+          slides.map((slide) => ({
+            children: (({
+              isNext,
+              isActive,
+            }: {
+              isNext: boolean;
+              isActive: boolean;
+            }) => (
+              <CarouselCard
+                {...slide}
+                isActive={effect === "coverflow" ? isNext : isActive}
+              />
+            )) as unknown as React.ReactNode,
+          })) as any
+        }
         customModules={[
           Navigation,
           ...(customModules || []),

packages/ui/package.json

@@ -35,7 +35,7 @@
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-switch": "^1.1.1",
     "@radix-ui/react-toast": "^1.1.5",
-    "@react-three/fiber": "^8.17.10",
+    "@react-three/fiber": "9.0.0-alpha.8",
     "@tanstack/react-table": "^8.17.3",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",