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
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.