Installation with Next.js [App]
Install MerelyUI with Next.js /app directory
Install@merely-ui/react
npm i @merely-ui/reactSetup Provider
For the first, you'll need to create Providers.tsx file with following code:
// Providers.tsx
'use client'
import { cache, MerelyProvider } from '@merely-ui/react'
import { useServerInsertedHTML } from 'next/navigation'
export default function Providers({ children }: { children: React.ReactNode }) {
useServerInsertedHTML(() => (
<style
data-emotion={`${cache.key} ${Object.keys(cache.inserted).join(' ')}`}
dangerouslySetInnerHTML={{
__html: Object.values(cache.inserted).join(' ')
}}
/>
))
return <MerelyProvider>{children}</MerelyProvider>
}Next step is wrap your app with provider inside layout.tsx and add suppressHydrationWarning prop to suppress warning from next-themes usage
export default function RootLayout({
children
}: Readonly<{
children: React.ReactNode
}>) {
return (
<html suppressHydrationWarning>
<body>
<Providers>
{children}
</Providers>
</body>
</html>
)
}Optimize Imports
You can optimize MerelyUI imports usage by adding package name toexperimental.optimizePackageImports option in your Next.js config:
export default {
experimental: {
optimizePackageImports: ['@merely-ui/react']
}
}Play!
Now you can play with MerelyUI components in your Next.js App!
import { Flex, Button } from "@merely-ui/react"
export default function Page() {
return (
<Flex>
<Button>Click me!</Button>
<Button>Click me!</Button>
</Flex>
)
}