Search code examples
next.jsrendervercel

Error occurred prerendering page "/page/[...uri].js


Guys i got strange error when i try to run "npm run build" in my nextjs,

My file is in

pages/agenda/[...uri].tsx

The part of the code who run the problem

export async function getStaticProps({ params }: { params: any }) {
  const tournamentData = await getTournamentData(params.uri[0])
  return {
    props: {
      tournamentData
    }
  }
}

export async function getStaticPaths() {
  const paths = await getAllTournamentIds()
  return {
    paths,
    fallback: false
  }
}

The error:

info  - Collecting page data  
[    ] info  - Generating static pages (0/14)
Error occurred prerendering page "/noticia/[object Object]/1". Read more: https://nextjs.org/docs/messages/prerender-error
FetchError: invalid json response body at https://api.torneio.app/v1/news?id=[object%20Object] reason: Unexpected token < in JSON at position 0
    at /Users/begomarcus/Workspace/projects/platform-beach-tennis/nextjs/node_modules/next/dist/compiled/node-fetch/index.js:1:49606
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async getPostData (/Users/begomarcus/Workspace/projects/platform-beach-tennis/nextjs/.next/server/chunks/776.js:82:19)
    at async getStaticProps (/Users/begomarcus/Workspace/projects/platform-beach-tennis/nextjs/.next/server/pages/noticia/[...uri].js:254:22)
    at async renderToHTML (/Users/begomarcus/Workspace/projects/platform-beach-tennis/nextjs/node_modules/next/dist/server/render.js:488:20)
    at async /Users/begomarcus/Workspace/projects/platform-beach-tennis/nextjs/node_modules/next/dist/export/worker.js:253:36
    at async Span.traceAsyncFn (/Users/begomarcus/Workspace/projects/platform-beach-tennis/nextjs/node_modules/next/dist/trace/trace.js:79:20)

I really dont understand what's happen here, any clue will help a lot!


Solution

  • Thanks to @juliomalves I review my file where i request the data from API and found a error with my map

    Before was:

    const postsData = data.map(({ id: string, slug: string }) => {
        return {
          params: {
            uri: [`${id}`, `${slug}`]
          }
        }
      })
    

    So i Changed to:

    const postsData = data.map(({ id, slug }: { id: string, slug: string }) => {
        return {
          params: {
            uri: [`${id}`, `${slug}`]
          }
        }
      })
    

    Little mistake with typescript typing and right parameters.