# Error fetch data with Nextjs

**URL:** <https://community.prismic.io/t/error-fetch-data-with-nextjs/9441>\
**Category:** Developing with Prismic\
**Tags:** nextjs\
**Created:** [March 21, 2022, 10:51am UTC](https://community.prismic.io/t/error-fetch-data-with-nextjs/9441 "2022-03-21T10:51:51Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![itsalimanuel](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/itsalimanuel/32/4166_2.png) [@itsalimanuel](https://community.prismic.io/u/itsalimanuel)\
**Post date:** [March 21, 2022, 10:51am UTC](https://community.prismic.io/t/error-fetch-data-with-nextjs/9441/1 "2022-03-21T10:51:51Z")

</div>

Hello there , I'm trying to fetch data using this way

> **[Fetch Data in Next.js](https://prismic.io/docs/technologies/fetch-data-nextjs)**
>
> In this article, you'll learn how to perform queries to the Prismic API to get content into your Next.js application.

```auto
export async function getStaticProps({ previewData }) {

    const client = createClient({ previewData })

    // const page = await client.getByUID('page', 'about')

    const page = await client.getSingle('homepage')

    // const homepage = await page.json()

    return {

        props: { page },

    }

}

```

but I got this error, any suggestion?

 ![image](https://europe1.discourse-cdn.com/flex013/uploads/prismic/original/2X/f/fbedf30b013cab09dc4dda1241fb8fb0d897fa21.png)

**Thanks**

---

<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:** [March 21, 2022, 12:51pm UTC](https://community.prismic.io/t/error-fetch-data-with-nextjs/9441/3 "2022-03-21T12:51:44Z")

</div>

Hello Ali,

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

Could you console log `page` parameters and paste here what you get?

Thanks,  
Priyanka

---

<div class="post-metadata">

**Author:** ![itsalimanuel](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/itsalimanuel/32/4166_2.png) [@itsalimanuel](https://community.prismic.io/u/itsalimanuel)\
**Post date:** [March 21, 2022, 12:56pm UTC](https://community.prismic.io/t/error-fetch-data-with-nextjs/9441/4 "2022-03-21T12:56:17Z")

</div>

Thanks @Priyanka , it's **undefined**

---

<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:** [March 21, 2022, 1:01pm UTC](https://community.prismic.io/t/error-fetch-data-with-nextjs/9441/5 "2022-03-21T13:01:53Z")

</div>

Okay, @itsalimanuel. In that case, I need more details:

1. What version of `@prismicio/client` are you using?
2. How did you set up prismic in your project? Have you followed the [Setup Prismic](https://prismic.io/docs/technologies/setup-nextjs) article?
3. Did you import `createClient` from `prismicio` file?

It'd be better if you can send me your project code (Either zip files or GitHub repo)

Thanks,  
Priyanka

---

<div class="post-metadata">

**Author:** ![itsalimanuel](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/itsalimanuel/32/4166_2.png) [@itsalimanuel](https://community.prismic.io/u/itsalimanuel)\
**Post date:** [March 21, 2022, 1:09pm UTC](https://community.prismic.io/t/error-fetch-data-with-nextjs/9441/6 "2022-03-21T13:09:01Z")

</div>

"@prismicio/client": "^6.4.1", yeah I followed the article

This is my setup for the intro page (for example )

```auto
import { createClient } from '../../prismicio';

export default function App({data})
{
    return (
        <LayoutApp>
            <VideoIntro id='video-intro'>
                <Video id='videoIntro' autoPlay muted loop playsInline src={videoPlaceholder}></Video>
                <IntroTitleStyle id="inrot-title">
                    <HeaderIntroTitle id='intro-title-name'>
                        <span id='intro-span'>P</span>
                        <span id='intro-span'>U</span>
                        <span id='intro-span'>L</span>
                        <span id='intro-span'>P</span>
                        <span id='intro-span'>O</span>
                        {/* {data.title} */}
                        {/* <PrismicText field={page.data.introTitle} /> */}
                    </HeaderIntroTitle>

                    <Link href='#'>

                        <EnterLink id='link'>
                            Enter the ocean
                        </EnterLink>
                    </Link>
                </IntroTitleStyle>

            </VideoIntro>

        </LayoutApp >
    )
}

export async function getStaticProps({ previewData }) {
    const client = createClient({ previewData })

    // const page = await client.getByUID('page', 'about')
    const page = await client.getSingle('homepage')
    console.log(page)
    // const homepage = await page.json()
    return {
        props: { page },
    }
}

```

I will drop the zip file in a message

---

<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:** [March 22, 2022, 10:58am UTC](https://community.prismic.io/t/error-fetch-data-with-nextjs/9441/7 "2022-03-22T10:58:36Z")

</div>

Hello @itsalimanuel

I have received your message and looked at your zip files. I found one thing that you need to fix:

Your `linkResolver` function and folder structure is are not aligned. In your folder, you have `index.js` inside `home` folder, but in link resolver, you are giving path like `/` which is till the root of your folder structure `/pages`.

1. Either you change the path in link resolver for `/` to `/home`, that way you will have URL like `[HOST]/home`
2. OR you move your index.js from `/pages/home` to /pages and keep the `linkResolver` as the same, that way you will have URL like` [HOST]/`

In approach one, I have changed linkResolver function in prismicio.js file: (

```auto
export function linkResolver(doc) {
    switch (doc.type) {
        case 'homepage':
            return '/home'
        case 'page':
            return `/${doc.uid}`
        default:
            return null
    }
}

```

Let me know if you have any further questions.

Thanks,  
Priyanka

---

<div class="post-metadata">

**Author:** ![itsalimanuel](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/itsalimanuel/32/4166_2.png) [@itsalimanuel](https://community.prismic.io/u/itsalimanuel)\
**Post date:** [March 22, 2022, 1:14pm UTC](https://community.prismic.io/t/error-fetch-data-with-nextjs/9441/8 "2022-03-22T13:14:15Z")

</div>

Hello again , I have changed the function to be like "

```auto
// Update the Link Resolver to match your project's route structure
export function linkResolver(doc) {
    switch (doc.type) {
        case 'homepage':
            return '/home'
        case 'page':
            return `/${doc.uid}`
        default:
            return null
    }
}

```

and in the home

```auto
export default function Home({ page }) {
    console.log(`the resault` + ' ' + page)
  
    return (
        <LayoutApp>
            <VideoIntro id='video-intro'>
                <Video id='videoIntro' autoPlay muted loop playsInline src={videoPlaceholder}></Video>
                <IntroTitleStyle id="inrot-title">
                    <HeaderIntroTitle id='intro-title-name'>
                        <span id='intro-span'>P</span>
                        <span id='intro-span'>U</span>
                        <span id='intro-span'>L</span>
                        <span id='intro-span'>P</span>
                        <span id='intro-span'>O</span>
                        {/* {page.titleHome} */}
                        {/* {page.data.titleHome} */}
                        {/* <PrismicText field={page.data.introTitle} /> */}
                    </HeaderIntroTitle>

                    <Link href='#'>

                        <EnterLink id='link'>
                            Enter the ocean
                        </EnterLink>
                    </Link>
                </IntroTitleStyle>

            </VideoIntro>

        </LayoutApp >
    )
}

export async function getStaticProps({ previewData }) {
    const client = createClient({ previewData })

    const page = await client.getByUID('page', 'home')

    return {
        props: { page }, // Will be passed to the page component as props
    }
}

```

but the result continue **undefined** 😵‍💫

---

<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:** [March 22, 2022, 1:48pm UTC](https://community.prismic.io/t/error-fetch-data-with-nextjs/9441/9 "2022-03-22T13:48:09Z")

</div>

Hello @itsalimanuel

You have changed the query method in your code. I think you are querying a singleton Custom Type is `homepage.` The working code for me for this homepage is:

```auto
export async function getStaticProps({ previewData }) {
    const client = createClient({ previewData })
    const page = await client.getSingle('homepage')
    console.log("page is", page.data)
    return {
        props: { page },
    }
}

```

Now you need to hit the URL: `http://localhost:3000/home` to see your homepage.

Thanks,  
Priyanka

---

<div class="post-metadata">

**Author:** ![itsalimanuel](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/itsalimanuel/32/4166_2.png) [@itsalimanuel](https://community.prismic.io/u/itsalimanuel)\
**Post date:** [March 22, 2022, 3:18pm UTC](https://community.prismic.io/t/error-fetch-data-with-nextjs/9441/10 "2022-03-22T15:18:09Z")

</div>

Thank you @Priyanka , works now 🎉

---

<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:** [March 22, 2022, 3:59pm UTC](https://community.prismic.io/t/error-fetch-data-with-nextjs/9441/11 "2022-03-22T15:59:46Z")

</div>

Great @itsalimanuel. Feel free to reach out to us if you have any other questions.