docs: update next-app-router example

Author: YvesRijckaert

examples/next-app-router/.nvmrc

@@ -1 +1 @@
-v18.17.0
+v20.17.0

examples/next-app-router/README.md

@@ -88,7 +88,7 @@ Next, add these fields (you don't have to modify the settings unless specified):
 - `details` - **Rich text** field
 - `date` - **Date and time** field
 - `author` - **Text** field (type **short text**)
-- `category` - **Text** field (type **short text**)
+- `categoryName` - **Text** field (type **short text**)
 - `heroImage` - **Media** field (type **one file**)
 
 Save the content type and continue.

examples/next-app-router/app/api/disable-draft/route.ts

@@ -1,6 +1,6 @@
 import { draftMode } from 'next/headers';
 
 export async function GET(request: Request) {
-  draftMode().disable();
+  (await draftMode()).disable();
   return new Response('Draft mode is disabled');
 }

examples/next-app-router/app/api/enable-draft/route.ts

@@ -27,13 +27,13 @@ export async function GET(request: Request) {
   }
 
   // Enable Draft Mode by setting the cookie
-  draftMode().enable();
+  (await draftMode()).enable();
 
   // Override cookie header for draft mode for usage in live-preview
   // https://github.com/vercel/next.js/issues/49927
-  const cookieStore = cookies();
+  const cookieStore = await cookies();
   const cookie = cookieStore.get('__prerender_bypass')!;
-  cookies().set({
+  (await cookies()).set({
     name: '__prerender_bypass',
     value: cookie?.value,
     httpOnly: true,

examples/next-app-router/app/blogs/[slug]/page.tsx

@@ -13,8 +13,9 @@ export async function generateStaticParams() {
   }));
 }
 
-export default async function BlogPage({ params }: { params: { slug: string } }) {
-  const { isEnabled } = draftMode();
+export default async function BlogPage(props: { params: Promise<{ slug: string }> }) {
+  const params = await props.params;
+  const { isEnabled } = await draftMode();
   const blog = await getBlog(params.slug, isEnabled);
 
   if (!blog) {

examples/next-app-router/app/globals.css

@@ -1,25 +1,3 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
-:root {
-  --foreground-rgb: 0, 0, 0;
-  --background-start-rgb: 214, 219, 220;
-  --background-end-rgb: 255, 255, 255;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --foreground-rgb: 255, 255, 255;
-  }
-}
-
-body {
-  color: rgb(var(--foreground-rgb));
-}
-
-@layer utilities {
-  .text-balance {
-    text-wrap: balance;
-  }
-}

examples/next-app-router/app/page.tsx

@@ -4,7 +4,7 @@ import Image from 'next/image';
 import Link from 'next/link';
 
 export default async function Home() {
-  const { isEnabled } = draftMode();
+  const { isEnabled } = await draftMode();
   const blogs = await getAllBlogs(3, isEnabled);
 
   return (

examples/next-app-router/components/article.tsx

@@ -5,7 +5,6 @@
 */
 'use client';
 
-import { documentToReactComponents } from '@contentful/rich-text-react-renderer';
 import Image from 'next/image';
 import {
   useContentfulInspectorMode,
@@ -56,16 +55,6 @@ export const Blog = ({ blog }: { blog: BlogProps }) => {
                 fieldId: 'file',
               })}
             />
-            <div className="space-y-4 md:space-y-6">
-              <div className="space-y-2">
-                <div
-                  className="max-w-[900px] text-zinc-500 md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed dark:text-zinc-400"
-                  {...inspectorProps({ fieldId: 'details' })}
-                >
-                  {documentToReactComponents(updatedBlog.details.json)}
-                </div>
-              </div>
-            </div>
           </div>
         </div>
       </section>

examples/next-app-router/package.json

@@ -2,29 +2,32 @@
   "name": "contentful-app-router",
   "version": "0.1.0",
   "scripts": {
-    "dev": "next dev",
+    "dev": "next dev --turbopack",
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
     "setup": "node ./lib/contentful/setup.js"
   },
   "dependencies": {
-    "@contentful/live-preview": "^3.1.0",
-    "@contentful/rich-text-react-renderer": "^15.19.4",
-    "next": "14.2.10",
-    "react": "^18",
-    "react-dom": "^18"
+    "@contentful/live-preview": "^4.5.17",
+    "next": "15.0.4",
+    "react": "19.0.0",
+    "react-dom": "19.0.0"
   },
   "devDependencies": {
     "@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",
     "contentful-import": "^9.4.38",
     "eslint": "^8",
-    "eslint-config-next": "14.1.0",
+    "eslint-config-next": "15.0.4",
     "postcss": "^8",
     "tailwindcss": "^3.3.0",
     "typescript": "^5"
+  },
+  "overrides": {
+    "@types/react": "19.0.1",
+    "@types/react-dom": "19.0.1"
   }
 }

examples/next-app-router/tsconfig.json

@@ -19,7 +19,8 @@
     ],
     "paths": {
       "@/*": ["./*"]
-    }
+    },
+    "target": "ES2017"
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
   "exclude": ["node_modules"]