hi guys please i need help at my next.js vercel deployment error
Answered
Ocicat posted this in #help-forum
![Avatar](https://cdn.discordapp.com/embed/avatars/0.png)
OcicatOP
hi i have a ecommerce nextjs project where i use stripe for payment and every thing is working perfectly in localhost but when i make deploy to vercel i got a error
"use client";
import React, { Suspense } from "react";
import { Elements } from "@stripe/react-stripe-js";
import { loadStripe } from "@stripe/stripe-js";
import CheckoutForm from "../_chcomponents/CheckoutForm";
import { useSearchParams } from "next/navigation";
/// my code of stripe here i delete it because the characters is limited to make a post ////
return (
<Suspense fallback={<div>Loading...</div>}>
<Elements stripe={stripePromise} options={options}>
<CheckoutForm amount={Number(searchParams.get("amount"))} />
</Elements>
</Suspense>
);
}
and this is the error i got
⨯ useSearchParams() should be wrapped in a suspense boundary at page "/checkout". Read more: https://nextjs.org/docs/messages/missing-suspense-with-csr-bailout
at a (/vercel/path0/.next/server/chunks/947.js:167:13940)
at m (/vercel/path0/.next/server/chunks/947.js:167:27936)
at z (/vercel/path0/.next/server/app/checkout/page.js:1:14537)
at nM (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:47422)
at nL (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:64677)
at nI (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:46809)
at nM (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:47573)
at nM (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:61666)
at nL (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:64677)
at nB (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:67660)
Error occurred prerendering page "/checkout". Read more: https://nextjs.org/docs/messages/prerender-error
someone can help me please
"use client";
import React, { Suspense } from "react";
import { Elements } from "@stripe/react-stripe-js";
import { loadStripe } from "@stripe/stripe-js";
import CheckoutForm from "../_chcomponents/CheckoutForm";
import { useSearchParams } from "next/navigation";
/// my code of stripe here i delete it because the characters is limited to make a post ////
return (
<Suspense fallback={<div>Loading...</div>}>
<Elements stripe={stripePromise} options={options}>
<CheckoutForm amount={Number(searchParams.get("amount"))} />
</Elements>
</Suspense>
);
}
and this is the error i got
⨯ useSearchParams() should be wrapped in a suspense boundary at page "/checkout". Read more: https://nextjs.org/docs/messages/missing-suspense-with-csr-bailout
at a (/vercel/path0/.next/server/chunks/947.js:167:13940)
at m (/vercel/path0/.next/server/chunks/947.js:167:27936)
at z (/vercel/path0/.next/server/app/checkout/page.js:1:14537)
at nM (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:47422)
at nL (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:64677)
at nI (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:46809)
at nM (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:47573)
at nM (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:61666)
at nL (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:64677)
at nB (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:67660)
Error occurred prerendering page "/checkout". Read more: https://nextjs.org/docs/messages/prerender-error
someone can help me please
Answered by Oak saucer gall
The suspense around the component that use useSearchParams not inside it
11 Replies
![Avatar](https://cdn.discordapp.com/embed/avatars/5.png)
Oak saucer gall
The suspense around the component that use useSearchParams not inside it
Answer
![Avatar](https://cdn.discordapp.com/embed/avatars/0.png)
OcicatOP
thank you for helping but how can you explain more ?
![Avatar](https://cdn.discordapp.com/embed/avatars/5.png)
Oak saucer gall
what the name of the component that has useSearchParams
![Avatar](https://cdn.discordapp.com/embed/avatars/0.png)
OcicatOP
"use client";
import React, { Suspense } from "react";
import { Elements } from "@stripe/react-stripe-js";
import { loadStripe } from "@stripe/stripe-js";
import CheckoutForm from "../_chcomponents/CheckoutForm";
import { useSearchParams } from "next/navigation";
export default function checkout() {
const searchParams = useSearchParams();
const options = {
mode: "payment",
currency: "usd",
amount: Number(searchParams.get("amount")) * 100,
};
const stripePromise = loadStripe(
process.env.NEXT_PUBLIC_STRIPE_PUBLISHER_KEY
);
return (
<Suspense fallback={<div>Loading...</div>}>
<Elements stripe={stripePromise} options={options}>
<CheckoutForm amount={Number(searchParams.get("amount"))} />
</Elements>
</Suspense>
);
}
import React, { Suspense } from "react";
import { Elements } from "@stripe/react-stripe-js";
import { loadStripe } from "@stripe/stripe-js";
import CheckoutForm from "../_chcomponents/CheckoutForm";
import { useSearchParams } from "next/navigation";
export default function checkout() {
const searchParams = useSearchParams();
const options = {
mode: "payment",
currency: "usd",
amount: Number(searchParams.get("amount")) * 100,
};
const stripePromise = loadStripe(
process.env.NEXT_PUBLIC_STRIPE_PUBLISHER_KEY
);
return (
<Suspense fallback={<div>Loading...</div>}>
<Elements stripe={stripePromise} options={options}>
<CheckoutForm amount={Number(searchParams.get("amount"))} />
</Elements>
</Suspense>
);
}
![Avatar](https://cdn.discordapp.com/embed/avatars/5.png)
Oak saucer gall
typescript
<Suspense fallback={<div>Loading...</div>}><Checkout/></Suspense>
checkout component or page
![Avatar](https://cdn.discordapp.com/embed/avatars/0.png)
OcicatOP
page.jsx
![Avatar](https://cdn.discordapp.com/embed/avatars/5.png)
Oak saucer gall
you should put useSearchParams in component
and remove "use client"; from the page
![Avatar](https://cdn.discordapp.com/embed/avatars/0.png)
OcicatOP
thank you very much i understand
okay you are the best thank you very much