After writing my first blog post, I realised something critical about my blog; the images aren't working in production. Except that they are, but also they aren't. Complicated right? That's how I felt. For some absolutely bizarre reason the image on a specific blog page just wouldn't load on mobile. In fact, attempting to even load it on mobile would cause the server to crash and reboot. The exact same image on the 'All Posts' page was fine.
I turned off my Cloudflare proxy for some testing and that seemed to at least stop my site crashing, instead just causing the image to not be found (I guess I have some error handling to sort out there?). After two days of painful debugging I finally found the issue. I needed to install sharp. I noticed that the next/image src for my blog post image was trying to source a ridiculously sized version of my image, even though the max width on the site is around 1600px. I've also added more appropriate widths to my images just in case this helps.
npm install sharp
Next.js recommends sharp for production environments. So, if you're like me and that part of the documentation went over your head and you run into any image issues, give that a try!
Anyway, hopefully for the next few weeks I can focus on developing some new features. Till next time!