useSearchParams errors showing in build but not dev—normal?

[ChristopherChudzicki]

I'm working on converting an existing SPA react app to NextJS using the App router. I'm encountering an error with useSearchParams that seems to show up only in development. Docs and discussion cover the error and its resolution.

My question is: Is it normal that this error only shows up during build and not development? One of the selling points of NextJS within our team has been the development experience, but I am concerned that build-time-only errors will be confusing for the team (including myself).

Are build-time-only errors typical? Is this an exception/bug? Any linting tools that can help with this sort of thing?

In development with next dev:

 ✓ Compiled /search in 3.7s (3448 modules)
 GET /search 200 in 4239ms

With NODE_ENV=production next build:

   Generating static pages (0/15)  [=   ] ⨯ useSearchParams() should be wrapped in a suspense boundary at page "/search". Read more: https://nextjs.org/docs/messages/missing-suspense-with-csr-bailout

[icyJoseph]

Hi,

So the thing here is that, your page is being pre-rendered. That is, during build time, Next.js is trying to generate an HTML page out of your Page component.

Since you are using useSearchParams, this creates a funny situation, because Next.js can't pre-render the page, because query params, are a runtime concept (as a request comes into the server).

To your point, there are few cases where dev and build diverge. Typically, these are around optimisation, either code optimisations, or pre-rendering pages.

I am sure in time, in the future, dev time might show gotchas about the compiled page. It does in Pages Router, when getInitialProps is used in _app.