7

I have been building a portfolio with a headless WordPress and NextJs. I wrote my own functions to get data from the GraphQl endpoint. Everything works fine. But I have media files (images, pdfs, etc..) that are stored on the WordPress CMS and imported as links to the next.Js (imported as external images). for example:

<img src="https://wordpresscms.mywebsite.com/uploads/2020/02/myimage.png" />

But I want the assets to be hosted on the nextJs website and automatically updated on every build. Is there a way to do that automatically in Next.Js? Or is this already done when I deploy my website to production?

The scenario in my mind:

  1. I upload the assets to the WordPress cms.
  2. NextJs gets the JSON data from WordPress which includes links to external assets (using the GraphQL API on build time (getStaticProps))
  3. NextJs downloads the assets.
  4. NextJs replaces the external URLs with local URLs (hosted on the same host as my NextJs website).

Thanks.

juliomalves
  • 42,130
  • 20
  • 150
  • 146
Basel Akasha
  • 1,108
  • 1
  • 11
  • 25

3 Answers3

2

I can see two solutions that may interest you:

  1. More similar to what you explained

after step 2. - write a function that will be used inside getStaticProps, that will map through the JSON with links to external assets, fetch each asset an save them as files in an array or a dictionary, pass that object to your page and distribute it through the app.

This will fetch all the assets at each build and display wherever you put them, however it won't update the external URLs as you wanted - you need to pass the files from getStaticProps to every element you need this assist in.

This may help you start: How can I convert an image into Base64 string using JavaScript?

  1. Way simpler: after step 2. - just pass that parsed JSON with all the image urls, use the urls to display assets for example:

    <img src={parsedJSON.someURL} />

beeinger
  • 141
  • 1
  • 4
  • The first idea is interesting. I am already doing what you described in step 2. But the point is that I don't want to use my WordPress CMS in production (when displaying the images) I can build on both ideas and make a function which fetches images from URLs and transfer them to base64. like: – Basel Akasha Feb 18 '21 at 20:05
  • I thought something would already exist to establish that (like a nextJs plugin) so I don't have to use the function every time I add an img tag. – Basel Akasha Feb 18 '21 at 20:10
  • It's a very specific use case I have never seen a similar case before, I don't think there is a NextJs plugin for that – beeinger Feb 19 '21 at 08:47
  • This is really a missing feature. I've seen setups where the headless CMS is private and only the build process has access to it. Here it's important that the build can download the images to store them locally. – Sascha Nov 15 '21 at 10:19
1

Update: Next.js has a built-in tag <Image />. It preloads the images and has lazy loaded and many nice features. Link: https://nextjs.org/docs/api-reference/next/image

example:

import Image from 'next/image'

...
..
.

<Image
    src={"the link of the image"}
    alt=""
    width="300"
    height="300"
/>
Basel Akasha
  • 1,108
  • 1
  • 11
  • 25
0

Instead of modify your NextJS application to download and reupload the images on its images folder, better to modify upload function in your wordpress, so when wordpress call the upload function, it is also copy the uploaded image to your NextJS directory.

Darryl RN
  • 7,432
  • 4
  • 26
  • 46
  • The main problem is that my NextJs website is hosted on a different host than my WordPress CMS – Basel Akasha Feb 18 '21 at 19:58
  • Also, I would need to find a way to trigger NextJs build on every image upload. – Basel Akasha Feb 18 '21 at 20:07
  • you will need CI/CD automation to listen and trigger NextJS build when it receives image from your WP. I assume you will trigger NextJS build manually for your scenario (point no. 2)? IMHO, its still achievable to forward images received by your WP to your NextJS accross different host, by sending this image via API request then the CI/CD will act upon this trigger. – Darryl RN Feb 18 '21 at 20:30