Why do I still get this error: useSearchParams() should be wrapped in a suspense boundary at page "/404"

I finished writing my frontend code in Next.js and wanted to build, only to keep getting confronted with this error:

⨯ useSearchParams() should be wrapped in a suspense boundary at page "/404". Read more: https://nextjs.org/docs/messages/missing-suspense-with-csr-bailout
    at a (C:\Users\USER\Desktop\dock-fe\.next\server\chunks\203.js:3:13936)
    at d (C:\Users\USER\Desktop\dock-fe\.next\server\chunks\203.js:5:30727)
    at p (C:\Users\USER\Desktop\dock-fe\.next\server\chunks\403.js:1:10402)
    at nF (C:\Users\USER\Desktop\dock-fe\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:76:46843)
    ...
    at nX (C:\Users\USER\Desktop\dock-fe\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:76:69876)
Error occurred prerendering page "/_not-found". Read more: https://nextjs.org/docs/messages/prerender-error
Export encountered an error on /_not-found/page: /_not-found, exiting the build.
⨯ Next.js build worker exited with code: 1 and signal: null

I had created an error page and assumed that was where the error came from, so I carefully wrapped it in a suspense boundary—nothing happened.
I decided to delete the custom error - nothing happened.
I deleted every piece of code related to the custom error page - still nothing happened.
I went ahead to delete my .next directory to rebuild from scratch - still nothing happened.
So I reverted back to my previous code. I scoured every piece of code that contained the useSearchParams() function and wrapped them in a suspense boundary, even had to create new components for it - still the same error!
I went to the top layout of the project and wrapped it in a suspense boundary - still the same error.

Solution

Q: How to fix "useSearchParams() should be wrapped in a suspense boundary at page '/404'" in Next.js?

A: After 3 days of debugging, here’s the solution that worked when nothing else did:

The Fix

1️⃣ Wrap your provider in Suspense (mine used useSearchParams() in AuthProvider):

// components/auth-wrapper.tsx  
"use client";  
import { Suspense } from "react";  
import { AuthProvider } from "./auth-context";  

export function AuthWrapper({ children }) {  
  return (  
    <Suspense fallback="Loading...">  
      <AuthProvider>{children}</AuthProvider>  
    </Suspense>  
  );  
}

2️⃣ Update your root layout:

// app/layout.tsx  
export default function RootLayout({ children }) {  
  return (  
    <html>  
      <body>  
        <AuthWrapper> {/* Replaces AuthProvider */}  
          {children}  
        </AuthWrapper>  
      </body>  
    </html>  
  );  
}

Why This Works

The root layout’s Suspense boundary covers all pages, including /404
useSearchParams() requires Suspense for SSR/static generation

Critical Tips

Debug Commands That Actually Helped

# Check what's actually using useSearchParams
grep -r "useSearchParams" src/

Or use vscode search feature ctrl+shift+F
No need to modify not-found.tsx

To Next.js Devs: Please improve the error messages! A simple pointer to the problematic component would save hours of pain. 😅

This approach eliminated the error instantly after days of failed attempts.