javascript - Wie kann man in NextJS mit fetch() aus dem öffentlichen Ordner abrufen?

Ich habe folgendes Anwendungsfallszenario. Ich habe einen Web Worker, innerhalb dessen ich ein Bild abrufen muss, das sich im public-Ordner von NextJS befindet, um es in einen Blob zu konvertieren.

Im Moment führt das Ausführen von fetch('public/images/myImage.png'); oder fetch('/images/myImage.png'); zu einem Fehler:

Fehler: TypeError: Ausführung von 'fetch' auf 'WorkerGlobalScope' fehlgeschlagen: Konnte URL aus /images/ui/background_fire.jpg nicht analysieren

Also nehme ich an, dass es nicht richtig aufgelöst wird, wie es zum Beispiel im src eines Bildes der Fall wäre?

Antwort #1

@NasiruddinSaiyed Die Antwort ist etwas veraltet, daher hier die Antwort von 2021:

NextJS Server-seitige Polyfills Dokumentation

Serverseitige Polyfills

Zusätzlich zu fetch() auf der Client-Seite stellt Next.js fetch() in der Node.js-Umgebung bereit. Sie können fetch() in Ihrem Server-Code (wie zum Beispiel getStaticProps) verwenden, ohne Polyfills wie isomorphic-unfetch oder node-fetch zu benutzen.

Also sollte es einfach so funktionieren

Antwort #2

Laut offiziellen Dokumenten müssen Sie isomorphic-unfetch verwenden.

It's a simple implementation of the browser fetch API, but works both in client and server environments.

Installiere es

$npm install --save isomorphic-unfetch

oder

$yarn add isomorphic-unfetch

Jetzt können Sie es von getInitialProps in jeder beliebigen Stelle Ihrer Komponente verwenden.

Beispiel ::

`import fetch from 'isomorphic-unfetch';`

// ... Index component code

Index.getInitialProps = async function() { 

  const res = await fetch('https://api.tvmaze.com/search/shows?q=batman');
  const data = await res.json();
    
  console.log(`Show data fetched. Count: ${data.length}`);
    
  return {
    shows: data.map(entry => entry.show)
  };
};

Viel Spaß beim Programmieren!!