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?