Next.js 15 RC with Experimental Partial Prerendering and Clerk

[wujekbizon]

I'm not sure if this is an issue related to Next.js or Clerk. I have a dashboard route which clearly can be access only when user is authenticated . I'm using Clerk for my authentication . I've a DashboardPage component which looks like that :

// imports ...
export const experimental_ppr = true;

export default function DashboardPage() {
  return (
    <section className="flex h-full w-full flex-col px-4 md:h-[calc(100%_-_64px)]">
      <div className="flex h-full w-full flex-col gap-4 xl:flex-row">
        <div className="flex w-full flex-col items-center justify-around">
          <div className="flex w-full flex-col items-center px-4 py-16 md:px-8">
            <h1 className="font-semi-bold w-full bg-gradient-to-r from-gray-400 to-gray-700 bg-clip-text py-1 text-left  text-2xl text-transparent md:w-3/4 lg:text-4xl">
              Hello,
              <Suspense fallback={<SkeletonUserName />}>
                <DynamicUserName />
              </Suspense>
            </h1>
            <h2 className="font-semi-bold w-full bg-gradient-to-r from-gray-400 to-gray-700 bg-clip-text py-1 text-right text-2xl text-transparent md:w-3/4 lg:text-4xl">
              welcome to your personal digital locker.
            </h2>
          </div>
          <Guide />
        </div>
        <Suspense fallback={<SkeletonUserInfo />}>
          <UserInfo />
        </Suspense>
      </div>
    </section>
  );
}

So, as you can see, I'm trying to take advantage of using the Suspense component together with this experimental PPR feature: export const experimental_ppr = true;

This code works well without any issues. The route is generated mostly statically, and the dynamic content is added as soon as it's ready, which is great. However, as soon as I try to build the project, I get a big error.

> next build

  ▲ Next.js 15.0.0-rc.0
  - Environments: .env
  - Experiments (use with caution):
    · ppr
    · reactCompiler

   Creating an optimized production build ...
 ✓ Compiled successfully
   Linting and checking validity of types  .. ⨯ ESLint: Invalid Options: - Unknown options: useEslintrc, extensions - 'extensions' has been removed.
 ✓ Linting and checking validity of types    
 ✓ Collecting page data    
   Generating static pages (6/13)  [==  ]
Error occurred prerendering page "/dashboard". Read more: https://nextjs.org/docs/messages/prerender-error

Error: Clerk: auth() and currentUser() are only supported in App Router (/app directory).
If you're using /pages, try getAuth() instead.
Original error: Error: Route /dashboard needs to bail out of prerendering at this point because it used headers. React throws this special object to indicate where. It should not be caught by your own try/catch. Learn more: https://nextjs.org/docs/messages/ppr-caught-error
  ...
  ...
> Build error occurred
Error: Export encountered an error on /dashboard, exiting due to prerenderEarlyExit: true being set
    at D:\NextJS\projects\school-locker\node_modules\.pnpm\next@15.0.0-rc.0_babel-plugin-react-compiler@0.0.0-experimental-c23de8d-20240515_react-dom@19_how4hi32wdb74kpicuq7wdfqwi\node_modules\next\dist\export\index.js:481:23
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)    at async Promise.all (index 12)
    at async exportAppImpl (D:\NextJS\projects\school-locker\node_modules\.pnpm\next@15.0.0-rc.0_babel-plugin-react-compiler@0.0.0-experimental-c23de8d-20240515_react-dom@19_how4hi32wdb74kpicuq7wdfqwi\node_modules\next\dist\export\index.js:442:21)

This only happens when this line is placed: export const experimental_ppr = true; With this line commented out, it builds without any issues :

  Creating an optimized production build ...
✓ Compiled successfully
  Linting and checking validity of types  . ⨯ ESLint: Invalid Options: - Unknown options: useEslintrc, extensions - 'extensions' has been removed.
✓ Linting and checking validity of types    
✓ Collecting page data    
✓ Generating static pages (13/13)
✓ Collecting build traces
✓ Finalizing page optimization
...

As a side note both components that are wrapped with Suspense are async since I'm getting a user info from clerk :
one of the components

import { currentUser } from "@clerk/nextjs/server";

export default async function DynamicUserName() {
  const user = await currentUser();
  if (!user) throw new Error("Unauthorized");

  return (
    <span className="font-bold text-amber-500/80"> {user?.firstName}</span>
  );
}

So , anyone had similar problem before ?

[praveenjuge]

I think this issue is from clerk itself and has been fixed in this PR: clerk/javascript#3499

It has not been released yet, so try with the latest canary version of the clerk package and see if that works!

[wujekbizon]

That actually works! I updated @clerk/nextjs to 5.1.4 version and all good. Thank you for pointing this out.