How to fix NextJS enoent?

You guys know what may cause this error? Help will be highly appreciated. This error suddenly started and can't figure out why. Any source I find related to this topic also didn't help, such as npm clear cache etc.

error - uncaughtException: Error: ENOENT: no such file or directory, open 'C:\Users\merth\Documents\GitHub\nextjs\.next\cache\images\dGhpP2cdrThITYfJW5zYTASPDxgkrHRsKGV+DHjA9zg=\0.1644007067863.49adoDywz9oh2itwLAOxco3SX+8Yk8UjPaOwcMHXKIw=.webp'
error - uncaughtException: Error: ENOENT: no such file or directory, open 'C:\Users\merth\Documents\GitHub\nextjs\.next\cache\images\4XzO9vkSresQcu4SX685Pbl3Cb8+GLnoRVSy6EWXt5Y=\0.1644007067864.yV8JGEcK4N5RHfOP1YCy50EVKU0ZtA8shhISYdcO9cQ=.webp'
error - uncaughtException: Error: ENOENT: no such file or directory, open 'C:\Users\merth\Documents\GitHub\nextjs\.next\cache\images\P0c16eKt464UeqAGlMPK9QsWSCanffokfdynMp877IQ=\0.1644007067876.CuEqtaf2wyvhSmvWM7JEkbGjhFFUEs9KqFQ-2+tjghc=.webp'
error - uncaughtException: Error: ENOENT: no such file or directory, open 'C:\Users\merth\Documents\GitHub\nextjs\.next\cache\images\-Q0UZI-9z63T0kTLDD9WriKzJMRU4ezA+i4LmDQDXlM=\0.1644007067831.UiZIuijWkV1W07Pfo02XjEvnKc-DlxzW0O3wLCqz-hM=.webp'
error - uncaughtException: Error: ENOENT: no such file or directory, open 'C:\Users\merth\Documents\GitHub\nextjs\.next\cache\images\INra01gHa2-vzBW63AhvPMn+t5fHxh8cp5pivirhiRA=\0.1644007067837.NvV+tAwZT5uhgQUBvxIUsk1gLqUnDgarmgOlSAv2Oos=.webp'
error - uncaughtException: Error: ENOENT: no such file or directory, open 'C:\Users\merth\Documents\GitHub\nextjs\.next\cache\images\5IOk0AWjSzsxeWX3JUtAxUOeibv3HkY1OaLS3xWD1P0=\0.1644007067823.BNmZ25sRS8r8aebBo4tpl77uOHrZp-hK7huYDJCA2YI=.webp'

Some of my image components;

<figure className='w-full h-full overflow-hidden bg-white rounded-sm lg:rounded-r-none'>
     <div className='relative w-full h-full transition-transform lg:group-hover:scale-105 transform-gpu'>
           {props.page.card.thumbnail && (
                 <>
                     <Image
                         layout='fill'
                         // width={752}
                         // height={490}
                         objectFit='cover'
                         objectPosition='center'
                         src={props.page.card.thumbnail}
                         alt={
                             props.page.card.title && 
                             props.page.card.title[props.locale]
                             }
                         loading='lazy'
                         placeholder='blur'
                         blurDataURL={props.page.card.thumbnail}
                         quality={75}
                      />
                    </>
             )}
    </div>
</figure>

--

"dependencies": {
        "@google/model-viewer": "^1.10.1",
        "@tailwindcss/aspect-ratio": "^0.4.0",
        "@tailwindcss/forms": "^0.4.0",
        "@tailwindcss/line-clamp": "^0.3.1",
        "autoprefixer": "^10.4.2",
        "eslint": "7.32.0",
        "eslint-config-next": "^0.2.4",
        "js-cookie": "^3.0.1",
        "next": "^12.0.10",
        "nprogress": "^0.2.0",
        "postcss": "^8.4.5",
        "react": "^17.0.2",
        "react-accessible-accordion": "^4.0.0",
        "react-dom": "^17.0.2",
        "react-share": "^4.4.0",
        "react-social-icons": "^5.10.0",
        "serverless-mysql": "^1.5.4",
        "sharp": "^0.30.0",
        "swr": "^1.2.1",
        "tailwindcss": "^3.0.13",
        "tailwindcss-animation-delay": "^1.0.7"
    },

try revert "next" back to 12.0.9

"next": "^12.0.9",

solution came from here https://github.com/vercel/next.js/issues/33860