[bug]: Cannot pass custom components in server-side components in NextJS

[wzrdx]

What version of @strapi/blocks-react-renderer are you using?

"@strapi/blocks-react-renderer": "^1.0.1",
"react": "^18.3.1"

What's Wrong?

I am trying to use the BlocksRenderer inside a server component in my NextJS app. I want to pass a custom component for links.

<BlocksRenderer
    content={article.attributes.Content}
    blocks={{
        link: ({ children, url }) => (
            <Link href={url} target="_blank">
                {children}
            </Link>
        ),
    }}
/>

I get the following error:

⨯ Error: Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server". Or maybe you meant to call this function rather than return it.
  {link: function link}
         ^^^^^^^^^^^^^
    at stringify (<anonymous>)

To Reproduce

Create a NextJS app using the /app router and create a new page (page.tsx).

Render the BlocksRendered inside of it and try to pass a custom component.

Expected Behaviour

The page should render without errors.

[castulo]

I'm having the same issue

[05August]

I created a client component for rendering block content.

example: https://strapi.io/blog/integrating-strapi-s-new-rich-text-block-editor-with-next-js-a-step-by-step-guide

import Image from "next/image";

import {
  BlocksRenderer,
  type BlocksContent,
} from "@strapi/blocks-react-renderer";

export default function BlockRendererClient({
  content,
}: {
  readonly content: BlocksContent;
}) {
  if (!content) return null;
  return (
    <BlocksRenderer
      content={content}
      blocks={{
        image: ({ image }) => {
          console.log(image);
          return (
            <Image
              src={image.url}
              width={image.width}
              height={image.height}
              alt={image.alternativeText || ""}
            />
          );
        },
      }}
    />
  );
}

[NaughtyDog6000]

I created a client component for rendering block content.

example: https://strapi.io/blog/integrating-strapi-s-new-rich-text-block-editor-with-next-js-a-step-by-step-guide

import Image from "next/image";

import {
  BlocksRenderer,
  type BlocksContent,
} from "@strapi/blocks-react-renderer";

export default function BlockRendererClient({
  content,
}: {
  readonly content: BlocksContent;
}) {
  if (!content) return null;
  return (
    <BlocksRenderer
      content={content}
      blocks={{
        image: ({ image }) => {
          console.log(image);
          return (
            <Image
              src={image.url}
              width={image.width}
              height={image.height}
              alt={image.alternativeText || ""}
            />
          );
        },
      }}
    />
  );
}

this while a solution that works, doesnt help where the desire is ISR/SSG for example when generating a blog page that shouldnt need to have the html rendered on the client, I havent been able to find another solution so will probably have to use the MD editor instead.

[lmammino]

Also having the same issue. Any update or recommendation from the Strapi team?

It's nice to have a client side option, but for most real use cases, you want this content to be already rendered server side for SEO...

[nathanaelphilip]

Is there any movement here?

[carloslibardo]

I'm having the same issue :c

[carloslibardo]

The way I could workaround this issue and still keep using SSR on Blog Post is by wrapping the BlockRenderer and using prose class.

https://github.com/tailwindlabs/tailwindcss-typography?tab=readme-ov-file#element-modifiers