Search code examples
next.jsnextuinextjs-15

Can I use NextUI components in Server Components or not?

I have a Next.js project in version 15.1.2 (React is 19.0.0) with TypeScript. The version of nextui-org/react is 2.6.11.

On the page: https://nextui.org/docs/guide/upgrade-to-v2 there are steps described for installing NextUI.

I followed these steps for the App Directory, and my package manager is pnpm.

In step 6, it says:

Now you can import any NextUI component directly in your Server Components without needing to use the use client; directive:

// app/page.tsx
import {Button} from '@nextui-org/button'

export default function Page() {
  return (
     <div>
      <Button>Click me</Button>
    </div>
  )
}

Unfortunately, when I run this code, I get the following error:

TypeError: createContext only works in Client Components. Add the "use client" directive at the top of the file to use it.

But this contradicts step 6, which says I can use NextUI components in Server Components.

My question: Can I use NextUI components in Server Components (without adding use client at the top of the file), or not?

Solution

  • In the link you provided, there is a footnote that says “Important”: (Screenshot)

    ...Import the component from the individual package...

    It means you should import components like this:

    import { Button } from '@nextui-org/button'

    Not like this

    import { Button } from '@nextui-org/react'