react-doctor/nextjs-no-use-search-params-without-suspense
Wrap the component using useSearchParams: `<Suspense fallback={<Skeleton />}><SearchComponent /></Suspense>`
- Category: Next.js
- Severity: warn
- Source:
oxlint-plugin-react-doctor - Framework: nextjs
- Enabled when: framework=nextjs and capabilities=nextjs
Validation prompt
Use this to decide whether a fired diagnostic is real or a false positive.
Flags useSearchParams() calls in any file that doesn't also contain a <Suspense> JSX element or import Suspense from 'react'. This is a file-level heuristic mirroring Next's own ESLint rule — false negative if Suspense is imported in the file for an unrelated reason. Confirm no Suspense ancestor exists in any parent file before treating it as a true positive.
Fix prompt
Use this once validation confirms the diagnostic is real.
Extract the component calling useSearchParams() into its own file/component and wrap it: <Suspense fallback={<Skeleton />}><ChildUsingSearchParams /></Suspense>. Without the boundary, Next.js opts the entire route into client-side rendering, defeating static prerendering and streaming. https://nextjs.org/docs/app/api-reference/functions/use-search-params#static-rendering
Related rules
More Next.js rules from the rules reference:
react-doctor/nextjs-no-vercel-og-import: Replace the @vercel/og import with import { ImageResponse } from "next/og"react-doctor/nextjs-async-client-component: Fetch data in a parent Server Component and pass it as props, or use useQuery/useSWR in the client componentreact-doctor/nextjs-error-boundary-missing-use-client: Add `'use client'` as the first statement of error.tsx / global-error.tsx so the error boundary becomes a Client Component.react-doctor/nextjs-global-error-missing-html-body: Wrap the global-error UI in `<html><body>...</body></html>` because the root layout unmounts when global-error rendersreact-doctor/nextjs-image-missing-sizes: Add sizes for responsive behavior: `sizes="(max-width: 768px) 100vw, 50vw"` matching your layout breakpoints