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:

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.

Does your project rely on prismic-reactjs?

prismic-reactjs has been replaced by @prismicio/react. To learn how to upgrade, see the migration guide.

Update packages in package.json

Remove next-slicezone from your package.json:

Copy

  {
    "dependencies": {

    }
  }

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

Copy

  {
    "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:

Copy

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.

sm.json

Copy

{
  "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:

Copy


 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:

Copy

  import * as Slices from "../slices"



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

    />
  )

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

Copy

  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:

Copy


 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:

Copy

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

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

Copy

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,
  }
}

Ensure you’re using @prismicio/client version 6

@prismicio/client version 6 was recently released. It includes a collection of get-all methods to use in place of next-slicezone's useGetStaticPaths(). Ensure you are using @prismicio/client version 6. If not, follow the migration guide to upgrade.

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.

Was this article helpful?

Not really

Yes, Thanks

Can't find what you're looking for? Spot an error in the documentation? Get in touch with us on our Community Forum or using the feedback form above.