So now that we understood how caching worked
and we fixed that problem related to it,
let's focus on that missing image.
Why was that image missing
when we added a new meal
whilst running this production server?
Well, the image was missing
because we store those images in this public folder
and they're in the images folder.
The problem with this approach just is that this folder
is available during development,
but for production,
it's actually copied into this .next folder
and it's this .next folder,
which also contains all those cached pages
and so on, hat will be used
by the running NextJS production server.
If you then thereafter add new images
into the public folder, those will be ignored
because the production server doesn't care.
So when you deploy your next project,
you therefore technically don't even have
to deploy the public folder.
NextJS is not interested in it.
Now, that's, of course, a problem for our app here
because we do store images in that public folder.
Well, this behavior is described
in the official NextJS documentation
and there they therefore recommend
that you should store any files that are generated
at run time, essentially, using extra file storage services
like AWS S3.
Now, since working with a provider like S3
is now really a bit beyond the scope
of this course, we'll ignore this problem here.
However, after this lecture, in the next lecture,
you'll find a text lecture where I do describe
how you could use AWS S3
for storing and serving your user-generated images.
You don't have to implement that.
You can ignore it for this demo,
but if you're interested in learning how that would work,
that next lecture is for you.