From 763d0ea02d92b115fda2c911fe044f09493cbc3d Mon Sep 17 00:00:00 2001 From: Yves Rijckaert Date: Mon, 9 Dec 2024 14:25:40 +0100 Subject: [PATCH 1/5] docs: update next-app-router example --- examples/next-app-router/.nvmrc | 2 +- examples/next-app-router/README.md | 2 +- .../app/api/disable-draft/route.ts | 2 +- .../app/api/enable-draft/route.ts | 6 ++--- .../next-app-router/app/blogs/[slug]/page.tsx | 5 +++-- examples/next-app-router/app/globals.css | 22 ------------------- examples/next-app-router/app/page.tsx | 2 +- .../next-app-router/components/article.tsx | 11 ---------- examples/next-app-router/package.json | 21 ++++++++++-------- examples/next-app-router/tsconfig.json | 3 ++- 10 files changed, 24 insertions(+), 52 deletions(-) diff --git a/examples/next-app-router/.nvmrc b/examples/next-app-router/.nvmrc index 7950a445..016e34ba 100644 --- 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 index a9b5af6e..a40ca5fa 100644 --- 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 index 128e6852..6224d6d1 100644 --- 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 index 40da39d3..9962cdf4 100644 --- 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 index 3d21a95f..207735cc 100644 --- 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 index 6b3c9b5b..b5c61c95 100644 --- 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 index 04568571..bb09eb37 100644 --- 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 index a1dfa89f..15227794 100644 --- 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', })} /> -
-
-
- {documentToReactComponents(updatedBlog.details.json)} -
-
-
diff --git a/examples/next-app-router/package.json b/examples/next-app-router/package.json index a8132302..256f9188 100644 --- a/examples/next-app-router/package.json +++ b/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.6.0", + "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" } } diff --git a/examples/next-app-router/tsconfig.json b/examples/next-app-router/tsconfig.json index e7ff90fd..64c21044 100644 --- a/examples/next-app-router/tsconfig.json +++ b/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"] From a89824dbbed490c53ee7214bab9e0ef28f506fd2 Mon Sep 17 00:00:00 2001 From: Yves Rijckaert Date: Mon, 9 Dec 2024 14:49:51 +0100 Subject: [PATCH 2/5] docs: update next-app-router-ssr example --- examples/next-app-router-ssr/README.md | 7 +++--- .../app/api/disable-draft/route.ts | 2 +- .../app/api/draft/route.ts | 6 ++--- examples/next-app-router-ssr/app/layout.tsx | 4 ++-- examples/next-app-router-ssr/app/page.tsx | 2 +- .../app/posts/[slug]/page.tsx | 6 ++--- .../next-app-router-ssr/lib/api-graphql.ts | 2 +- examples/next-app-router-ssr/package.json | 22 ++++++++++--------- 8 files changed, 27 insertions(+), 24 deletions(-) diff --git a/examples/next-app-router-ssr/README.md b/examples/next-app-router-ssr/README.md index 0e3c0f8f..4d03f0e8 100644 --- 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 index 128e6852..6224d6d1 100644 --- 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 index ed9a54c1..0f05775a 100644 --- 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 index a1bd8f46..85aa3cbe 100644 --- 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 ( diff --git a/examples/next-app-router-ssr/app/page.tsx b/examples/next-app-router-ssr/app/page.tsx index d9eefb04..321aa14e 100644 --- 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 index fddadff9..12ad5c55 100644 --- 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

{formattedPost}

; diff --git a/examples/next-app-router-ssr/lib/api-graphql.ts b/examples/next-app-router-ssr/lib/api-graphql.ts index 4c36bab2..5b7329da 100644 --- 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 Date: Mon, 9 Dec 2024 14:57:38 +0100 Subject: [PATCH 3/5] docs: update next-pages-router example --- examples/next-pages-router/.nvmrc | 2 +- examples/next-pages-router/README.md | 2 +- examples/next-pages-router/package.json | 22 +++++++------- .../next-pages-router/pages/blogs/[slug].tsx | 11 ------- examples/next-pages-router/styles/globals.css | 30 ------------------- examples/next-pages-router/tsconfig.json | 3 +- 6 files changed, 16 insertions(+), 54 deletions(-) diff --git a/examples/next-pages-router/.nvmrc b/examples/next-pages-router/.nvmrc index 7950a445..016e34ba 100644 --- a/examples/next-pages-router/.nvmrc +++ b/examples/next-pages-router/.nvmrc @@ -1 +1 @@ -v18.17.0 +v20.17.0 diff --git a/examples/next-pages-router/README.md b/examples/next-pages-router/README.md index fc4d2353..73e5eb09 100644 --- a/examples/next-pages-router/README.md +++ b/examples/next-pages-router/README.md @@ -87,7 +87,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-pages-router/package.json b/examples/next-pages-router/package.json index dd67e830..a8637be4 100644 --- a/examples/next-pages-router/package.json +++ b/examples/next-pages-router/package.json @@ -3,29 +3,31 @@ "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": "^3.1.0", - "@contentful/rich-text-react-renderer": "^15.19.3", + "@contentful/live-preview": "^4.6.0", "contentful": "^10.6.21", - "next": "14.2.10", - "react": "^18", - "react-dom": "^18", - "swr": "^2.2.4" + "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", "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" } } diff --git a/examples/next-pages-router/pages/blogs/[slug].tsx b/examples/next-pages-router/pages/blogs/[slug].tsx index 27869721..ec4fc6c9 100644 --- a/examples/next-pages-router/pages/blogs/[slug].tsx +++ b/examples/next-pages-router/pages/blogs/[slug].tsx @@ -1,7 +1,6 @@ import { Blog, getAllBlogsWithSlug, getBlog } from '@/lib/contentful/api'; import { GetStaticPaths, GetStaticProps, GetStaticPropsContext } from 'next'; -import { documentToReactComponents } from '@contentful/rich-text-react-renderer'; import { useContentfulInspectorMode, useContentfulLiveUpdates, @@ -67,16 +66,6 @@ export default function BlogPage({ blog }: { blog: Blog }) { fieldId: 'file', })} /> -
-
-
- {documentToReactComponents(updatedBlog.fields.details)} -
-
-
diff --git a/examples/next-pages-router/styles/globals.css b/examples/next-pages-router/styles/globals.css index 875c01e8..b5c61c95 100644 --- a/examples/next-pages-router/styles/globals.css +++ b/examples/next-pages-router/styles/globals.css @@ -1,33 +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; - --background-start-rgb: 0, 0, 0; - --background-end-rgb: 0, 0, 0; - } -} - -body { - color: rgb(var(--foreground-rgb)); - background: linear-gradient( - to bottom, - transparent, - rgb(var(--background-end-rgb)) - ) - rgb(var(--background-start-rgb)); -} - -@layer utilities { - .text-balance { - text-wrap: balance; - } -} diff --git a/examples/next-pages-router/tsconfig.json b/examples/next-pages-router/tsconfig.json index e7ff90fd..64c21044 100644 --- a/examples/next-pages-router/tsconfig.json +++ b/examples/next-pages-router/tsconfig.json @@ -19,7 +19,8 @@ ], "paths": { "@/*": ["./*"] - } + }, + "target": "ES2017" }, "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], "exclude": ["node_modules"] From d190b518962d01a83dd665acc5f4f169c0c59bdf Mon Sep 17 00:00:00 2001 From: Yves Rijckaert Date: Mon, 9 Dec 2024 15:29:22 +0100 Subject: [PATCH 4/5] docs: update content-source-maps-cpa example --- .../content-source-maps-cpa/lib/api-rest.ts | 2 +- examples/content-source-maps-cpa/package.json | 20 +++++++++++-------- 2 files changed, 13 insertions(+), 9 deletions(-) diff --git a/examples/content-source-maps-cpa/lib/api-rest.ts b/examples/content-source-maps-cpa/lib/api-rest.ts index bbed787c..e645cdfe 100644 --- 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 index 1735627b..492cf9f5 100644 --- 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" } } From 5b226125c9720889229f1a54ab5b94570928385b Mon Sep 17 00:00:00 2001 From: Yves Rijckaert Date: Mon, 9 Dec 2024 15:34:11 +0100 Subject: [PATCH 5/5] docs: update content-source-maps-graphql example --- .../app/api/disable-draft/route.ts | 2 +- .../app/api/enable-draft/route.ts | 6 +++--- .../content-source-maps-graphql/app/layout.tsx | 4 ++-- .../content-source-maps-graphql/app/page.tsx | 2 +- .../content-source-maps-graphql/package.json | 18 +++++++++++------- 5 files changed, 18 insertions(+), 14 deletions(-) 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 index 128e6852..6224d6d1 100644 --- 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 index a8057746..85cd2077 100644 --- 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 index dd7ef0da..5ff4894d 100644 --- 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 (