Next.js 13 was released a short time ago, bringing great news, the /app directory, which works with React Server Components.
"Today, many components from npm packages that use client-only features do not yet have the directive" (Rendering: Server and Client Components | Next.js)
How can we use those components while we enjoy the new features available in /app directory?
This is quite easy to answer, here's a shortcut for the code that would work with Chakra UI:
chakra-client-components.js
"use client"
export * from "@chakra-ui/react";
So instead of importing from "@chakra-ui/react" in your code, you should import from "./chakra-client-components".
That's all folks 👋
Top comments (6)
question: doesnt this make every component a client component then? beating the purpose of using nextjs 13
Yes and No. I've read that it is possible to mix Server Components with Client Components, for sure all Chakra components still being Client Components in this short solution, but in the other hand, Next.js 13 has many other new features besides Server Components.
Hopefully Chakra UI will be fully compatible with Server Components as soon as possible.
And which file I should wrap with ChakraProvider? As there are no "app.tsx" file now.
Good question, in the /app directory it could be placed in layout.tsx
"Note: You should render providers as deep as possible in the tree [...]" - Next.js
Reference:
beta.nextjs.org/docs/rendering/ser...
Thank you for the reply. I am doing exactly like this. It is working but I was wondering if there is any other way to do this.
Im the biggest fan ever of chakra, but I feel like if tailwind css has support in server components, so should chakra ui, i understand if the custom hooks such as useDisclosure and everything need to be in a client component but in other situations it should work..