title: Error during deplyment in Next.js app // getStaticPaths is failing
body: <p>I am having an issue when trying to deploy my app using Vercel. I am using dynamic routes for my projects pages, therefore I am using getStaticPaths and getStaticProps in the page. The code should call an API that retrieve my records from Airtable, however, it was failing as we should not call the APIs in there, so I have replaced the API call for the API code, it is working for me in localhost, even when I use npm run build. However, when I push my code to GH, Vercel cannot build it with the following error:</p>
  <p>message: 'there was an error retrieving the records for paths',
  e: AirtableError {
  error: 'NOT_FOUND',
  message: 'Could not find what you are looking for',
  statusCode: 404
  }
  }</p>
  <blockquote>
  <p>Build error occurred
  TypeError: Cannot read property 'map' of undefined
  at getStaticPaths (/vercel/path0/.next/server/pages/projects/[project].js:97:29)
  at processTicksAndRejections (internal/process/task_queues.js:95:5)
  at async buildStaticPaths (/vercel/path0/node_modules/next/dist/build/utils.js:498:31)
  at async /vercel/path0/node_modules/next/dist/build/utils.js:641:119
  at async Span.traceAsyncFn (/vercel/path0/node_modules/next/dist/trace/trace.js:75:20) {
  type: 'TypeError'
  }
  Error: Command &quot;npm run build&quot; exited with 1</p>
  </blockquote>
  <pre><code>import Image from &quot;next/image&quot;;
  import Link from &quot;next/link&quot;;
  import { projectsTable } from &quot;../../airtable/airtable&quot;;
  
  export const getStaticPaths = async () =&gt; {
    const fetchProjects = async () =&gt; {
      try {
        let projects = [];
        await projectsTable.select().eachPage((records, fetchNextPage) =&gt; {
          records.forEach((record) =&gt; {
            projects.push(record.fields);
          });
          fetchNextPage();
        });
        return projects;
      } catch (e) {
        return console.log({
          message: &quot;there was an error retrieving the records for paths&quot;,
          e,
        });
      }
    };
    const projects = await fetchProjects();
    const paths = projects.map((project) =&gt; {
      return {
        params: { project: project.name.toLowerCase().toString() },
      };
    });
    return {
      paths,
      fallback: false,
    };
  };
  
  
  export const getStaticProps = async (context) =&gt; {
    const fetchProjects = async () =&gt; {
      try {
        let projects = [];
        await projectsTable.select().eachPage((records, fetchNextPage) =&gt; {
          records.forEach((record) =&gt; {
            projects.push(record.fields);
          });
          fetchNextPage();
        });
        return projects;
      } catch (e) {
        return console.log({
          message: &quot;there was an error retrieving the records for props&quot;,
          e,
        });
      }
    };
    const projectName = context.params.project;
    const projects = await fetchProjects();
    const project = projects.find(
      (project) =&gt; project.name.toLowerCase().toString() == projectName
    );
    return {
      props: { project },
    };
  };
  </code></pre>
  <p>The code is just fetching the array of projects and use the name to find the correct one and use it as props to generate the rest of the page content. I tried to debug it using console.log, but the projects array is correct when I try, and I dont get any other error T.T Could anyone help me with this? Anyone having same issue or maybe could spot the error in my code? Thank you a lot in advance!</p>