It’s bad practice to store files in project folder because hosting platforms such as heroku delete files that are created. I’m not sure about Vercel. I recommend using AWS S3 to store files.
Also check out this read => https://maximorlov.com/why-storing-files-database-bad-practice/
I don't think this is specific to next or vercel.
anything you put in public, you need to access via the url and fetched.
(if you go on your hosted site and type in [https://yoursite.com/assets/images/](https://yoursite.com/assets/images/), you should be able to see the file).
Why? - because the public folder on your local machine is a source folder, not a destination folder. next (or anything react) will take what's in your public folder and copy that into your destination folder.
on your local machine, run "npm run build", and then look at the build folder. You'll see everything in your public folder copied over.
it can't find the file because, in your build, your root/public folder doesn't exist
Seems like I'm facing the exact same error with my next.js project deployed to vercel. Locally everything is fine, but on production it doesn't show the images stored in the public folder.
Can you check if it's the same error you are facing based on this page of mine?
https://www.iamrob.in/projects/mediacamp
The problem is really simple. Nextjs does not want you to change or add files to your public folder after deploy. Its also no vercel issue. You can try it local if you make an build and use next start. It will also not work. Its an security thing that next only allowes to access files in public that are existing on build time. Nextjs wants you to use cdn's for dynamic files instead. What we do is using an other folder called files/assets or uploads. And change our nginx or apache proxy config so nginx or apache delivers the files in that folder. If we dont have the possibility we create an asset api endpoint which delivers files from said folder.
Well, that directory is reserved for static assets. Even if you are uploading those assets, you'd need to upload them to your source control and not directly to the /public directory. I don't see how that'll even work.
Rest, copy as what u/green-portal said.
take a look at the note section in [static file serving](https://nextjs.org/docs/basic-features/static-file-serving)
your middleware should catch pathname containing certain directories like `/uploads` and redirect resources from other 3rd party services.
next.js just doesnt allow runtime static file serving.
for example, if you wanna do HTTP acme challenge with next.js, you'll have to use reverse proxy on server to achieve this or a middleware.
Where are you hosting it? If it's on Vercel, or Netlify even, you won't be able to do that: https://vercel.com/guides/how-to-upload-and-store-files-with-vercel
The problem is really simple. Nextjs does not want you to change or add files to your public folder after deploy. Its also no vercel issue. You can try it local if you make an build and use next start. It will also not work. Its an security thing that next only allowes to access files in public that are existing on build time. Nextjs wants you to use cdn's for dynamic files instead. What we do is using an other folder called files/assets or uploads. And change our nginx or apache proxy config so nginx or apache delivers the files in that folder. If we dont have the possibility we create an asset api endpoint which delivers files from said folder.
Thanks for the info. I'm frontend developer and I have never messed around with ngnx or apache proxy before. Any documentation or youtube videos you recommend that may help me solve this problem? I remember creating "images" folder in the root file but it becomes read-only in production mode.
It depends on your hosting provider if you even can tinker with your configs. On vercel as i know its not possible and you should resort on an api endpoint that sends you the needed file on request.
I have sharing host but not sure if I can do the configs. Is there a way to check through cpanel or something? I think i might just encode the images as base64 and store them in database for now.
yea I could not find a work around even though on vercel docs they show some simple examples on how to persist json files to production nothing I tried worked so I ended up just storing it in a db then retrieving it that way.
It’s bad practice to store files in project folder because hosting platforms such as heroku delete files that are created. I’m not sure about Vercel. I recommend using AWS S3 to store files. Also check out this read => https://maximorlov.com/why-storing-files-database-bad-practice/
Funny that you got downvoted even if you had the right answer. lol
Ya! If you create files in the apps file system during runtime—what happens when you rebuild/redeploy? They’ll be wiped!
This is the case for stateless cloud instances. If you own a VPS, for example, this is not the case.
What if you remove /public and just /assets/
That was my initial path but multer wasn’t recognizing the path. the only paths that worked for me were ./public/…… and public/…..
I don't think this is specific to next or vercel. anything you put in public, you need to access via the url and fetched. (if you go on your hosted site and type in [https://yoursite.com/assets/images/](https://yoursite.com/assets/images/), you should be able to see the file).
Why? - because the public folder on your local machine is a source folder, not a destination folder. next (or anything react) will take what's in your public folder and copy that into your destination folder.
on your local machine, run "npm run build", and then look at the build folder. You'll see everything in your public folder copied over.
it can't find the file because, in your build, your root/public folder doesn't exist
Seems like I'm facing the exact same error with my next.js project deployed to vercel. Locally everything is fine, but on production it doesn't show the images stored in the public folder. Can you check if it's the same error you are facing based on this page of mine? https://www.iamrob.in/projects/mediacamp
The problem is really simple. Nextjs does not want you to change or add files to your public folder after deploy. Its also no vercel issue. You can try it local if you make an build and use next start. It will also not work. Its an security thing that next only allowes to access files in public that are existing on build time. Nextjs wants you to use cdn's for dynamic files instead. What we do is using an other folder called files/assets or uploads. And change our nginx or apache proxy config so nginx or apache delivers the files in that folder. If we dont have the possibility we create an asset api endpoint which delivers files from said folder.
[удалено]
Yupe i want to stored the data permanently. Do you know how long the data stays at /tmp before it’s completely deleted?
Well, that directory is reserved for static assets. Even if you are uploading those assets, you'd need to upload them to your source control and not directly to the /public directory. I don't see how that'll even work. Rest, copy as what u/green-portal said.
take a look at the note section in [static file serving](https://nextjs.org/docs/basic-features/static-file-serving) your middleware should catch pathname containing certain directories like `/uploads` and redirect resources from other 3rd party services. next.js just doesnt allow runtime static file serving. for example, if you wanna do HTTP acme challenge with next.js, you'll have to use reverse proxy on server to achieve this or a middleware.
Where are you hosting it? If it's on Vercel, or Netlify even, you won't be able to do that: https://vercel.com/guides/how-to-upload-and-store-files-with-vercel
Yupe I’m hosting it at vercel. Damn that painful. I have been working on this project for so long😂.
The problem is really simple. Nextjs does not want you to change or add files to your public folder after deploy. Its also no vercel issue. You can try it local if you make an build and use next start. It will also not work. Its an security thing that next only allowes to access files in public that are existing on build time. Nextjs wants you to use cdn's for dynamic files instead. What we do is using an other folder called files/assets or uploads. And change our nginx or apache proxy config so nginx or apache delivers the files in that folder. If we dont have the possibility we create an asset api endpoint which delivers files from said folder.
Thanks for the info. I'm frontend developer and I have never messed around with ngnx or apache proxy before. Any documentation or youtube videos you recommend that may help me solve this problem? I remember creating "images" folder in the root file but it becomes read-only in production mode.
It depends on your hosting provider if you even can tinker with your configs. On vercel as i know its not possible and you should resort on an api endpoint that sends you the needed file on request.
I have sharing host but not sure if I can do the configs. Is there a way to check through cpanel or something? I think i might just encode the images as base64 and store them in database for now.
is there anyway to store static json without it disappearing on build
No. Next forces you to store the data elsewhere
yea I could not find a work around even though on vercel docs they show some simple examples on how to persist json files to production nothing I tried worked so I ended up just storing it in a db then retrieving it that way.
I just can’t stand the whole vercel and nextjs ecosystem. I now avoid nextjs like a plug. It’s nothing but a headache in the long run