@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.