nextjs - 💡(How to fix) Fix Incorrectly triggered "missing Suspense boundary" error during build using Cache Components, Proxy with next-auth, and useSearchParams() [5 comments, 2 participants]

3. Observe Error

Error occurred prerendering page "/auth/partner-signin"

• Build fails with misleading error message
• Error says to add Suspense boundary, but multiple boundaries already exist

1. Acceptable outcome: If there's a specific pattern required, the error message should explain:

• Error is misleading because Suspense boundaries are already present

TL;DR

• The issue can be resolved by adjusting the Suspense boundary setup or configuring Next.js to skip prerendering for dynamic routes using useSearchParams().

Guidance

• Review the Suspense boundary implementation in the /auth/partner-signin page to ensure it correctly wraps the component tree, focusing on the interaction with useSearchParams().
• Verify if the next.config.js file contains any custom configurations that might interfere with the default prerendering behavior for dynamic routes.
• Consider adding a custom getStaticProps method to the affected page to explicitly control prerendering, potentially returning { fallback: 'blocking' } to handle dynamic routes.
• Check the Next.js documentation for the latest guidance on using useSearchParams() with Suspense boundaries and prerendering, as the behavior might have changed between versions.

Example

// Example of wrapping a component with a Suspense boundary
import { Suspense } from 'react';

function PartnerSignin() {
  // Component implementation using useSearchParams()
}

function PartnerSigninPage() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <PartnerSignin />
    </Suspense>
  );
}

Notes

• The provided error message suggests a misunderstanding in the Suspense boundary setup, but the presence of multiple boundaries complicates the issue.
• The use of useSearchParams() indicates the route is dynamic and might require special handling during prerendering.

Recommendation

• Apply workaround: Adjust the Suspense boundary setup and consider configuring getStaticProps to control prerendering behavior, as the current error message does not clearly indicate a straightforward fix.