Call an API function during the Nextjs build process in getStaticProps

[smootok]

I want to run a build here is the code
pages/api/data.js

import data from "data/data.json";

export default function handler(req, res) {
  return res.status(200).json({ data });
}

pages/index.js

import axios from "axios";

import Home from "components/Home";

export default function HomePage() {
  return <Home />;
}

export const getStaticProps = async () => {
  const { data } = await axios("http://localhost:3000/api/data");
  return {
    revalidate: 1,
    props: data,
  };
};

The app works fine on dev mode but if I try to run a build it gives me this error

Automatically optimizing pages ...
Error occurred prerendering page "/". Read more: https://err.sh/next.js/prerender-error
Error: connect ECONNREFUSED 127.0.0.1:3000 at TCPConnectWrap.afterConnect [as oncomplete] (net.js:1141:16)

[jamesmosier]

You should not call Next API routes from within getStaticProps (or getStaticPaths) because those API routes do not exist at the time of build (because they haven't been deployed anywhere).

Instead, write your code directly in getStaticProps

[smootok]

thanks for your reply. I tried to run the code directly from getStaticProps but the problem is that I need to pass a local json file if I do it using es6 import it doesn't cause an incremental build on runtime when the json file change. how could I mimic fetching behavior without an API is it possible? or I'll need to host my json files on an external server?