reading all files in the public folder next.js

Question

I have a folder called Songs in the Public folder. During render time I would like to render them:

const renderSongs = () => {
 [ array of song files ].map(song => {
  ...
 })
}

tho I dont think I can use fs in next.js, so how would i do this?

What type of files are they? How do you want to render them exactly? — juliomalves, Sep 10 '21 at 17:03
Does this help answer your question [Importing multiple files in react](https://stackoverflow.com/questions/44607396/importing-multiple-files-in-react)? — juliomalves, Sep 11 '21 at 16:38

score 0 · Answer 1 · answered Sep 10 '21 at 05:15

Note: You can import modules in top-level scope for use in getServerSideProps. Imports used in getServerSideProps will not be bundled for the client-side.

This means you can write server-side code directly in getServerSideProps. This includes reading from the filesystem or a database.

Source: https://nextjs.org/docs/basic-features/data-fetching#getstaticprops-static-generation

or

https://nextjs.org/docs/basic-features/data-fetching#getserversideprops-server-side-rendering

So basically you can use fs, but only in the getStaticProps or getServerSideProps, which will be run at build time, or on the serverside.

reading all files in the public folder next.js

1 Answers1