Closed DeJayDev closed 11 hours ago
If i put use client in the confetti component, will it work?
Hi,
Though the README for
@neoconfetti/react
reads "Works seamlessly in NextJS/Remix/Gatsby/Redwood and other Server Side Rendering environments!"Adding the Confetti import to a Server Side Rendered page provides the error:
node_modules/@neoconfetti/react/dist/index.js (211:28) @ Confetti useRef only works in Client Components. Add the "use client" directive at the top of the file to use it. Read more: https://nextjs.org/docs/messages/react-client-hook-in-server-component
In most cases it's possible to just add "use client", but in apps that need to also be defining page metadata it becomes impossible to use this library and set things like the page title/opengraph data.
For example,
import { Confetti } from '@neoconfetti/react'; import { Metadata } from "next"; const metadata: Metadata = { title: "Happy Page!", } function HappyPage() { return ( <div> <Confetti/> </div> ) } export default HappyPage; export { metadata };
You're forced to choose between
Confetti
(client component) andmetadata
(server component) ☹️This is with
next@14.0.4
and@neoconfetti/react@0.1.1
you gotta put the confetti component inside a client component and use it in the react server component.
Hi,
Though the README for
@neoconfetti/react
reads "Works seamlessly in NextJS/Remix/Gatsby/Redwood and other Server Side Rendering environments!"Adding the Confetti import to a Server Side Rendered page provides the error:
In most cases it's possible to just add "use client", but in apps that need to also be defining page metadata it becomes impossible to use this library and set things like the page title/opengraph data.
For example,
You're forced to choose between
Confetti
(client component) andmetadata
(server component) ☹️This is with
next@14.0.4
and@neoconfetti/react@0.1.1