So I wanna add a little image slideshow here,
which basically automatically goes through some food images
that should show up here.
And for that, we'll build a new component.
We could also build it in here,
but to keep that file relatively lean,
I will add a new component,
and I'll do that here in my root components folder.
There, I'll add a subfolder called images,
and in there, I'll add a image-slideshow.js file.
And now here, I actually already prepared the content
for this file for you, and you therefore find
my finished image-slideshow.js file attached,
and you can simply paste the content
of that file into your image-slideshow.js file.
Attached, you also find an image-slideshow.module.css file,
which you should add next to your JavaScript file.
Now, what's this JavaScript file doing, though?
Well, it's outputting some relatively simple markup
where I have a div, and in that div,
I go through a bunch of images
and output the NextJS image component for every image.
Now, those images are simply being imported
from the assets folder, so we're talking about the images
stored in that assets folder.
Not all of them, but some of them,
all those food images specifically.
And then I'm setting up this images array here,
which contains all these images
and then some alt text for the images,
and then I'm outputting them here.
Now, the most interesting part therefore
is what we have above that JSX code,
because here, I'm using use state,
so the standard use state hook provided by React,
to control some state which changes over time.
To be precise, it changes with help of use effect
every five seconds with help of set interval.
And that interval is cleared
whenever the component unmounts
by using this cleanup function of use effect.
And that's standard use effect and standard use state
as you know it from vanilla JavaScript.
Nothing NextJS specific here.
The logic inside of this interval code
here inside of use effect is simply that we change the index
of the visible image every five seconds,
and we therefore cycle through all those images.
That's all we're doing here.
With that, we can go to that page.js file to that div here
where I'm saying slideshow,
and in there, we can now output
that image slideshow component.
Of course, you also must add that import, though.
But if you try to do that,
you'll notice that you get an error
if you wanna preview the site.
There in that error, you're learning
that we're importing a component that needs use state
and that that only works in a client component,
but that none of its parents are marked with use client,
so they're in a server component.
And what does that now mean?