Upgrade to Next 15 and Keystatic 0.5

[SamLeatherdale]

Reopening #29 but with a branch in this repo

I'm trying to upgrade to Next 15 and Keystatic 0.5

I'm following the setup instructions in https://keystatic.com/docs/installation-next-js

The main issue I am running into currently is Next.js thinks we are using useState in our server components:

TypeError: useState only works in Client Components. Add the "use client" directive at the top of the file to use it. Read more: https://nextjs.org/docs/messages/react-client-hook-in-server-component

src/app/(app)/page.tsx (107:23) @ Events
> 107 |         {nextEvent && <EventListingCard slug={nextEvent.slug} />}
      |                       ^ 

I also tried with Next 14 as well, with the same error, but a much less helpful stack trace, so Next 15 makes it easier to debug.

Here's a full stack trace:

useState only works in Client Components. Add the "use client" directive at the top of the file to use it. Read more: https://nextjs.org/docs/messages/react-client-hook-in-server-component
    at c (webpack-internal:///(rsc)/./node_modules/@keystatic/core/dist/keystatic-core-renderer.node.react-server.js:15:57)
    at DocumentRenderer (webpack-internal:///(rsc)/./node_modules/@keystatic/core/dist/keystatic-core-renderer.node.react-server.js:483:13)
    at react-stack-bottom-frame (/Users/sam/repos/sydjs-keystatic/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:49:89239)
    at AsyncLocalStorage.run (node:internal/async_local_storage/async_hooks:91:14)
    at renderFunctionComponent (/Users/sam/repos/sydjs-keystatic/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:49:18574)
    at renderElement (/Users/sam/repos/sydjs-keystatic/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:49:31824)

It does indeed appear to be calling useState inside react-compiler-runtime.ts

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
sydjs-keystatic	❌ Failed (Inspect)			Apr 9, 2025 11:01am

[socket-security]

New, updated, and removed dependencies detected. Learn more about Socket for GitHub ↗︎

Package	New capabilities	Transitives	Size	Publisher
npm/@keystatic/[email protected] ➜ 0.5.46	Transitive: environment, eval, filesystem, unsafe	+334	62.9 MB	thinkmill-release-bot
npm/@keystatic/[email protected] ➜ 5.0.4	Transitive: environment, filesystem	+19	2.03 MB	thinkmill-release-bot
npm/@markdoc/[email protected] ➜ 0.5.1	None	+3	1.96 MB	mfix-stripe
npm/[email protected] ➜ 15.2.4	Transitive: eval	+46	1.37 GB	vercel-release-bot

View full report↗︎

[socket-security]

🚨 Potential security issues detected. Learn more about Socket for GitHub ↗︎

To accept the risk, merge this PR and you will not be notified again.

Alert	Package	Note	Source	CI
License Policy Violation	npm/[email protected]	License: CC-BY-4.0 (npm metadata) License: CC-BY-4.0 (package/LICENSE) License: CC-BY-4.0 (package/package.json)	package-lock.json package.json	⚠︎
License Policy Violation	npm/[email protected]	License: CC-BY-SA-4.0 (package/dist/compiled/glob/LICENSE)	package-lock.json package.json	⚠︎

View full report↗︎

Next steps

What is a license policy violation?

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Find a package that does not violate your license policy or adjust your policy to allow this package's license.

Take a deeper look at the dependency

Take a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at support [AT] socket [DOT] dev.

Remove the package

If you happen to install a dependency that Socket reports as Known Malware you should immediately remove it and select a different dependency. For other alert types, you may may wish to investigate alternative packages or consider if there are other ways to mitigate the specific risk posed by the dependency.

Mark a package as acceptable risk

To ignore an alert, reply with a comment starting with @SocketSecurity ignore followed by a space separated list of ecosystem/package-name@version specifiers. e.g. @SocketSecurity ignore npm/[email protected] or ignore all packages with @SocketSecurity ignore-all

• @SocketSecurity ignore npm/[email protected]
• @SocketSecurity ignore npm/[email protected]