Unable to use server component slices within the Prismic Simulator

[Phil (Phil Snow)]

Hi Team,

The latest release of Slice Machine now supports server components

Slice Machine v1.25.0 Release Notes

Hey! We're happy to announce the release of Slice Machine v1.25.0! Enhancements Next.js dynamic functions, like headers() and cookies(), are now supported in the slice simulator. Update your Next.js slice simulator page If you are using Next.js with the App Router, we recommend updating your /slice-simulator page with the following code. After the update, your slice components can use Next.js dynamic functions. // src/app/slice-simulator/page.tsx import { SliceSimulator, …

You'll need to update your simulator page:

// src/app/slice-simulator/page.tsx

import {
  SliceSimulator,
  SliceSimulatorParams,
  getSlices,
} from "@slicemachine/adapter-next/simulator";
import { SliceZone } from "@prismicio/react";

import { components } from "@/slices";

export default function SliceSimulatorPage({
  searchParams,
}: SliceSimulatorParams) {
  const slices = getSlices(searchParams.state);

  return (
    <SliceSimulator>
      <SliceZone slices={slices} components={components} />
    </SliceSimulator>
  );
}

Happy coding!