Currently, I am using Next.js 14 for my project.
Suddenly, there has been an issue where some images are not loading on my local setup. However, the images load fine on the preview and production branches on Vercel.
Upon checking my console, I noticed the following error:
TypeError: fetch failed
at node:internal/deps/undici/undici:12442:11
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async imageOptimizer (C:\git\project_name\node_modules\next\dist\server\image-optimizer.js:560:29)
at async cacheEntry.imageResponseCache.get.incrementalCache (C:\git\project_name\node_modules\next\dist\server\next-server.js:181:65)
at async C:\git\project_name\node_modules\next\dist\server\response-cache\index.js:90:36
at async C:\git\project_name\node_modules\next\dist\lib\batcher.js:41:32 {
cause: Error: certificate has expired
at TLSSocket.onConnectSecure (node:_tls_wrap:1674:34)
at TLSSocket.emit (node:events:519:28)
...
I'm unsure about the exact solution to this problem. I searched on ChatGPT and other platforms which suggested renewing my certificate. However, I don't recall setting up a certificate initially. I also attempted using Next.js experimental-https, but the error persisted. I even tried running the command:
mkcert -install
mkcert localhost
Unfortunately, I still encountered a certificate error. Another approach I took was deleting my .next folder and rebuilding it, but the issue remains unresolved.
If there are any other suggestions or potential solutions you could provide, I would greatly appreciate it!