After building my next application by running npm run build, all the images in the public folder are being stored as static images which I believe is how it is expected to work. However, I want to access the images in the public directory from the .next folder as I am adding new images to it every time.
Here is the folder structure
If it requires any change to happen in the folder structure like moving the public folder to any other location or making a new directory, it would still be fine.
Here you can find your solution in NextJs docs: https://nextjs.org/docs/basic-features/static-file-serving
"Next.js can serve static files, like images, under a folder called public in the root directory. Files inside public can then be referenced by your code starting from the base URL (/).
For example, if you add an image to public/me.png, the following code will access the image:
import Image from 'next/image'
function Avatar() {
return <Image src="/me.png" alt="me" width="64" height="64" />
}
export default Avatar
Note: next/image requires Next.js 10 or later.
"