1
00:00:00,000 --> 00:00:03,000
So now that we understood how caching worked

2
00:00:03,000 --> 00:00:06,000
and we fixed that problem related to it,

3
00:00:06,000 --> 00:00:09,000
let's focus on that missing image.

4
00:00:09,000 --> 00:00:11,000
Why was that image missing

5
00:00:11,000 --> 00:00:13,000
when we added a new meal

6
00:00:13,000 --> 00:00:15,000
whilst running this production server?

7
00:00:16,000 --> 00:00:18,000
Well, the image was missing

8
00:00:18,000 --> 00:00:21,000
because we store those images in this public folder

9
00:00:21,000 --> 00:00:24,000
and they're in the images folder.

10
00:00:24,000 --> 00:00:28,000
The problem with this approach just is that this folder

11
00:00:28,000 --> 00:00:31,000
is available during development,

12
00:00:31,000 --> 00:00:32,000
but for production,

13
00:00:32,000 --> 00:00:37,000
it's actually copied into this .next folder

14
00:00:37,000 --> 00:00:40,000
and it's this .next folder,

15
00:00:40,000 --> 00:00:43,000
which also contains all those cached pages

16
00:00:43,000 --> 00:00:46,000
and so on, hat will be used

17
00:00:46,000 --> 00:00:50,000
by the running NextJS production server.

18
00:00:50,000 --> 00:00:53,000
If you then thereafter add new images

19
00:00:53,000 --> 00:00:56,000
into the public folder, those will be ignored

20
00:00:56,000 --> 00:00:59,000
because the production server doesn't care.

21
00:00:59,000 --> 00:01:01,000
So when you deploy your next project,

22
00:01:01,000 --> 00:01:04,000
you therefore technically don't even have

23
00:01:04,000 --> 00:01:06,000
to deploy the public folder.

24
00:01:06,000 --> 00:01:08,000
NextJS is not interested in it.

25
00:01:10,000 --> 00:01:13,000
Now, that's, of course, a problem for our app here

26
00:01:13,000 --> 00:01:18,000
because we do store images in that public folder.

27
00:01:18,000 --> 00:01:21,000
Well, this behavior is described

28
00:01:21,000 --> 00:01:24,000
in the official NextJS documentation

29
00:01:24,000 --> 00:01:26,000
and there they therefore recommend

30
00:01:26,000 --> 00:01:31,000
that you should store any files that are generated

31
00:01:31,000 --> 00:01:36,000
at run time, essentially, using extra file storage services

32
00:01:36,000 --> 00:01:38,000
like AWS S3.

33
00:01:39,000 --> 00:01:42,000
Now, since working with a provider like S3

34
00:01:42,000 --> 00:01:45,000
is now really a bit beyond the scope

35
00:01:45,000 --> 00:01:48,000
of this course, we'll ignore this problem here.

36
00:01:48,000 --> 00:01:51,000
However, after this lecture, in the next lecture,

37
00:01:51,000 --> 00:01:54,000
you'll find a text lecture where I do describe

38
00:01:54,000 --> 00:01:57,000
how you could use AWS S3

39
00:01:57,000 --> 00:02:02,000
for storing and serving your user-generated images.

40
00:02:02,000 --> 00:02:05,000
You don't have to implement that.

41
00:02:05,000 --> 00:02:06,000
You can ignore it for this demo,

42
00:02:06,000 --> 00:02:10,000
but if you're interested in learning how that would work,

43
00:02:10,000 --> 00:02:12,000
that next lecture is for you.