CODEWITHSUNDEEP
reactjsnext.jssingle-page-applicationvercel
Max Max
Max Max

Reputation: 43

How to store local files in public folder in NextJS?

I have a NextJs project, today I tried to deploy it and found a lot of mistakes.

I have many images and pdf/doc files and I need to show img and download files with button.

All files stored in Public folder enter image description here

But I get this error with the files (pdf/doc) locally Module not found: Can't resolve '/catalogs/.... And get the same error with images in deploy.

I tried to move all files to public folder, but it doesn't help.

Upvotes: 1

Views: 5986

Answers (1)

illia chill
illia chill

Reputation: 2056

The public folder is the "right" way to place static pdfs/images.

Imaging you have placed all your PDFs in the /public/pdf folder and your project hosted at http://localhost:3000

You can access your images/pdf from the browser by typing

http://localhost:3000/pdf/{file_name}.pdf

For the component side, you don't need to type basePath (e.g. localhost), you can do it directly like this.

import Link from 'next/link'


...

<Link href="/pdf/file_name.pdf" locale={false}>...</Link>

Upvotes: 1

Related Questions