1
00:00:00,000 --> 00:00:04,000
So I wanna add a little image slideshow here,

2
00:00:04,000 --> 00:00:07,000
which basically automatically goes through some food images

3
00:00:07,000 --> 00:00:09,000
that should show up here.

4
00:00:10,000 --> 00:00:13,000
And for that, we'll build a new component.

5
00:00:13,000 --> 00:00:14,000
We could also build it in here,

6
00:00:14,000 --> 00:00:17,000
but to keep that file relatively lean,

7
00:00:17,000 --> 00:00:18,000
I will add a new component,

8
00:00:18,000 --> 00:00:22,000
and I'll do that here in my root components folder.

9
00:00:22,000 --> 00:00:26,000
There, I'll add a subfolder called images,

10
00:00:26,000 --> 00:00:31,000
and in there, I'll add a image-slideshow.js file.

11
00:00:32,000 --> 00:00:35,000
And now here, I actually already prepared the content

12
00:00:35,000 --> 00:00:38,000
for this file for you, and you therefore find

13
00:00:38,000 --> 00:00:42,000
my finished image-slideshow.js file attached,

14
00:00:43,000 --> 00:00:45,000
and you can simply paste the content

15
00:00:45,000 --> 00:00:49,000
of that file into your image-slideshow.js file.

16
00:00:50,000 --> 00:00:54,000
Attached, you also find an image-slideshow.module.css file,

17
00:00:54,000 --> 00:00:57,000
which you should add next to your JavaScript file.

18
00:00:59,000 --> 00:01:02,000
Now, what's this JavaScript file doing, though?

19
00:01:02,000 --> 00:01:05,000
Well, it's outputting some relatively simple markup

20
00:01:05,000 --> 00:01:07,000
where I have a div, and in that div,

21
00:01:07,000 --> 00:01:09,000
I go through a bunch of images

22
00:01:09,000 --> 00:01:13,000
and output the NextJS image component for every image.

23
00:01:15,000 --> 00:01:18,000
Now, those images are simply being imported

24
00:01:18,000 --> 00:01:23,000
from the assets folder, so we're talking about the images

25
00:01:23,000 --> 00:01:25,000
stored in that assets folder.

26
00:01:25,000 --> 00:01:27,000
Not all of them, but some of them,

27
00:01:27,000 --> 00:01:30,000
all those food images specifically.

28
00:01:30,000 --> 00:01:32,000
And then I'm setting up this images array here,

29
00:01:32,000 --> 00:01:34,000
which contains all these images

30
00:01:34,000 --> 00:01:38,000
and then some alt text for the images,

31
00:01:38,000 --> 00:01:41,000
and then I'm outputting them here.

32
00:01:41,000 --> 00:01:43,000
Now, the most interesting part therefore

33
00:01:43,000 --> 00:01:47,000
is what we have above that JSX code,

34
00:01:47,000 --> 00:01:50,000
because here, I'm using use state,

35
00:01:50,000 --> 00:01:54,000
so the standard use state hook provided by React,

36
00:01:54,000 --> 00:01:57,000
to control some state which changes over time.

37
00:01:57,000 --> 00:02:01,000
To be precise, it changes with help of use effect

38
00:02:01,000 --> 00:02:04,000
every five seconds with help of set interval.

39
00:02:05,000 --> 00:02:07,000
And that interval is cleared

40
00:02:07,000 --> 00:02:09,000
whenever the component unmounts

41
00:02:09,000 --> 00:02:12,000
by using this cleanup function of use effect.

42
00:02:12,000 --> 00:02:16,000
And that's standard use effect and standard use state

43
00:02:16,000 --> 00:02:18,000
as you know it from vanilla JavaScript.

44
00:02:18,000 --> 00:02:21,000
Nothing NextJS specific here.

45
00:02:22,000 --> 00:02:25,000
The logic inside of this interval code

46
00:02:25,000 --> 00:02:30,000
here inside of use effect is simply that we change the index

47
00:02:30,000 --> 00:02:34,000
of the visible image every five seconds,

48
00:02:34,000 --> 00:02:37,000
and we therefore cycle through all those images.

49
00:02:37,000 --> 00:02:39,000
That's all we're doing here.

50
00:02:40,000 --> 00:02:45,000
With that, we can go to that page.js file to that div here

51
00:02:45,000 --> 00:02:48,000
where I'm saying slideshow,

52
00:02:48,000 --> 00:02:49,000
and in there, we can now output

53
00:02:49,000 --> 00:02:52,000
that image slideshow component.

54
00:02:52,000 --> 00:02:54,000
Of course, you also must add that import, though.

55
00:02:56,000 --> 00:02:59,000
But if you try to do that,

56
00:02:59,000 --> 00:03:01,000
you'll notice that you get an error

57
00:03:01,000 --> 00:03:03,000
if you wanna preview the site.

58
00:03:04,000 --> 00:03:06,000
There in that error, you're learning

59
00:03:06,000 --> 00:03:09,000
that we're importing a component that needs use state

60
00:03:09,000 --> 00:03:13,000
and that that only works in a client component,

61
00:03:13,000 --> 00:03:17,000
but that none of its parents are marked with use client,

62
00:03:17,000 --> 00:03:19,000
so they're in a server component.

63
00:03:20,000 --> 00:03:23,000
And what does that now mean?