Deployment error

[fbetancourtc]

Request for Support: Next.js Build Failing on Vercel Due to useSearchParams()

Issue Summary

Our Next.js 14+ project fails to build on Vercel due to an error related to useSearchParams() being used inside a server component.

Current Behavior

The deployment fails with the following error:

arduino

CopyEdit

useSearchParams() should be wrapped in a suspense boundary at page "/deckcomercial".

Similar errors occur for /404 and / (home page), causing the build to fail on Vercel.

Expected Behavior

The project should successfully build and deploy without encountering useSearchParams() errors.

---

Steps to Reproduce

1. Using Next.js 14+, deploy a project that includes useSearchParams() inside a component.
2. Ensure the component is located within /app/ (which defaults to a server component).
3. Deploy on Vercel.
4. Observe the build failure with the useSearchParams() error.

---

What We Have Tried

Adding "use client"; to the component using useSearchParams().
Wrapping the component inside <Suspense>.
Moving useSearchParams() into a separate client-only component.
Ensuring no parent server components depend on the client component.
Despite these changes, the build still fails on Vercel.

---

Project Information

• Framework: Next.js 14.2.16
• Hosting: Vercel
• Environment: Production
• Affected Routes:
  • /deckcomercial
  • /404
  • / (home page)
• Relevant Dependencies:
  • "next": "14.2.16"
  • "react": "18.3.1"
  • "react-dom": "18.3.1"
  • "next/navigation" used for useSearchParams()

---

Request for Help

• What is the correct approach to handling useSearchParams() in a Next.js 14+ app on Vercel?
• Is there an official recommendation for structuring components that require useSearchParams()?
• How can we prevent Next.js from trying to prerender pages that rely on useSearchParams()?

Any guidance, best practices, or insights would be greatly appreciated!

[system]

There’s another community post with 404 debugging tips that might be helpful. Please give these solutions a try and let us know how it goes.

Debugging 404 Errors

Sometimes things don’t go as expected when deploying a website. If you see a 404 on your site, that means the page or resource couldn’t be found. There are many possible causes, and the absence of something can be tricky debug if you don’t know where to look. Here are some things you can do to find the cause and fix it. Debugging Tips Check the error code If you see a mostly white screen with 404: NOT_FOUND along with a Code and and ID then you can click the blue info box below the error deta…

A human should be around soon to offer more advice. But you can also get helpful information quickly by asking v0.

[amyegan]

This GitHub issue has more explanation about how useSearchParams affects page rendering: useSearchParams() should not need to be wrapped in a suspense boundary · Issue #74494 · vercel/next.js · GitHub

I also recommend reviewing the v14 docs for additional info and examples: Functions: useSearchParams | Next.js

I hope that helps!