How to make a download from public directory (Next.js frontend)
I am using Next.js frontend and I want to add the user to download a pdf file. I created /src/public/a.pdf and put <a href="/a.pdf">xxxx</a> into the code. I always get 404. I checked every corner on the web. Can somebody point me in a direction how to do it correctly? Thanks,
V.
3 Replies
Hi @Vladimír Dubský. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
In Next.js, the
public
directory is used to serve static files. If you have a file named a.pdf
in your public
directory, you should be able to access it at the root of your domain, i.e., <http://localhost:3000/a.pdf
> if you're running your application locally.
However, you mentioned that your public
directory is located inside the src
directory (/src/public/a.pdf
). This could be the issue. The public
directory should be at the root level of your Next.js project, not inside the src
directory. So, your project structure should look like this:
Then, you can link to the PDF file in your component like this:
When you click the link, it should download the a.pdf
file. If you're still encountering a 404 error, make sure your server is running and the file a.pdf
is correctly placed in the public
directory.
Please note that the information provided is based on general Next.js knowledge and not directly extracted from the provided knowledge sources.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@872137862374633593> kapa.ai is still learning and improving, please let us know how it did by reacting below
fair-rose•6mo ago
The trick is that the 'src' directory is optional in Next.js....