next-slicezone Deprecation Guide

Overview

next-slicezone, a package used to render slice zones and fetch content in Next.js apps, is deprecated. Its functionalities have been redistributed to two other packages:

• @prismicio/client
• @prismicio/react

In addition, we’ve created a new package, @prismicio/next, to help with previews in Next.js apps.

next-slicezone exports two functions, useGetStaticPaths() and useGetStaticProps(), and one React component, <SliceZone>. The functionality provided by the functions is now provided by methods from @prismicio/client. The <SliceZone> component has moved to @prismicio/react.

Update packages in package.json

Remove next-slicezone from your package.json:

  {
    "dependencies": {
-     "next-slicezone": "^0.2.0"
    }
  }

Ensure your package.json has @prismicio/client and @prismicio/react. We also recommend configuring previews with @prismicio/next.

  {
    "dependencies": {
+     "@prismicio/client": "^6.0.0",
+     "@prismicio/react": "^2.0.2",
+     "@prismicio/next": "0.1.0",
    }
  }

Update your installed packages by running npm in your terminal:

npm install

Update sm.json

In the sm.json file you will have to specify that you are using the latest version of these kits, this is done with the attribute: "framework": "next". Projects updating Slice Machine but keeping the older kits will specify previousNext.

{
  "apiEndpoint": "https://your-repo-name.cdn.prismic.io/api/v2",
  "libraries": ["@/slices"],
  "_latest": "0.3.0",
  "localSliceSimulatorURL": "http://localhost:3000/slice-simulator",
  "framework": "next"
}

Handle breaking changes

Change SliceZone imports

The <SliceZone> component is now provided by @prismicio/react instead of next-slicezone. Change the package name to import <SliceZone> from @prismicio/react:

- import SliceZone from 'next-slicezone'
+ import { SliceZone } from '@prismicio/react'

Be sure to import <SliceZone> as a named import, not a default import.

Ensure you update the component import in your slice simulator page, if you have one (likely at /page/slice-simulator.js).

Replace <SliceZone>’s resolver prop with components

<SliceZone> now has slightly different props. The resolver prop is deprecated. You can remove it:

  import * as Slices from "../slices"

- const resolver = ({ sliceName }) => Slices[sliceName]

  const Page = (props) => (
    <SliceZone
      slices={props.slices}
-     resolver={resolver}
    />
  )

Create a components object that maps your slice API IDs to their components, and pass the object to the <SliceZone>’s components prop:

  import * as Slices from "../slices";

+ const components = {
+   text_block: Slices.TextBlock,
+   image_gallery: Slices.ImageGallery,
+   hero_image: Slices.HeroImage
+ }

  const Page = (props) => (
    <SliceZone
      slices={props.slices}
+     components={components}
    />
  );

Alternatively, if you’re using slice-machine-ui v0.3.0 or later, Slice Machine will generate this object for you:

- import * as Slices from "../slices";
+ import { components } from '../slices'

  const Page = (props) => (
    <SliceZone
      slices={props.slices}
+     components={components}
    />
  );

Remove useGetStaticPaths() and useGetStaticProps()

In next-slicezone, useGetStaticPaths() is used to implement a page’s getStaticPaths() function:

export const getStaticPaths = useGetStaticPaths({
  client: Client(),
  type: "page",
  // ...
});

Replace useGetStaticPaths() with the getAllByType() method from @prismicio/client inside getStaticPaths():

export async function getStaticPaths() {
  const documents = await client.getAllByType("page");

  return {
    paths: documents.map((doc) => {
      return { params: { uid: doc.uid }, locale: doc.lang };
    }),
    fallback: false,
  };
}

New features

If you upgrade from @prismicio/client v5 and prismic-reactjs v1, those package upgrades bring many new features. Be sure to check out their migration guides for more information. Of note:

• With the new <SliceZone> from @prismicio/react, you can now pass default props to components.
• Replacing next-slicezone with @prismicio/client allows for greater flexibility in querying for content.
• By adding @prismicio/next, you’ll be able to configure previews.

See the technical references for @prismicio/react, @prismicio/client, and @prismicio/next for more information, or read our guide to using Prismic with Next.js.