reactjsnext.jssingle-page-applicationvercel

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.

Solution

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