next-slicezone Deprecation Guide
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.
{
"dependencies": {
}
}
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
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"
}
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 '@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).
<SliceZone> now has slightly different props. The resolver prop is deprecated. You can remove it:
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:
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 { components } from '../slices'
const Page = (props) => (
<SliceZone
slices={props.slices}
components={components}
/>
);
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,
}
}
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.
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?
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.