fix(react): update nextjs peer dep and re-structure playgrounds

packages/react/package.json

@@ -43,24 +43,24 @@
     "dev": "vite build --watch",
     "build": "vite build",
     "test:types": "tsc --noEmit --skipLibCheck",
-    "test": "pnpm run test:unit:ci && pnpm run test:e2e",
+    "test": "pnpm run test:unit:ci && pnpm run test:e2e-next-13 && pnpm run test:e2e-next-latest",
     "test:unit": "vitest",
     "test:unit:ci": "vitest run",
     "test:unit:ui": "vitest --ui",
-    "test:e2e": "start-server-and-test playground:next13-app-router http://localhost:3000/ cy:run",
-    "test:e2e-watch": "start-server-and-test playground:next13-app-router http-get://localhost:3000/ cy:open",
+    "test:e2e-next-13": "start-server-and-test playground:next-13 http://localhost:3000/ cy:run",
+    "test:e2e-next-latest": "start-server-and-test playground:next-latest http://localhost:3000/ cy:run",
+    "test:e2e-watch": "start-server-and-test playground:next-latest http-get://localhost:3000/ cy:open",
     "cy:run": "cypress run",
     "cy:open": "cypress open",
     "test:comp": "cypress run --component",
     "playground": "pnpm run --filter ./playground/react dev",
-    "playground:next": "pnpm run --filter ./playground/next15 dev",
-    "playground:next13": "pnpm run --filter ./playground/next13 dev",
-    "playground:next13-app-router": "pnpm run --filter ./playground/next13-app-router dev",
+    "playground:next-latest": "pnpm run --filter ./playground/next-latest dev",
+    "playground:next-13": "pnpm run --filter ./playground/next-13-app-router dev",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix"
   },
   "peerDependencies": {
-    "next": "^13 || ^14 || ^15",
+    "next": "^13 || ^14 || ^15 || ^16",
     "react": "^17 || ^18 || ^19",
     "react-dom": "^17 || ^18 || ^19"
   },

packages/react/playground/next13-app-router/package.json → packages/react/playground/next-13-app-router/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@storyblok/playground-react-next13-app-router",
+  "name": "@storyblok/playground-next-13-app-router",
   "type": "module",
   "version": "0.1.0",
   "private": true,
@@ -13,8 +13,8 @@
     "@storyblok/react": "workspace:*"
   },
   "devDependencies": {
-    "eslint": "8.57.0",
-    "eslint-config-next": "14.2.28",
+    "eslint": "^8.57.0",
+    "eslint-config-next": "^14.2.28",
     "next": "^13.4.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

packages/react/playground/next13/package.json → packages/react/playground/next-13-pages-router/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@storyblok/playground-react-next13",
+  "name": "@storyblok/playground-next-13-pages-router",
   "type": "module",
   "version": "0.1.0",
   "private": true,

packages/react/playground/next15-static/package.json → packages/react/playground/next-latest-static/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@storyblok/playground-react-next15-static",
+  "name": "@storyblok/playground-next-latest-static",
   "version": "0.1.0",
   "private": true,
   "scripts": {
@@ -11,9 +11,9 @@
   "dependencies": {
     "@storyblok/react": "workspace:*",
     "@tailwindcss/typography": "^0.5.16",
-    "next": "15.3.2",
-    "react": "19.1.0",
-    "react-dom": "19.1.0"
+    "next": "^16.0.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4.1.10",

packages/react/playground/next15/package.json → packages/react/playground/next-latest/package.json

@@ -1,19 +1,19 @@
 {
-  "name": "@storyblok/playground-react-next15",
+  "name": "@storyblok/playground-next-latest",
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev --experimental-https",
+    "dev": "next dev",
     "build": "next build",
     "start": "next start",
     "lint": "next lint"
   },
   "dependencies": {
     "@storyblok/react": "workspace:*",
     "@tailwindcss/typography": "^0.5.16",
-    "next": "15.3.2",
-    "react": "19.1.0",
-    "react-dom": "19.1.0"
+    "next": "^16.0.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4.1.10",

packages/react/playground/next-latest/src/app/components/StoryblokProvider.tsx

@@ -0,0 +1,8 @@
+"use client";
+
+import { getStoryblokApi } from "@/lib/storyblok";
+
+export default function StoryblokProvider({ children }) {
+  getStoryblokApi();
+  return children;
+}

packages/react/playground/next15/src/app/components/Teaser.tsx → packages/react/playground/next-latest/src/app/components/Teaser.tsx

@@ -1,9 +1,6 @@
 import { storyblokEditable } from '@storyblok/react/rsc';
-import { headers } from 'next/headers';
 
 const Teaser = ({ blok }) => {
-  // Although we are not using the headers here, we need to call it to test that server only components are working.
-  headers();
   return (
     <h2 data-cy="teaser" {...storyblokEditable(blok)}>
       {blok.headline}

packages/react/playground/next15/src/app/layout.tsx → packages/react/playground/next-latest/src/app/layout.tsx

@@ -1,3 +1,4 @@
+import StoryblokProvider from '@/app/components/StoryblokProvider';
 import './globals.css';
 
 export const metadata = {
@@ -10,8 +11,10 @@ interface RootLayoutType {
 
 export default function RootLayout({ children }: RootLayoutType) {
   return (
-    <html lang="en">
-      <body>{children}</body>
-    </html>
+    <StoryblokProvider>
+      <html lang="en">
+        <body>{children}</body>
+      </html>
+    </StoryblokProvider>
   );
 }

packages/react/playground/next15/src/app/page.tsx → packages/react/playground/next-latest/src/app/page.tsx

@@ -13,16 +13,14 @@ export default async function Home() {
           Storyblok Next.js 15 Example
         </h1>
 
-        { // TODO: Enable for https://github.com/storyblok/monoblok/issues/35
-          <nav className="space-y-4">
-            <Link
-              href="/richtext"
-              className="block p-4 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors"
-            >
-              Go to Rich Text Example
-            </Link>
-          </nav>
-        }
+        <nav className="space-y-4">
+          <Link
+            href="/react/richtext"
+            className="block p-4 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors"
+          >
+            Go to Rich Text Example
+          </Link>
+        </nav>
 
         {data.story && (
           <div>

packages/react/playground/next15/tsconfig.json → packages/react/playground/next-latest/tsconfig.json

@@ -2,12 +2,18 @@
   "compilerOptions": {
     "incremental": true,
     "target": "ES2017",
-    "jsx": "preserve",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "jsx": "react-jsx",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "module": "esnext",
     "moduleResolution": "bundler",
     "paths": {
-      "@/*": ["./src/*"]
+      "@/*": [
+        "./src/*"
+      ]
     },
     "resolveJsonModule": true,
     "allowJs": true,
@@ -22,6 +28,14 @@
       }
     ]
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-  "exclude": ["node_modules"]
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
 }