Next는 어떻게 만들까요?Js는 제가 제 웹사이트에서 사용한 모든 외부 자산을 다운로드하여 로컬에서 서비스합니까?

Next는 어떻게 만들까요?Js는 제가 제 웹사이트에서 사용한 모든 외부 자산을 다운로드하여 로컬에서 서비스합니까?

저는 헤드리스 워드프레스와 NextJs로 포트폴리오를 구축해 왔습니다.나는 GraphQl 엔드포인트에서 데이터를 얻기 위해 나만의 함수를 작성했습니다.모든 것이 잘 작동합니다.하지만 미디어 파일(이미지, pdfs 등)이 있습니다.WordPress CMS에 저장되어 다음 링크로 가져옵니다.Js(외부 이미지로 가져오기).예:

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

하지만 저는 자산이 다음 Js 웹사이트에서 호스팅되고 모든 빌드에서 자동으로 업데이트되기를 원합니다.다음에서 자동으로 수행할 수 있는 방법이 있습니까?Js? 아니면 운영 환경에 웹 사이트를 배포할 때 이미 수행된 작업입니까?

내 마음속의 시나리오는:

1. WordPress cms에 자산을 업로드합니다.
2. NextJs는 외부 자산에 대한 링크가 포함된 JSON 데이터를 WordPress에서 가져옵니다(구축 시간에 GraphQL API 사용(getStaticProps)).
3. NextJs는 자산을 다운로드합니다.
4. NextJs는 외부 URL을 로컬 URL(내 NextJs 웹 사이트와 동일한 호스트에서 호스팅됨)로 바꿉니다.

감사해요.

흥미를 끌 수 있는 두 가지 솔루션이 있습니다.

1. 당신이 설명한 것과 더 유사합니다.

2단계 후 - getStaticProps 내부에서 사용할 함수를 작성합니다. 이 함수는 외부 자산에 대한 링크가 있는 JSON을 통해 매핑되고 각 자산을 배열 또는 사전의 파일로 가져와 저장한 후 해당 개체를 사용자의 페이지로 전달하고 앱을 통해 배포합니다.

이렇게 하면 각 빌드의 모든 자산을 가져와 어디에 두든 표시되지만 외부 URL이 원하는 대로 업데이트되지는 않습니다. 정적 프로필의 파일을 필요한 모든 요소에 전달해야 합니다.

시작하는 데 도움이 될 수 있습니다.자바스크립트를 사용하여 이미지를 Base64 문자열로 변환하려면 어떻게 해야 합니까?

2. 훨씬 간단합니다. 2단계 후 - 구문 분석된 JSON을 모든 이미지 URL과 함께 전달하기만 하면 다음과 같은 URL을 사용하여 자산을 표시할 수 있습니다.

   <img src={parsedJ손.좀URL} />

이미지 폴더에 이미지를 다운로드하고 다시 업로드하도록 NextJS 응용 프로그램을 수정하는 대신 워드프레스에서 업로드 기능을 수정하는 것이 좋습니다. 따라서 워드프레스에서 업로드 기능을 호출하면 업로드된 이미지도 NextJS 디렉토리에 복사됩니다.

.:Next.js에는 기본 태그가 있습니다.<Image />이미지를 미리 로드하고 로드가 느리고 많은 기능이 있습니다.링크: https://nextjs.org/docs/api-reference/next/image

예:

import Image from 'next/image'

...
..
.

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

언급URL : https://stackoverflow.com/questions/66207361/how-can-i-make-next-js-download-all-the-external-assets-i-used-in-my-website-and