Incompatible with Next.js

[DeJayDev]

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) and metadata (server component) ☹️

This is with [email protected] and @neoconfetti/[email protected]

[PuruVJ]

If i put use client in the confetti component, will it work?

[ahmetkca]

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) and metadata (server component) ☹️

This is with [email protected] and @neoconfetti/[email protected]

you gotta put the confetti component inside a client component and use it in the react server component.