payloadcms / payload

Payload is the open-source, fullstack Next.js framework, giving you instant backend superpowers. Get a full TypeScript backend and admin panel instantly. Use Payload as a headless CMS or for building powerful applications.
https://payloadcms.com
MIT License
23.63k stars 1.51k forks source link

Support Async Dynamic APIs #8463

Open mobeigi opened 5 days ago

mobeigi commented 5 days ago

Link to reproduction

No response

Environment Info

Binaries:
  Node: 20.16.0
  npm: N/A
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  payload: 3.0.0-beta.109
  next: 15.0.0-canary.172
  @payloadcms/db-postgres: 3.0.0-beta.109
  @payloadcms/email-nodemailer: 3.0.0-beta.109
  @payloadcms/graphql: 3.0.0-beta.109
  @payloadcms/next/utilities: 3.0.0-beta.109
  @payloadcms/plugin-cloud: 3.0.0-beta.109
  @payloadcms/plugin-nested-docs: 3.0.0-beta.109
  @payloadcms/plugin-redirects: 3.0.0-beta.109
  @payloadcms/plugin-seo: 3.0.0-beta.109
  @payloadcms/richtext-lexical: 3.0.0-beta.109
  @payloadcms/translations: 3.0.0-beta.109
  @payloadcms/ui/shared: 3.0.0-beta.109
  react: 19.0.0-rc-3edc000d-20240926
  react-dom: 19.0.0-rc-3edc000d-20240926
Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 10 Pro
  Available memory (MB): 65459
  Available CPU cores: 24

Done in 3.03s.

Describe the Bug

As of Next.js v15.0.0-canary.171, the following change was introduced: https://github.com/vercel/next.js/pull/68812

You can read more about the change here: https://github.com/vercel/next.js/pull/68812

In short, it makes params / headers return promises so you have to await them. Its meant to also allow the previous approach for backwards compatability temporarily. However, it seems like this is not working as intended and it breaking next build (production builds).

The errors stem from the api/payload folder.

Example build error from yarn build:

   Linting and checking validity of types  ...Failed to compile.

.next/types/app/(payload)/admin/[[...segments]]/page.ts:30:29
Type error: Type 'Args' does not satisfy the constraint 'PageProps'.
  Types of property 'params' are incompatible.
    Type '{ segments: string[]; }' is missing the following properties from type 'Promise<SegmentParams>': then, catch, finally, [Symbol.toStringTag]

  28 |
  29 | // Check the prop type of the entry function
> 30 | checkFields<Diff<PageProps, FirstArg<TEntry['default']>, 'default'>>()
     |                             ^
  31 |
  32 | // Check the arguments and return type of the generateMetadata function
  33 | if ('generateMetadata' in entry) {
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Example console errors during yarn dev:

In route /api/[...slug] a param property was accessed directly with `params.slug`. `params` is now a Promise and should be awaited before accessing properties of 
the underlying params object. In this version of Next.js direct access to param properties is still supported to facilitate migration but in a future version you will be required to await `params`. If this use is inside an async function await it. If this use is inside a synchronous function then convert the function to async or await it from outside this function and pass the result in.

Reproduction Steps

  1. Use any Payload project using payload 3.0.0-beta.109 and nextjs 15.0.0-canary.171.
  2. yarn dev
  3. Load a /api/ route.
  4. Observe errors in console.
  5. yarn build
  6. Observe type errors that fail the build.

Adapters and Plugins

No response

DanRibbens commented 3 days ago

The workaround until we can issue a fix in Payload is to use "next": "v15.0.0-canary.160" while we work on this.