Next.Js static site generation with headless CMS assets

Question

I'm using WordPress as a headless CMS for my website and I wish to generate a static website from my Next.js project. What I want to achieve is to be able to also copy the images and data from the wp-content folder to my next.js out folder, changing the urls (http://mywpsite.com/wp-content/uploads/2020/10/1.jpg etc.) in the built html files to /public/wp-content/uploads/2020/10/1.jpg.

Basically I'd want to export my Next project in a way that I'm also hosting the files that I have the project connected with. I also don't want to host my image assets from my headless CMS, but just from the outputed folder.

My stoneage man idea would be to download that folder manually and doing a find/replace on those files. Not knowing if this works, but I'm curious if someone else have thought about the same problem that I'm currenly in and has come up with a solution or knows in what direction I should go with this?

Answer 1

I faced the same issue but it wasn't with WordPress.

My problem: The next.js project needs to display book photos from Goodreads, user pictures from their Google profile.

My solution: I didn't want to develop my own solution to resolve it, it could cost me a lot of time with potential risks so that I used Cloudinary to manage the images:

• It has a free plan that allows you to store up to 11Gb
• I created rules for Auto upload mapping which allow me to download images from Google, Goodread to my Cloudinary on-the-fly. You can config to make sure Cloudinary only stores one file for the file from your WordPress rather than downloading and generating new files each time your user accessed the file again. You can see more information from their documentation here https://cloudinary.com/documentation/fetch_remote_images#auto_upload_remote_resources
• I stored Cloudinary URL to my database

Regards to the photo from Google, the Cloudinary upload URL looks like https://res.cloudinary.com/${cloudinaryStorageName}/image/upload/user-picture/${googlePictureId}

It worked well for me.