docs: update examples (#981)

* docs: update next-app-router example * docs: update next-app-router-ssr example * docs: update next-pages-router example * docs: update content-source-maps-cpa example * docs: update content-source-maps-graphql example
contentful · Dec 10, 2024 · d47d498 · d47d498
1 parent d828f4d
commit d47d498
Show file tree

Hide file tree

Showing 31 changed files with 98 additions and 153 deletions.
diff --git a/examples/content-source-maps-cpa/lib/api-rest.ts b/examples/content-source-maps-cpa/lib/api-rest.ts
@@ -1,4 +1,4 @@
-import { Entry, createClient, EntrySys } from 'contentful';
+import { createClient, EntrySys } from 'contentful';
 
 type PostFields = {
   title: string;

diff --git a/examples/content-source-maps-cpa/package.json b/examples/content-source-maps-cpa/package.json
@@ -3,29 +3,33 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev",
+    "dev": "next dev --turbopack",
     "build": "next build",
     "start": "next start",
     "lint": "next lint"
   },
   "dependencies": {
-    "@contentful/live-preview": "^4.2.2",
+    "@contentful/live-preview": "^4.6.0",
     "@types/node": "20.2.3",
     "@types/react": "18.2.7",
     "@types/react-dom": "18.2.4",
     "contentful": "^10.12.0",
-    "next": "14.2.10",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
+    "next": "15.0.4",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
     "typescript": "5.0.4"
   },
   "devDependencies": {
     "@types/leaflet": "^1.9.8",
     "@types/node": "^20",
-    "@types/react": "^18",
-    "@types/react-dom": "^18",
+    "@types/react": "19.0.1",
+    "@types/react-dom": "19.0.1",
     "eslint": "^8",
-    "eslint-config-next": "14.0.4",
+    "eslint-config-next": "15.0.4",
     "typescript": "^5"
+  },
+  "overrides": {
+    "@types/react": "19.0.1",
+    "@types/react-dom": "19.0.1"
   }
 }
diff --git a/examples/content-source-maps-graphql/app/api/disable-draft/route.ts b/examples/content-source-maps-graphql/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');
 }
diff --git a/examples/content-source-maps-graphql/app/api/enable-draft/route.ts b/examples/content-source-maps-graphql/app/api/enable-draft/route.ts
@@ -17,13 +17,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({
+  cookieStore.set({
     name: '__prerender_bypass',
     value: cookie?.value,
     httpOnly: true,

diff --git a/examples/content-source-maps-graphql/app/layout.tsx b/examples/content-source-maps-graphql/app/layout.tsx
@@ -7,12 +7,12 @@ export const metadata: Metadata = {
   description: 'Generated by create next app',
 };
 
-export default function RootLayout({
+export default async function RootLayout({
   children,
 }: Readonly<{
   children: React.ReactNode;
 }>) {
-  const { isEnabled } = draftMode();
+  const { isEnabled } = await draftMode();
 
   return (
     <ContentfulPreviewProvider

diff --git a/examples/content-source-maps-graphql/app/page.tsx b/examples/content-source-maps-graphql/app/page.tsx
@@ -2,7 +2,7 @@ import { draftMode } from 'next/headers';
 import { getAllPostsForHome } from '../lib/api-graphql';
 
 export default async function Home() {
-  const { isEnabled } = draftMode();
+  const { isEnabled } = await draftMode();
   const posts = await getAllPostsForHome(isEnabled);
 
   return (

diff --git a/examples/content-source-maps-graphql/package.json b/examples/content-source-maps-graphql/package.json
@@ -1,19 +1,23 @@
 {
   "private": true,
   "scripts": {
-    "dev": "next dev",
+    "dev": "next dev --turbopack",
     "build": "next build",
     "start": "next start"
   },
   "dependencies": {
-    "@contentful/live-preview": "^4.2.2",
+    "@contentful/live-preview": "^4.6.0",
     "@types/node": "20.2.3",
-    "@types/react": "18.2.7",
-    "@types/react-dom": "18.2.4",
+    "@types/react": "19.0.1",
+    "@types/react-dom": "19.0.1",
     "graphql-request": "^6.1.0",
-    "next": "14.2.10",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
+    "next": "15.0.4",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
     "typescript": "5.0.4"
+  },
+  "overrides": {
+    "@types/react": "19.0.1",
+    "@types/react-dom": "19.0.1"
   }
 }
diff --git a/examples/next-app-router-ssr/README.md b/examples/next-app-router-ssr/README.md
@@ -31,9 +31,10 @@ To run this project, you will need to add the following environment variables to
 
 You will need to set up a content model within your Contentful space. For this project, we need a `Post` content type with the following fields:
 
-- `slug`
-- `title`
-- `description`
+- `slug` - short text
+- `title` - short text
+- `description` - short text
+- `banner` - single media field
 
 Once you've set up the `Post` content model, you can populate it with some example entries.
 

diff --git a/examples/next-app-router-ssr/app/api/disable-draft/route.ts b/examples/next-app-router-ssr/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');
 }
diff --git a/examples/next-app-router-ssr/app/api/draft/route.ts b/examples/next-app-router-ssr/app/api/draft/route.ts
@@ -24,13 +24,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({
+  cookieStore.set({
     name: '__prerender_bypass',
     value: cookie?.value,
     httpOnly: true,

diff --git a/examples/next-app-router-ssr/app/layout.tsx b/examples/next-app-router-ssr/app/layout.tsx
@@ -10,8 +10,8 @@ export const metadata: Metadata = {
   description: 'Generated by create next app',
 };
 
-export default function RootLayout({ children }: { children: React.ReactNode }) {
-  const { isEnabled } = draftMode();
+export default async function RootLayout({ children }: { children: React.ReactNode }) {
+  const { isEnabled } = await draftMode();
 
   return (
     <html lang="en">

diff --git a/examples/next-app-router-ssr/app/page.tsx b/examples/next-app-router-ssr/app/page.tsx
@@ -8,7 +8,7 @@ export const metadata: Metadata = {
 };
 
 export default async function Home() {
-  const { isEnabled } = draftMode();
+  const { isEnabled } = await draftMode();
 
   const posts = await getAllPostsForHome(isEnabled);
 

diff --git a/examples/next-app-router-ssr/app/posts/[slug]/page.tsx b/examples/next-app-router-ssr/app/posts/[slug]/page.tsx
@@ -3,12 +3,12 @@ import { getAllPostsWithSlug, getPost } from '../../../lib/api-graphql';
 
 import PostLayout from '../../components/post-layout';
 
-export default async function Post({ params }: { params: { slug: string } }) {
-  const { isEnabled } = draftMode();
+export default async function Post(props: { params: Promise<{ slug: string }> }) {
+  const params = await props.params;
+  const { isEnabled } = await draftMode();
 
   const { post } = await getPost(params.slug, isEnabled);
 
-  console.log({ post, isEnabled });
   if (!post) {
     const formattedPost = `Post ${params.slug} not found`;
     return <h1>{formattedPost}</h1>;

diff --git a/examples/next-app-router-ssr/lib/api-graphql.ts b/examples/next-app-router-ssr/lib/api-graphql.ts
@@ -34,6 +34,7 @@ const POST_GRAPHQL_FIELDS = `
   title
   description
   banner {
+    __typename
     sys {
       id
     }
@@ -107,7 +108,6 @@ export async function getAllPostsForHome(draftMode: boolean): Promise<Post[] | u
     draftMode,
   );
 
-  console.log(entries);
   return extractPostEntries(entries);
 }
 

diff --git a/examples/next-app-router-ssr/package.json b/examples/next-app-router-ssr/package.json
@@ -9,23 +9,25 @@
     "build:next": "next build",
     "build:script": "vite build",
     "start": "next start",
-    "lint": "next lint",
-    "prepare": "relative-deps"
+    "lint": "next lint"
   },
   "dependencies": {
-    "@contentful/live-preview": "3.1.0",
-    "next": "14.2.10",
-    "react": "18.2.0",
-    "react-dom": "18.2.0"
+    "@contentful/live-preview": "^4.6.0",
+    "next": "15.0.4",
+    "react": "19.0.0",
+    "react-dom": "19.0.0"
   },
   "devDependencies": {
     "@types/node": "20.5.0",
-    "@types/react": "18.2.20",
-    "@types/react-dom": "18.2.7",
+    "@types/react": "19.0.1",
+    "@types/react-dom": "19.0.1",
     "eslint": "8.47.0",
-    "eslint-config-next": "13.4.13",
-    "relative-deps": "1.0.7",
+    "eslint-config-next": "15.0.4",
     "vite": "4.5.5",
     "typescript": "5.1.6"
+  },
+  "overrides": {
+    "@types/react": "19.0.1",
+    "@types/react-dom": "19.0.1"
   }
 }
diff --git a/examples/next-app-router/.nvmrc b/examples/next-app-router/.nvmrc
@@ -1 +1 @@
-v18.17.0
+v20.17.0
diff --git a/examples/next-app-router/README.md b/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.

diff --git a/examples/next-app-router/app/api/disable-draft/route.ts b/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');
 }
diff --git a/examples/next-app-router/app/api/enable-draft/route.ts b/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({
+  cookieStore.set({
     name: '__prerender_bypass',
     value: cookie?.value,
     httpOnly: true,

diff --git a/examples/next-app-router/app/blogs/[slug]/page.tsx b/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) {

diff --git a/examples/next-app-router/app/globals.css b/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;
-  }
-}
diff --git a/examples/next-app-router/app/page.tsx b/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 (

diff --git a/examples/next-app-router/components/article.tsx b/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>