Next 15 and react 19 🚀 (#9421)

Co-authored-by: Daniel Cousens <[email protected]>
Co-authored-by: Emma Hamilton <[email protected]>

.changeset/bump-next.md

@@ -0,0 +1,5 @@
+---
+"@keystone-6/core": major
+---
+
+Upgrades Next major version to 15

.changeset/bump-react.md

@@ -0,0 +1,5 @@
+---
+"@keystone-6/core": major
+---
+
+Upgrades React major version to 19

docs/app/(site)/blog/[post]/page.tsx

@@ -19,7 +19,8 @@ export type BlogPost = NonNullable<
 >
 
 export default async function Page ({ params }) {
-  const post = await reader.collections.posts.read(params!.post, {
+  const _params = await params
+  const post = await reader.collections.posts.read(_params!.post, {
     resolveLinkedFiles: true,
   })
 
@@ -40,7 +41,8 @@ export default async function Page ({ params }) {
 
 // Dynamic SEO page metadata
 export async function generateMetadata ({ params }): Promise<Metadata> {
-  const post = await reader.collections.posts.read(params!.post)
+  const _params = await params
+  const post = await reader.collections.posts.read(_params!.post)
 
   const title = post?.title ? `${post.title} - Keystone 6 Blog` : 'Keystone 6 Blog'
 

docs/app/(site)/docs/[...rest]/page.tsx

@@ -19,7 +19,8 @@ export type Document = NonNullable<
 >
 
 export default async function DocPage ({ params }) {
-  const doc = await reader.collections.docs.read(params!.rest.join('/'), {
+  const _params = await params
+  const doc = await reader.collections.docs.read(_params!.rest.join('/'), {
     resolveLinkedFiles: true,
   })
   if (!doc) return notFound()
@@ -35,15 +36,16 @@ export default async function DocPage ({ params }) {
   ]
 
   return (
-    <DocsLayout headings={headings} editPath={`docs/${(params?.rest as string[]).join('/')}.md`}>
+    <DocsLayout headings={headings} editPath={`docs/${(_params?.rest as string[]).join('/')}.md`}>
       <PageClient document={JSON.parse(JSON.stringify(transformedDoc))} />
     </DocsLayout>
   )
 }
 
 // Dynamic SEO page metadata
 export async function generateMetadata ({ params }) {
-  const doc = await reader.collections.docs.read(params!.rest.join('/'))
+  const _params = await params
+  const doc = await reader.collections.docs.read(_params!.rest.join('/'))
   return {
     title: doc?.title ? `${doc.title} - Keystone 6 Documentation` : 'Keystone 6 Documentation',
     description: doc?.description,

docs/components/Header.tsx

@@ -117,7 +117,7 @@ function LinkItem ({
   )
 }
 
-function useClickOutside (ref: RefObject<HTMLElement>, cb: () => void) {
+function useClickOutside (ref: RefObject<HTMLElement | null>, cb: () => void) {
   useEffect(() => {
     /**
      * Alert if clicked on outside of element

docs/components/Markdoc.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import React, { type ElementType, type ReactNode } from 'react'
+import React, { type ElementType, type ReactNode, type JSX } from 'react'
 import type { RenderableTreeNodes, Scalar, RenderableTreeNode, Tag } from '@markdoc/markdoc'
 import { isTag } from '../markdoc/isTag'
 import { Code, InlineCode } from './primitives/Code'

docs/components/content/CustomerCard.tsx

@@ -1,6 +1,6 @@
 /** @jsxImportSource @emotion/react */
 
-import type { HTMLAttributes } from 'react'
+import type { HTMLAttributes, JSX } from 'react'
 
 import { Type } from '../primitives/Type'
 import { type IconProps } from '../icons/util'

docs/package.json

@@ -18,12 +18,12 @@
     "@codemod/core": "^2.0.1",
     "@emotion/cache": "11.14.0",
     "@emotion/css": "^11.7.1",
-    "@emotion/react": "^11.7.1",
+    "@emotion/react": "^11.14.0",
     "@emotion/server": "11.11.0",
     "@emotion/weak-memoize": "^0.4.0",
-    "@keystar/ui": "^0.7.13",
-    "@keystatic/core": "^0.5.24",
-    "@keystatic/next": "^5.0.1",
+    "@keystar/ui": "^0.7.16",
+    "@keystatic/core": "^0.5.44",
+    "@keystatic/next": "^5.0.3",
     "@keystone-6/fields-document": "workspace:^",
     "@markdoc/markdoc": "^0.4.0",
     "@preconstruct/next": "^4.0.0",
@@ -37,12 +37,12 @@
     "globby": "^14.0.0",
     "js-yaml": "^4.1.0",
     "lodash.debounce": "^4.0.8",
-    "next": "^14.2.0",
+    "next": "^15.1.0",
     "next-compose-plugins": "^2.2.1",
     "prism-react-renderer": "^2.0.0",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "react-focus-lock": "^2.7.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-focus-lock": "^2.13.2",
     "rss": "^1.2.2",
     "tsx": "^4.0.0"
   },
@@ -52,8 +52,8 @@
     "@types/gtag.js": "^0.0.20",
     "@types/js-yaml": "^4.0.5",
     "@types/lodash.debounce": "^4.0.6",
-    "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.3.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
     "@types/rss": "^0.0.32",
     "next-sitemap": "^4.0.0",
     "typescript": "^5.5.0"

docs/tsconfig.json

@@ -1,6 +1,10 @@
 {
   "compilerOptions": {
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": false,
@@ -17,8 +21,16 @@
         "name": "next"
       }
     ],
-    "strictNullChecks": true
+    "strictNullChecks": true,
+    "target": "ES2017"
   },
-  "include": ["next-env.d.ts", ".next/types/**/*.ts", "**/*.ts", "**/*.tsx"],
-  "exclude": ["node_modules"]
+  "include": [
+    "next-env.d.ts",
+    ".next/types/**/*.ts",
+    "**/*.ts",
+    "**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
 }

examples/auth-magic-link/package.json

@@ -12,7 +12,10 @@
   "dependencies": {
     "@keystone-6/auth": "^8.1.0",
     "@keystone-6/core": "^6.3.1",
-    "@prisma/client": "6.3.1"
+    "@prisma/client": "6.3.1",
+    "next": "^15.1.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
   },
   "devDependencies": {
     "prisma": "5.19.0",

examples/cloudinary/package.json

@@ -10,7 +10,7 @@
     "postinstall": "keystone postinstall"
   },
   "dependencies": {
-    "@keystar/ui": "^0.7.15",
+    "@keystar/ui": "^0.7.16",
     "@keystone-6/auth": "^8.1.0",
     "@keystone-6/cloudinary": "^8.0.0",
     "@keystone-6/core": "^6.3.1",

examples/custom-admin-ui-logo/package.json

@@ -10,12 +10,12 @@
     "postinstall": "keystone postinstall"
   },
   "dependencies": {
-    "@keystar/ui": "^0.7.13",
+    "@keystar/ui": "^0.7.16",
     "@keystone-6/core": "^6.3.1",
     "@prisma/client": "6.3.1",
-    "next": "^14.2.0",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "next": "^15.1.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
   },
   "devDependencies": {
     "prisma": "5.19.0",

examples/custom-admin-ui-navigation/package.json

@@ -10,10 +10,10 @@
     "postinstall": "keystone postinstall"
   },
   "dependencies": {
-    "@keystar/ui": "^0.7.13",
+    "@keystar/ui": "^0.7.16",
     "@keystone-6/core": "^6.3.1",
     "@prisma/client": "6.3.1",
-    "react": "^18.3.1"
+    "react": "^19.0.0"
   },
   "devDependencies": {
     "prisma": "5.19.0",

examples/custom-admin-ui-pages/package.json

@@ -10,12 +10,12 @@
     "postinstall": "keystone postinstall"
   },
   "dependencies": {
-    "@keystar/ui": "^0.7.13",
+    "@keystar/ui": "^0.7.16",
     "@keystone-6/core": "^6.3.1",
     "@prisma/client": "6.3.1",
-    "next": "^14.2.0",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "next": "^15.1.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
   },
   "devDependencies": {
     "prisma": "5.19.0",

examples/custom-field/package.json

@@ -10,7 +10,7 @@
     "postinstall": "keystone postinstall"
   },
   "dependencies": {
-    "@keystar/ui": "^0.7.13",
+    "@keystar/ui": "^0.7.16",
     "@keystone-6/core": "^6.3.1",
     "@prisma/client": "6.3.1"
   },

examples/custom-output-paths/package.json

@@ -12,9 +12,9 @@
   "dependencies": {
     "@keystone-6/core": "^6.3.1",
     "@prisma/client": "6.3.1",
-    "next": "^14.2.0",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "next": "^15.1.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
   },
   "devDependencies": {
     "prisma": "5.19.0",

examples/custom-session-next-auth/package.json

@@ -12,7 +12,7 @@
   "dependencies": {
     "@keystone-6/core": "^6.3.1",
     "@prisma/client": "6.3.1",
-    "next-auth": "^4.22.1"
+    "next-auth": "^4.24.11"
   },
   "devDependencies": {
     "prisma": "5.19.0",

examples/document-field-customisation/keystone-server/package.json

@@ -13,9 +13,9 @@
     "@keystone-6/auth": "^8.1.0",
     "@keystone-6/core": "^6.3.1",
     "@keystone-6/fields-document": "^9.1.1",
-    "@keystar/ui": "^0.7.13",
+    "@keystar/ui": "^0.7.16",
     "@prisma/client": "5.19.0",
-    "react": "^18.3.1",
+    "react": "^19.0.0",
     "typescript": "^5.5.0"
   },
   "devDependencies": {

examples/document-field-customisation/nextjs-frontend/package.json

@@ -13,14 +13,14 @@
     "@keystone-6/document-renderer": "^1.1.2",
     "@preconstruct/next": "^4.0.0",
     "graphql": "^16.8.1",
-    "next": "^14.2.0",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "next": "^15.1.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
   },
   "devDependencies": {
     "@types/node": "^20.14.10",
-    "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.3.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
     "typescript": "^5.5.0"
   }
 }

examples/document-field/package.json

@@ -16,9 +16,9 @@
     "@keystone-6/fields-document": "^9.1.1",
     "@preconstruct/next": "^4.0.0",
     "@prisma/client": "6.3.1",
-    "next": "^14.2.0",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "next": "^15.1.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
   },
   "devDependencies": {
     "prisma": "5.19.0",

examples/extend-graphql-subscriptions/package.json

@@ -10,16 +10,16 @@
     "postinstall": "keystone postinstall"
   },
   "dependencies": {
-    "@apollo/client": "^3.7.0",
+    "@apollo/client": "^3.12.2",
     "@emotion/css": "^11.7.1",
     "@graphql-tools/schema": "^9.0.0",
-    "@keystar/ui": "^0.7.13",
+    "@keystar/ui": "^0.7.16",
     "@keystone-6/core": "^6.3.1",
     "@prisma/client": "6.3.1",
     "graphql": "^16.8.1",
     "graphql-subscriptions": "^2.0.0",
     "graphql-ws": "^5.9.1",
-    "react": "^18.3.1",
+    "react": "^19.0.0",
     "ws": "^8.8.0"
   },
   "devDependencies": {

examples/framework-astro/package.json

@@ -21,9 +21,9 @@
   },
   "devDependencies": {
     "@types/node": "^20.14.10",
-    "@types/react-dom": "^18.3.0",
+    "@types/react-dom": "^19.0.0",
     "prisma": "5.19.0",
-    "react": "^18.3.1",
+    "react": "^19.0.0",
     "typescript": "^5.5.0"
   }
 }

examples/framework-nextjs-app-directory/next.config.mjs

@@ -2,10 +2,7 @@
 import withPreconstruct from '@preconstruct/next'
 
 export default withPreconstruct({
-  experimental: {
-    // without this, 'Error: Expected Upload to be a GraphQL nullable type.'
-    serverComponentsExternalPackages: ['graphql'],
-  },
+  serverExternalPackages: ['graphql'],
   eslint: {
     ignoreDuringBuilds: true,
   },

examples/framework-nextjs-app-directory/package.json

@@ -23,14 +23,14 @@
     "graphql": "^16.8.1",
     "graphql-request": "^5.0.0",
     "graphql-yoga": "^3.1.0",
-    "next": "^14.2.0",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "next": "^15.1.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
   },
   "devDependencies": {
     "@types/node": "^20.14.10",
-    "react": "^18.3.1",
-    "@types/react-dom": "^18.3.0",
+    "react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
     "prisma": "5.19.0",
     "typescript": "^5.5.0"
   }

examples/framework-nextjs-pages-directory/package.json

@@ -22,14 +22,14 @@
     "graphql": "^16.8.1",
     "graphql-request": "^5.0.0",
     "graphql-yoga": "^3.1.0",
-    "next": "^14.2.0",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "next": "^15.1.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
   },
   "devDependencies": {
     "@types/node": "^20.14.10",
-    "react": "^18.3.1",
-    "@types/react-dom": "^18.3.0",
+    "react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
     "prisma": "5.19.0",
     "typescript": "^5.5.0"
   }