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.
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 },
});
});
});
}