Not able to preview predesigned slices from slice machine

Developing with Prismic
1

I have successfully added predesigned slices from Slice Machine to my custom types and included them in my page. However, I'm encountering an issue where these slices are not visible in the preview mode, neither on localhost nor when the application is deployed. I'm wondering if there is any specific configuration I need to perform before using these slices. Below is the code snippet from my _app.js file. I'm using Next.js.

image
image1658×1028 94.9 KB

pages/_app.js

import { PrismicPreview } from "@prismicio/next";
import { repositoryName } from "@/prismicio";


export default function App({ Component, pageProps }) {
  <script
    async
    defer
    src="repo_link"
  ></script>;
  return (
      <PrismicPreview repositoryName={repositoryName}>
        <Component {...pageProps} />
      </PrismicPreview>
  );
}

pages/index.js

import { SliceZone } from "@prismicio/react";
import Head from "next/head";
import { createClient } from "../prismicio";
import { components } from "../slices/";

export default function Home({ page }) {
  return (
    <div>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main>
        <SliceZone slices={page.data.body} components={components} />
      </main>
    </div>
  );
}

export async function getStaticProps({ locale, previewData }) {
  const client = createClient({ previewData });
  const page = await client.getByUID("page", "home", {
    lang: locale,
  });
  return {
    props: {
      page,
    },
  };
}
2

When you say preview mode, are you referring to the slice simulator or Prismic Previews?

4

Hello @shubhamjangid

Welcome to the Prismic community, and thanks for reaching out to us.

In order to debug it, I need the following information from you:

  1. What error do you get when clicking the Preview button?
  2. Have you configured Previews in your Prismic Repository?
  3. Can you paste prismicio.js file too?
  4. You haven't imported in _app.js file: import { PrismicPreview } from '@prismicio/next'. Have you imported @prismicio/next, and can you import in this file?
  5. You don't need to include this script here:

I am looking forward to hearing back from you.

Thanks,
Priyanka