0

I am getting issues while building new ISR/SSR pages with getStaticProps and getStaticPaths

Brief explanation: While creating ISR/SSR pages and adding new API route never existed before, building on Vercel fails because of building pages before building API routes (/pages/api folder)

Detailed explanation:

A. Creating next SSR page with code (/pages/item/[pid].tsx)

export async function getStaticProps(context) {
    const pid = context.params.pid;
    //newly created API route
    const res = await fetch(process.env.APIpath + '/api/getItem?pid=' + (pid));
    const data = await res.json();
    return {
        props: {item: data}
    }
}   
    
export async function getStaticPaths(context) {
    //newly created API route
    let res = await fetch(process.env.APIpath + '/api/getItemsList')
    const items = await res.json()
    
    let paths = []
    //multi-language support for the pages
    for (const item of items){
        for (const locale of context.locales){
            paths.push({params: {pid: item.url }, locale: locale})
        }
    }

    return { paths, fallback: false }
}

B. Local checks work, deploying to Vercel

C. During deploying Vercel triggers an error because trying to get data from the API route doesn't exist yet. (Vercel is deploying /pages/item/[pid].tsx first and /api/getItemsList file after). Vercel trying to get data from https://yourwebsite.com/api/getItemsList which does not exist.

Only way I am avoiding this error:

  • Creating API routes needed
  • Deploying project to Vercel
  • Creating [pid].tsx page/s and then deploy it
  • Deploying final version of code

The big issue with my approach is you are making 1 deployment you don't actually. The problems appears also while remaking the code for your API routes also.

Question: there is an way/possiblity to force Versel to deploy firstly routes and than pages?

Any help appreciated

illia chill
  • 1,652
  • 7
  • 11
  • 2
    Does this answer your question: [Fetch error when building Next.js static website in production](https://stackoverflow.com/questions/66202840/fetch-error-when-building-next-js-static-website-in-production)? Move the API routes logic inside `getStaticProps`/`getStaticPaths` directly. – juliomalves Feb 16 '22 at 12:05
  • Please search the SO thoroughly before you post a question. This way, we can make sure that there is only one place to look for a question and its answer. – sjsam Jul 23 '22 at 09:07

0 Answers0