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

[aseph8083]

Summary

how to fix error useSearchParams() should be wrapped in a suspense boundary at page "/404". Read more: https://nextjs.org/docs/messages/missing-suspense-with-csr-bailout

Error occurred prerendering page "/_not-found". Read more: https://nextjs.org/docs/messages/prerender-error

I didn't create a /404 file but an error like that appears

Additional information

No response

Example

No response

[icyJoseph]

Hi,

Could you share a link to the repository?

Or could you provide more information about your app? Do you ever use useSearchParams yourself?

[aseph8083]

I have followed the solution in the link https://nextjs.org/docs/messages/missing-suspense-with-csr-bailout, but when I build "npm run builld" the error still appears useSearchParams() should be wrapped in a suspense boundary at page

Previously I used version 13, after updating to version 14.1 the error appeared

this is my code
page.tsx

import { Suspense } from "react";
import SuccessComponent from "./success";

const SuccessPage: React.FC = () => {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <SuccessComponent />
      </Suspense>
    </div>
  );
};

export default SuccessPage;

and this success.tsx

"use client";
import { useSearchParams } from "next/navigation";
import { AES, enc } from "crypto-js";
import { Button, Descriptions, Layout, Result } from "antd";
import { useEffect, useState } from "react";
const { Content } = Layout;

const SuccessComponent: React.FC = () => {
  const [datacreate, setDataCreate] = useState<any>(null);
  const params = useSearchParams();
  const key = process.env.NEXT_PUBLIC_ENCRIPT_KEY;

  useEffect(() => {
    const fetchData = async () => {
      try {
        const decryptedData = AES.decrypt(
          params.get("data")!,
          key!.toString()
        ).toString(enc.Utf8);
        const parsedData = JSON.parse(decryptedData);
        setDataCreate(parsedData);
      } catch (error) {
        console.error("Error decoding data:", error);
        setDataCreate(null);
      }
    };

    fetchData();
  }, [params, key]);

  return (
    <Layout hasSider>
      <Content className="bg-white container">
        <Result
          status="success"
          title={<div style={{ paddingBottom: 30 }}>Success</div>}
          subTitle={
            <Descriptions
              size="small"
              column={1}
              bordered
              contentStyle={{ textAlign: "left" }}
            >
              <Descriptions.Item label="Company">
                {datacreate ? datacreate.company : ""}
              </Descriptions.Item>
            </Descriptions>
          }
          extra={[
            <Button
              type="primary"
              key="login-billing"
              href={process.env.NEXT_PUBLIC_DASHBOARD_URL}
            >
              Back
            </Button>,
            <Button key="login" href="/">
              Login
            </Button>,
          ]}
        />
      </Content>
    </Layout>
  );
};

export default SuccessComponent;

[deadcoder0904]

i am facing this too?

my code is literally this simple.

"use client"

import Link from "next/link"
import { useSearchParams } from "next/navigation"
import { Suspense } from "react"

import { BgImg } from "@/app/components/index"

type Fruit = "apple" | "mango" | "potato"

const Search = () => {
	const searchParams = useSearchParams()
	const fruit = searchParams.get("fruit") as Fruit

	return (
		<Suspense>
			{mode === "apple" && (
				<span className="block mt-2">
					Apple apple.
				</span>
			)}
		</Suspense>
	)
}

this worked before i think.

all i want to use is a search parameter from the url & conditionally render some text.

[deadcoder0904]

@icyJoseph thanks, this worked. i thought i should be wrapping around the variable i used so i first wrapped it around fruit & then the whole component.

const SuspenseWrapper = () => (
	<Suspense>
		<Search />
	</Suspense>
)

export default SuspenseWrapper

[karanj08]

@deadcoder0904 @icyJoseph

hey i'm getting an error in npm run build , it says useSearchParams() should be wrapped in a suspense.

"use client";
import { Suspense, useEffect, useState } from "react";
import { useRouter, useSearchParams } from "next/navigation";
import Form from "@components/Form";

export const EditPrompt = () => {
const router = useRouter();

const searchParams = useSearchParams();
const promptId = searchParams.get("id");

const [submitting, setSubmitting] = useState(false);
const [post, setpost] = useState({
prompt: "",
tag: "",
});

useEffect(() => {
const getPromptDetails = async () => {
const response = await fetch(/api/prompt/${promptId});
const data = await response.json();

  setpost({
    prompt: data.prompt,
    tag: data.tag,
  });
};
if (promptId) getPromptDetails();

}, [promptId]);

const updatePrompt = async (e) => {
e.preventDefault();
setSubmitting(true);

if (!promptId) return alert("Missing PromptId");

try {
  const response = await fetch(`/api/prompt/${promptId}`, {
    method: "PATCH",
    body: JSON.stringify({
      prompt: post.prompt,
      tag: post.tag,
    }),
  });

  if (response.ok) {
    router.push("/");
  }
} catch (error) {
  console.log(error);
} finally {
  setSubmitting(false);
}

};
return (

);
};

export default EditPrompt;

can help me with this.

[icyJoseph]

Suspense boundaries much like Error boundaries have to wrap the component where it is used.

Please read the docs, https://react.dev/reference/react/Suspense

In your case, it is when you include the EditPrompt component in another component's returned JSX, for example, that you have to wrap a Suspense boundary around.

You could export an already wrapped version as well, and what not, the important thing is that the boundary has to wrap EditPrompt. Again, refer to the docs for more examples.

[T1rth1]

const RootLayout = ({children}) => {
return (

<html lang="en">
    <body>
        <Provider>
            <div className='main'>
                <div className='gradient'/>
            </div>
            <main className="app">
                <Nav/>
            <Suspense fallback={<div>Loading...</div>}>
            
                {children}
            </Suspense>
            </main>
            <link rel="icon" href="/assets/images/logo.svg" sizes="any" />
        </Provider>
    </body>
</html>

)
}
you should wrap your {children} with this suspense..it should solve your error 100%
i tried hours and figured out

[icyJoseph]

@T1rth1 that has a very important implementation.

When React encounters the usage of useSearchParams, it will suspend the rendering up to the closest Suspense boundary, which means that your page will show that Suspense boundary as fallback.

This is not optimal. Hardly 100% of your page's content depends on the useSearchParams hook, and you could send that content to the client already. The right solution is to figure out where exactly this is happening, contain it and put a Suspense boundary around it

[ChetSocio]

@icyJoseph , Hey Joseph, why this is compulsory for nextjs 14.1.0 versions? You have shown a case in which you will render a template or function using Suspense. What if we are using useSearchparams just to get search params values and use it for api calls and not use them in template. An example is like:

` const searchParams: any = useSearchParams();
const token = searchParams.get('token');
const uid = searchParams.get('uid');
const router = useRouter()

const emailVerifyClick = () => {
    setIsVerifying(true)
    axios.post(`${process.env.NEXT_PUBLIC_EMAIL_PATH as string}?uid=${uid}&token=${token}`, {}, {
        headers: {
            'myheader': process.env.NEXT_PUBLIC_EMAIL_KEY as string
        }
    }).then((resp: any) => {
        setIsVerifying(false);
        setVerificationMessage(resp.data.msg);
        setIsVerified(true)
        router.push("/login?activationRedirected=true")
    }).catch((error: any) => {
        setIsVerifying(false);
        setErrorMsg("Error while validating email! Please contact support");
        setIsVerified(false)
    });
}`

I have not used searchParams value in template anywhere. What must I do now to handle this error. You guys just create problems faster and more than solutions :/ This is only a framework where i fear to hover or click on elements while development.

[icyJoseph]

Such requirement is only for static pre-rendering, quite simply because during build time there are no query parameters. In pages router an empty object would have been used, for pre-rendering, and then once in the client, a extra render would be triggered to sync the UI.

If you only care for these values within an event callback, such as your example, then use window.location.search, in combination with URLSearchParams, inside the callback body:

let params = new URLSearchParams(document.location.search);
let name = params.get("name"); // is the string "Jonathan"
let age = parseInt(params.get("age"), 10); // is the number 18

And skip creating a stateful dependency where it is not needed.

The hook is useful to synchronize the UI with the search params, a callback doesn't necessarily need it. Of course that may not always be the case, but right now none come to mind.

[immdraselkhan]

Instead of using useSearchParams, your instructions work fine. 🙏

[odafeaggreh]

For me, the solution to the problem was a little hard to track down because I did not have useSearchParams() anywhere in my codebase. After much debugging, I found that the problem was from using next-nprogress-bar.

What worked for me was to wrap the ProgressBar in <Suspense></Suspense>

Code:

ProgressBarProvider.js

"use client";
import { AppProgressBar as ProgressBar } from "next-nprogress-bar";
const ProgressBarProvider = ({ children }) => {
  return (
    <>
      {children}
      <ProgressBar
        height="4px"
        color="#000000"
        options={{ showSpinner: false }}
        shallowRouting
      />
    </>
  );
};

export default ProgressBarProvider;

app/layout.js

<Suspense>
     <ProgressBarProvider>{children}</ProgressBarProvider>
</Suspense>

[eclipssed]

Thank God that you solved this error I spent almost 7 days figuring out that what's going wrong. Started taking depression pills but thanks to you. By the way how did you figure it out. I wanna know coz in future I don't want to waste that much of time on a single error.

[fenggwsx]

I also use next-nprogress-bar in my project and encountered this issue. Thank you @odafeaggreh, you've saved me lots of time!

[fenggwsx]

By the way, this solution can turn the whole page into streaming mode because the <Suspense> wraps the whole children (ref: https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming).

If the loading.tsx isn't created, you will get a blank page immediately and the content will show later on during streaming, which will cause flicker when user refreshes the page. (I've tried this)

Since I don't use loading.tsx, just directly wrapping the <ProgressBar> with the <Suspense> boundary might be a better choice:

"use client";

import type { ReactNode } from "react";
import { Suspense } from "react";
import { AppProgressBar as ProgressBar } from "next-nprogress-bar";

type Props = {
  children: ReactNode;
};

export default function Providers({ children }: Props) {
  return (
    <>
      {children}
      <Suspense>
        <ProgressBar
          height="4px"
          color="#4f46e5"
          options={{ showSpinner: false, speed: 500 }}
          delay={500}
        />
      </Suspense>
    </>
  );
}

[Bunyod0301]

thanks!

[contradeepak]

Thanks bro, it helped. Cheers.

Here is my code after adding Suspense.

import { Suspense } from "react";
import SearchHeader from "../components/SearchHeader";
import "./../globals.css";

export default function layout({children}) {
return (

{children}

)
}

[ChetSocio]

Literally you guys seem to make Nextjs developers wrap everything inside Suspense in upcoming versions lol.

[Novo1999]

I was using useSearchParams inside my Home component and I wrapped it using Suspense and it was fixed

import { Suspense } from 'react'
import Home from '../components/Home'

export default function Page() {
  return (
    <Suspense>
      <Home />
    </Suspense>
  )
}

[themuhdhilmi]

I've fixed mine by wrapping children with

import ....

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <Providers>
        <head>
          <ThemeModeScript />
        </head>
        <body
          className={inter.className}
          style={{
            minHeight: '100vh',
          }}
        >
          <Header />
          <Suspense>
          {children}
          </Suspense>
        </body>
      </Providers>
    </html>
  )
}

[Affaq-Ahmed]

just create a loading.jsx in the app directory and it will work fine. No need to wrap in Suspense.

[Lokesh01]

easiest one till now

[hallucinogenizer]

In my case, I was using the "use-query-params" package. Even if I wrapped the component that was using useQueryParam() with a suspense, the error still didn't go away.
I later realized that I needed to wrap its provider wrapper <QueryParamProvider>{children}</QueryParamProvider> with suspense:

return <Suspense>
    <QueryParamProvider>
      {children}
    </QueryParamProvider>
</Suspense>

Not sure of how this may negatively affect page rendering and performance.