Wie kann ich Next.Js dazu bringen, alle externen Assets herunterzuladen, die ich auf meiner Website verwendet habe, und sie lokal bereitzustellen?

Ich habe ein Portfolio mit Headless WordPress und NextJs aufgebaut. Ich habe meine eigenen Funktionen geschrieben, um Daten vom GraphQl-Endpunkt abzurufen. Alles funktioniert gut. Aber ich habe Mediendateien (Bilder, PDFs usw.), die auf dem WordPress-CMS gespeichert sind und als Links in die next.Js importiert werden (als externe Bilder importiert). zum Beispiel:

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

Aber ich möchte, dass die Assets auf der nextJs-Website gehostet und bei jedem Build automatisch aktualisiert werden. Gibt es eine Möglichkeit, dies automatisch in Next.Js zu tun? Oder ist dies bereits geschehen, wenn ich meine Website für die Produktion bereitstelle?

Das Szenario in meiner Vorstellung:

1. Ich lade die Assets in das WordPress-CMS hoch.
2. NextJs erhält die JSON-Daten von WordPress, die Links zu externen Assets enthalten (unter Verwendung der GraphQL-API zur Erstellungszeit (getStaticProps))
3. NextJs lädt die Assets herunter.
4. NextJs ersetzt die externen URLs durch lokale URLs (gehostet auf demselben Host wie meine NextJs-Website).

Vielen Dank.

Ich sehe zwei Lösungen, die Sie interessieren könnten:

1. Eher ähnlich wie du es erklärt hast

nach Schritt 2. – Schreiben Sie eine Funktion, die innerhalb von getStaticProps verwendet wird, die den JSON mit Links zu externen Assets zuordnet, jedes Asset abruft und als Dateien in einem Array oder einem Wörterbuch speichert, dieses Objekt an Ihre Seite übergibt und verteilt es über die App.

Dadurch werden alle Assets bei jedem Build abgerufen und angezeigt, wo immer Sie sie platzieren. Die externen URLs werden jedoch nicht wie gewünscht aktualisiert. Sie müssen die Dateien von getStaticProps an jedes Element übergeben, für das Sie diese Unterstützung benötigen.

Dies kann Ihnen beim Einstieg helfen: Wie kann ich ein Bild mit JavaScript in einen Base64-String konvertieren?

2. Viel einfacher: nach Schritt 2. – Übergeben Sie einfach das geparste JSON mit allen Bild-URLs, verwenden Sie die URLs, um beispielsweise Assets anzuzeigen:

   

Anstatt Ihre NextJS-Anwendung so zu ändern, dass sie die Bilder in ihrem Bilderordner herunterlädt und erneut hochlädt, ist es besser, die Upload-Funktion in Ihrer WordPress zu ändern. Wenn WordPress also die Upload-Funktion aufruft, wird das hochgeladene Bild auch in Ihr NextJS-Verzeichnis kopiert.

Update: Next.js hat ein eingebautes Tag <Image />. Es lädt die Bilder vor und hat Lazy Loading und viele nette Funktionen. Verknüpfung: https://nextjs.org/docs/api-reference/next/image

Beispiel:

import Image from 'next/image'

...
..
.

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