UI: SSR example that works client side but not on server

This is due to NextJS bug: vercel/next.js#54977

Author: rallu

examples/nextjs/app/category/[...slug]/categoryPage.tsx

@@ -0,0 +1,25 @@
+"use client"
+
+import { KlevuInit, KlevuMerchandising } from "@klevu/ui-react"
+import "@klevu/ui/dist/klevu-ui/klevu-ui.css"
+
+type Props = {
+  categorySlug: string[]
+}
+
+export default function CategoryPage(props: Props) {
+  console.log(props)
+  const category = props.categorySlug.join("/")
+
+  return (
+    <KlevuInit
+      url="https://eucs29v2.ksearchnet.com/cs/v2/search"
+      apiKey="klevu-164651914788114877"
+    >
+      <KlevuMerchandising
+        category={category}
+        categoryTitle="Men's wear" // this needs to implemented in real solution
+      />
+    </KlevuInit>
+  )
+}

examples/nextjs/app/category/[...slug]/page.tsx

@@ -0,0 +1,5 @@
+import CategoryPage from "./categoryPage"
+
+export default async function Category(props: any) {
+  return <CategoryPage categorySlug={props.params.slug} />
+}

examples/nextjs/app/globals.css

@@ -8,16 +8,9 @@
   --background-end-rgb: 255, 255, 255;
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --foreground-rgb: 255, 255, 255;
-    --background-start-rgb: 0, 0, 0;
-    --background-end-rgb: 0, 0, 0;
-  }
-}
-
 body {
   color: rgb(var(--foreground-rgb));
+  min-height: 100vh;
   background: linear-gradient(
       to bottom,
       transparent,

examples/nextjs/app/page.tsx

@@ -1,5 +1,6 @@
 import Image from "next/image"
 import { Fragment } from "react"
+import Link from "next/link"
 
 export default function Home() {
   return (
@@ -20,6 +21,10 @@ export default function Home() {
           />
         </div>
       </form>
+      <br />
+      <Link href="/category/men">
+        Category page with `@klevu/ui-react` here.
+      </Link>
     </div>
   )
 }