Installation with Next.js [Pages]
Install MerelyUI with Next.js /pages 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 _app.tsx
export default function App({ Component, pageProps }: AppProps) {
return (
<Providers>
<Component {...pageProps} />
</Providers>
)
}Inside _document.tsx you need add suppressHydrationWarning prop to Html to suppress warning from next-themes usage
export default function Document() {
return (
<Html suppressHydrationWarning>
<Head />
<body>
<Main />
<NextScript />
</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>
)
}