PrismicRichText throws error with Nextjs v13

Developing with Prismic
1

Hi there,

the <PrismicRichText /> as well as the <SliceZone /> components from your @prismicio/react package currently throw errors when using them with the latest next.js version and the /app directory.

I am using:

    "@prismicio/client": "^6.7.3",
    "@prismicio/helpers": "^2.3.9",
    "@prismicio/next": "^1.0.3",
    "@prismicio/react": "^2.5.2",
    "@prismicio/slice-simulator-react": "^0.2.3",
    "next": "13.2.4"

in my app and it throws:

TypeError: createContext only works in Client Components. Add the "use client" directive at the top of the file to use it. Read more: https://nextjs.org/docs/messages/context-in-server-component

I don't want to use the use client option though, as I would like to take advantage of the server side data fetching.

Do you guys have any workaround or are working on a fix already?

1 Like
2

Hello,

I have encountered the same issue while trying to initialize Prismic in a new NextJS project according to the current Getting started guide.

Currently using:

{
"@prismicio/client": "^6.7.3",
"@prismicio/helpers": "^2.3.9",
"@prismicio/next": "^1.0.3",
"@prismicio/react": "^2.5.2",
"@prismicio/slice-simulator-react": "^0.2.3",
"next": "13.2.4",
"react": "18.2.0",
}

Having to define the root layout as a client component defeats the whole purpose of using server side rendering.

Are you planning on supporting Next's new /app directory structure any time soon ?

4

Hello @blksnk @andreas.kratzel

Thanks for posting this to us.

  • Our package supports Next.js 13 when using its traditional pages directory. It does not yet support Next.js 13's beta app directory.

The major version change from v0.1 to v1 was required because of changes to next/image introduced in Next.js 13. We will be working on supporting Next.js 13's app directory soon. No concrete plans or ETA at the moment.

In short, Next.js 13 is not yet fully supported with Prismic, but you can check this thread that might be helpful.

Thanks,
Priyanka

1 Like
5

I also fixed it by creating a custom SliceZone component that looks somewhat like this:

/**
 * This acts as a wrapper for the actual `<SliceZone />` component from `@prismicio/react`
 * Since `<SliceZone />` uses a `createContext`, it will cause issues with next 13 and we don't want to wrap the entire page into the `use client;` option.
 */

"use client";

import { components } from "@/slices";
import { SliceZone as PrismicSliceZone, SliceLike, SliceZoneLike } from "@prismicio/react";
import { FC, memo } from "react";

interface ISliceZone {
  slices?: SliceZoneLike<SliceLike<string>>;
}

const SliceZone: FC<ISliceZone> = ({ slices }) => {
  return <PrismicSliceZone slices={slices} components={components} />;
};

export default memo(SliceZone);
1 Like
6

@andreas.kratzel Thanks for sharing. It will help others too.