How to use getStaticProps without async/await?

Question

As a thought experiment and also to deepen my understanding of asynchronous programming, I would like to use the Next.JS getStaticProps method without utilizing aysnc/await syntax. In fact, I would like to do it using only callbacks. I am running into trouble and wondering if this is possible. I'm thinking it must be since async/await is just syntactic sugar for promises, which themselves are syntactic sugar for callback hell, correct? Here is my getStaticProps function:

export function getStaticProps() {
    let products;
    let productPath = path.join(process.cwd(), '/data/products.json')

    // the async call
    fs.readFile(productPath, 'utf-8', (err, data) => {
        if (err) throw err;
        products = JSON.parse(data);

    });
    return {
        props: { products }
    }
}

The return value must be an object with a props property, which itself has the data meant to be passed to page component for rendering. I am lost on how to accomplish this with just callbacks. I know async/await is much more straight forward, but again, I'd like to learn.

Answer 1

You need to return promise since your code is not synchronous. You can do it without await by creating the promise manually:

export function getStaticProps() {
  let productPath = path.join(process.cwd(), '/data/products.json');

  return new Promise((resolve, reject) => {
    fs.readFile(productPath, 'utf-8', (err, data) => {
      if (err) return reject(err);
      const products = JSON.parse(data);
      resolve({
        props: { products },
      });
    });
  });
}