Slice-Simulator won't work on fresh Next.js setup

Developing with Prismic
, ,
1

I've just setup a new project using the tutorial at Set up Prismic with Next.js - Documentation - Prismic

Everything installs fine and the Slice Machine itself starts just fine. As soon as I create my first slice and try to simulate the Slice the simulator loads for a few seconds then displays this message: Screenshot by Lightshot

The Next.js dev server itself starts and works fine, even though the default Next.js index page doesn't seem to load. It doesn't matter whether I try to set up with npm or yarn Berry.

Operating System: Windows 11 Pro
Node.js version: v16.19.1
npm version: 8.19.3

I've set up a public repo for reproduction: https://github.com/enyineer/msdialogmarketing

Is this a configuration fault? Maybe a missing route in prismicio.js? This is undocumented in the setup tutorial if so.

Thanks for any help :slight_smile:

3

Hi, @nico.enking.

Welcome to the Prismic forum. I will be working on this and will get back to you when I have some news.

Thanks,
Louise

4

Hi, @nico.enking.

In pages/_app.tsx, it looks like you need to add a return statement to render your app. Then Slice Simulator should work correctly.

  export default function App({ Component, pageProps }: AppProps) {
+   return (
      <PrismicProvider internalLinkComponent={(props) => <Link {...props} />}>
        <PrismicPreview repositoryName={repositoryName}>
          <Component {...pageProps} />
        </PrismicPreview>
      </PrismicProvider>
+    );
}

Let me know if this solves your issue.

Thanks,
Louise

1 Like
5

Hi @louise.findlay,

what a silly thing to miss on my side... Probably happened while copying some snippets from the getting started guide. Thank you!

7

Thanks, @nico.enking. Glad it worked out for you.