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
unwilling-turquoise•5mo ago
The trick is that the 'src' directory is optional in Next.js....