CODEWITHSUNDEEP
javascriptwordpressnext.jsserver-side-rendering
Basel
Basel

Reputation: 1275

How can I make Next.Js download all the external assets I used in my website and serve them locally?

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.

Upvotes: 10

Views: 6472

Answers (3)

Basel
Basel

Reputation: 1275

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

Upvotes: 0

beeinger
beeinger

Reputation: 161

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

Upvotes: 2

Darryl RN
Darryl RN

Reputation: 8228

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.

Upvotes: 0

Related Questions