@slicemachine/adapter-next - v0.1

@slicemachine/adapter-next adds support for Next.js in Slice Machine.

Dependencies and requirements

This package works in a Next.js project with slice-machine-ui installed.

Installation

The best way to configure a project with Slice Machine is by running the following command in a Next.js project. This command will install @slicemachine/adapter-next along with other Prismic packages and add Prismic-specific configurations to your project.

Copy
npx @slicemachine/init@latest

For more information on configuring a Next.js project with Slice Machine, see our Next.js guide.

If you want to install this package on its own, run this command:

Copy
npm install --save-dev @slicemachine/adapter-next

Usage

To use this adapter, specify it in the adapter property of your slicemachine.config.json file:

slicemachine.config.json
Copy
{
  "repositoryName": "example-prismic-repository",
  "adapter": "@slicemachine/adapter-next",
  "libraries": ["./slices"],
  "localSliceSimulatorURL": "http://localhost:3000/slice-simulator"
}

You can also specify options for the adapter:

slicemachine.config.json
Copy
{
  "repositoryName": "example-prismic-repo",
  "adapter": {
    "resolve": "@slicemachine/adapter-next",
    "options": {
      "lazyLoadSlices": true
    }
  },
  "libraries": ["./slices"]
}

Here are the available options:

format

boolean

Determines if generated files should be formatted using Prettier (default: true).

lazyLoadSlices

boolean

Determines if Slice index files should lazy load Slice components using next/dynamic (default: true).

typescript

boolean

Determines if generated files should use TypeScript rather than JavaScript (default: true only if the project contains a tsconfig.json file, otherwise false).

jsxExtension

boolean

Determines if generated Slice component files use a .jsx extension rather than a .js extension (default: false).

In order to simulate Slices in Slice Machine, the adapter requires a page that returns the <SliceSimulator> component from @slicemachine/adapter-next. The URL for this page should be specified in the localSliceSimulatorURL property of slicemachine.config.json.

pages/slice-simulator.js
Copy
import { SliceSimulator } from '@slicemachine/adapter-next/simulator'
import { SliceZone } from '@prismicio/react'

import { components } from '../slices'

const SliceSimulatorPage = () => {
  return (
    <SliceSimulator
      sliceZone={(props) => <SliceZone {...props} components={components} />}
    />
  )
}

export default SliceSimulatorPage

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.