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=".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.

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./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.

• javascript
• wordpress
• next.js
• server-side-rendering

3 Answers 3

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?

2. 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} />

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.

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

example:

import Image from 'next/image'

...
..
.

<Image
    src={"the link of the image"}
    alt=""
    width="300"
    height="300"
/>