Next.js 15 async API changes and their impact on Payload CMS admin files

[wilbertcaba]

I’ve been using Payload CMS v3 Beta since its initial release for a personal website. As new versions with breaking changes are introduced, I’ve been gradually updating my project, addressing each issue along the way until I reach v3 stable. I have successfully upgraded to version v3.0.0-beta.117, which requires Next.js 15.0.0.

During this upgrade, I noticed that Next.js now enforces the use of async/await with the cookies() and params APIs for better performance, which were previously used synchronously in my project

To facilitate this transition, Next.js provides a codemod:

$ npx @next/codemod@canary next-async-request-api .

This codemod effectively updates most instances where these APIs are used, making the necessary changes automatically. However, I noticed that it also attempts to modify Payload's admin page.tsx file, located at:

src > app > (payload) > admin > [[...segments]] > page.tsx

The current state of the page.tsx file on v3.0.0-beta.117 is:

/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
import type { Metadata } from "next";
import { importMap } from "../importMap.js";
import config from "@payload-config";
/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
import { RootPage, generatePageMetadata } from "@payloadcms/next/views";

type Args = {
    params: Promise<{
        segments: string[];
    }>;
    searchParams: Promise<{
        [key: string]: string | string[];
    }>;
};

export const generateMetadata = ({ params, searchParams }: Args): Promise<Metadata> =>
    generatePageMetadata({ config, params, searchParams });

const Page = ({ params, searchParams }: Args) => RootPage({ config, importMap, params, searchParams });

export default Page;

After running the codemod, it modifies the file to the following version, but it omits the correct types:

/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
import type { Metadata } from "next";
import { importMap } from "../importMap.js";
import config from "@payload-config";
/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
import { RootPage, generatePageMetadata } from "@payloadcms/next/views";

type Args = {
    params: Promise<{
        segments: string[];
    }>;
    searchParams: Promise<{
        [key: string]: string | string[];
    }>;
};

export const generateMetadata = async (props: Args): Promise<Metadata> => {
    const searchParams = await props.searchParams;
    const params = await props.params;
    return generatePageMetadata({ config, params, searchParams });
};

const Page = async (props: Args) => {
    const searchParams = await props.searchParams;
    const params = await props.params;
    return RootPage({ config, importMap, params, searchParams });
};

export default Page;

Since this file is auto-generated by Payload, I have decided not to commit these changes to avoid modifying core files. However, I’m curious—will this be something that Payload addresses in an upcoming update for full Next.js 15 compliance?

@jmikrut