I have the follow assets stored in my public/testfiles folder:
const cycleImages = {
1:'/testfiles/0090.jpg',
2:'/testfiles/0091.jpg',
3:'/testfiles/0092.jpg',
4:'/testfiles/0093.jpg',
5:'/testfiles/0094.jpg',
6:'/testfiles/0095.jpg',
7:'/testfiles/0096.jpg',
8:'/testfiles/0097.jpg',
9:'/testfiles/0098.jpg',
10:'/testfiles/0099.jpg',
11:'/testfiles/0100.jpg',
12:'/testfiles/0101.jpg',
13:'/testfiles/0102.jpg',
14:'/testfiles/0103.jpg',
15:'/testfiles/0104.jpg',
16:'/testfiles/0105.jpg',
17:'/testfiles/0106.jpg',
18:'/testfiles/0107.jpg',
19:'/testfiles/0108.jpg',
20:'/testfiles/0109.jpg',
}
I have used this to test some jsx logic but now I am ready to extend it to the rest of my pages. But before I do, I have thought about whether there is an efficient way to grab the assets from the public folder without manually typing everything as object literal.
I have used fs.readdir in getStaticProps but when I passed the props, it became undefined.
import { promises as fs } from 'fs'
import path from 'path'
//...
export async function getServerSideProps() {
const FOLDER_NAME = "testfiles"
const DIRECTORY = path.join(process.cwd(), "public", FOLDER_NAME)
const posts = fs.readdirSync(DIRECTORY).filter(post => fs.lstatSync(path+post).isFile())
return {
props: {
posts: await Promise.all(posts),
},
}
}
Is there any way to access the files in the public folder in getStaticProps without resulting in an undefined?