1

I have created an api route to download a CSV file and I am getting this error when using Next Link. I cannot just switch to because then my application will not build, so my hands are tied. The component is simple

const DownloadCsvPage = () => {
  return (
    <section className="w-full h-screen grid place-content-center">
      <Link href="/api/db-to-csv">
        <a className="px-20 py-9 border text-black no-underline">
          Download CSV
        </a>
      </Link>
    </section>
  );
};

I tried to follow this article https://www.loudnoises.us/solving-next-static-pages-js-404-not-found/ but setting href to current page path and as to the path of api route only appended the api routes url to the localhost but that did not trigger the download. Like

   <Link href="/download" as="/api/db-to-csv">
        <a className="px-20 py-9 border text-black no-underline">
          Download CSV
        </a>
      </Link>

After reading this solution https://exerror.com/js-file-gets-a-neterr_aborted-404-not-found/ i thought that moving the file I want to download to the public folder would do the job but it did not. Thanks

seven
  • 1,183
  • 14
  • 33
  • Is the CSV file hosted in your Next.js app? Could you not serve the file from the `public` folder, and just link to it instead? E.g. `Download CSV`. – juliomalves Jul 18 '22 at 22:49
  • 1
    hi @juliomalves i can't because this file is generated on the fly so I need to make this call to get data drom db – seven Jul 19 '22 at 06:39

1 Answers1

0

If you want to call the API, its better to use normal div tag and add onClick event handler and attach a function to it which will call your API with the help of fetch or axios and in that function you can use .then(result) and .catch(error) method to handle the response for you API accordingly.

Aamir Khan
  • 111
  • 4