I'm working on my nextjs app and I'm trying to implement a button that, when clicked, downloads a PDF file. I've stored the PDF in public/documents/, imported it, and added it to the link href. However, when I click on the button, I'm encountering a 404 error page, even though the file exists and I can see it in Chrome inspect > sources (in _next). I'm using webpack file-loader for this setup.
Here is my Next configuration:
const nextConfig = {
output: "standalone",
webpack: (config, options) => {
config.module.rules.push({
test: /\.(png|gif|mp4|pdf)$/i,
use: [
{
loader: "file-loader",
options: {
name: "[name].[ext]",
},
},
],
});
return config;
},
};
This is a snippet of my page code:
import LeaderInstructions from "@documents/leaders-instructions.pdf";
...
//other codes
...
<a
href={LeaderInstructions}
target="_blank"
>
Can anyone provide guidance on how to resolve this issue?