# Not able to preview predesigned slices from slice machine

**URL:** <https://community.prismic.io/t/not-able-to-preview-predesigned-slices-from-slice-machine/13161>\
**Category:** Developing with Prismic\
**Tags:** slice-machine\
**Created:** [May 20, 2023, 3:27pm UTC](https://community.prismic.io/t/not-able-to-preview-predesigned-slices-from-slice-machine/13161 "2023-05-20T15:27:54Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![shubhamjangid](https://avatars.discourse-cdn.com/v4/letter/s/ccd318/32.png) [@shubhamjangid](https://community.prismic.io/u/shubhamjangid)\
**Post date:** [May 20, 2023, 3:27pm UTC](https://community.prismic.io/t/not-able-to-preview-predesigned-slices-from-slice-machine/13161/1 "2023-05-20T15:27:54Z")

</div>

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](https://europe1.discourse-cdn.com/flex013/uploads/prismic/original/2X/6/6c44f9656547254897ea6211a2e7044a3816eb9f.jpeg)

pages/\_app.js

```auto
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

```auto
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,
    },
  };
}

```

---

<div class="post-metadata">

**Author:** ![nf\_mastroianni](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/nf_mastroianni/32/7071_2.png) [@nf\_mastroianni](https://community.prismic.io/u/nf_mastroianni)\
**Post date:** [May 21, 2023, 1:58am UTC](https://community.prismic.io/t/not-able-to-preview-predesigned-slices-from-slice-machine/13161/2 "2023-05-21T01:58:53Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Priyanka](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/priyanka/32/3223_2.png) [@Priyanka](https://community.prismic.io/u/Priyanka)\
**Post date:** [May 22, 2023, 10:35am UTC](https://community.prismic.io/t/not-able-to-preview-predesigned-slices-from-slice-machine/13161/4 "2023-05-22T10:35:23Z")

</div>

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:

> [@shubhamjangid](#):
>
> ```auto
> <script
> async
> defer
> src="repo_link"
> ></script>;
> 
> ```

I am looking forward to hearing back from you.

Thanks,  
Priyanka