I created a function in my utils file that is designed to find and retrieve the URLs of images stored within a specific folder on Firebase Storage. The folder path is "proj_name/screenshots/uid/" and it contains 8 images. I have imported this function into a Next.js [id] page using getServerSideProps(). However, when I try to output the length of the URL array using console.log, it always shows 0. What could be causing this issue?
Here is the code from the Utils file:
...
export const getImages = async (dir) => {
let data = []
const storage = getStorage()
const listRef = ref(storage, dir)
await listAll(listRef)
.then(res => {
res.items.forEach(itemRef => {
getDownloadURL(itemRef)
.then(url => {
data.push(url)
})
})
})
return data
}
And here is the code from the Next.js page file:
import { getItems, getImages } from "../../utils/firebase"
export const getServerSideProps = async (context) => {
const id = context.params.id
const item = await getItems(id)
const screenshots_urls = await getImages('proj_name/screenshots/' + id)
return{
props: { item, screenshots_urls }
}
}
const Details = ({ item, screenshots_urls }) => {
return (
<>
{
console.log(screenshots_urls.length)
}
</>
)
}
export default Details