How to setup Prismic for Next.js 13 App Router

Developing with Prismic
1

Is npx @slicemachine/init@latest --repository srot still the right way to setup Prismic in a Next.js 13 project using the app directory? I saw the latest video on Prismic's YouTube about how Prismic supports the App Router. It explains everything really well but it doesn't walk through the setup.

Here's the error I receive when I run it:

| Finishing core dependencies installation with pnpm ...
  →  EPERM  EPERM: operation not permitted, rename 'E:\1. Code\projects\srot… 


Command failed with exit code 1: pnpm add -D slice-machine-ui@latest @slicemachine/adapter-next@latest --color


✖ Dependency installation failed, try again with:

Obviously, running pnpm run slicemachine doesn't work and start-slicemachine is not recognised.

Manually running that works, but now there's more missing peer deps

 WARN  Issues with peer dependencies found
.
└─┬ @slicemachine/adapter-next
  ├─┬ @prismicio/types-internal
  │ ├── ✕ missing peer fp-ts@^2.11.8
  │ ├── ✕ missing peer io-ts@^2.2.16
  │ ├── ✕ missing peer io-ts-types@^0.5.16
  │ ├─┬ monocle-ts
  │ │ └── ✕ missing peer fp-ts@^2.5.0
  │ └─┬ newtype-ts
  │   └── ✕ missing peer fp-ts@^2.0.0
  └─┬ @slicemachine/plugin-kit
    └─┬ @prismicio/types-internal
      └── ✕ missing peer io-ts-types@^0.5.16
Peer dependencies that should be installed:
  fp-ts@">=2.11.8 <3.0.0"        io-ts@^2.2.16
  io-ts-types@">=0.5.16 <0.6.0"

I then manually installed those leading to more missing peer deps - monocle-ts newtype-ts

After all that, start-slicemachine is still not recognised.

The cli scaffold also creates the slice-simulator.tsx in the pages dir.

Is there an updated way to set things up specifically for Next 13 and the App Dir?

4

Hey! we've seen issues when using yarn or pnpm. I think, you can proceed with the installation using npm instead.