javascript - Como usar fetch() a partir da pasta pública em NextJS?

Tenho o seguinte cenário de caso de uso. Tenho um web worker dentro do qual preciso buscar uma imagem que está localizada na pasta public do NextJS para a converter em blob.

Neste momento, executar fetch('public/images/myImage.png'); ou fetch('/images/myImage.png'); leva a um erro:

Erro: TypeError: Falha ao executar 'fetch' no 'WorkerGlobalScope': Falha ao analisar a URL de /images/ui/background_fire.jpg

Então suponho que não está a ser resolvido corretamente como seria, por exemplo, no src de uma imagem?

Resposta #1

@NasiruddinSaiyed a resposta está um pouco desatualizada, então aqui está a resposta de 2021:

Documentação de polyfills do lado do servidor do NextJS

Polyfills do Lado do Servidor

Além do fetch() no lado do cliente, o Next.js fornece polyfills para fetch() no ambiente Node.js. Pode usar fetch() no seu código de servidor (como em getStaticProps) sem precisar de polyfills como isomorphic-unfetch ou node-fetch.

Portanto, deve funcionar logo à partida

Resposta #2

De acordo com os documentos oficiais, precisa de usar o isomorphic-unfetch.

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

Instala-o

$npm install --save isomorphic-unfetch

ou

$yarn add isomorphic-unfetch

Agora pode usá-lo desde getInitialProps até qualquer lugar no seu componente.

Exemplo ::

`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)
  };
};

Feliz programação!!