In this section we'll take a deeper
look at Client Components.
So far everything in our pages is fully static.
The only interactivity is that users
can navigate to different pages,
and that does use client-side navigation,
but it's all managed by Next.js automatically.
Now, let's say we'd like to
add a button to this page
to make it easier for our users
to share a link to this review.
Many websites show a Share link
button on each article.
This one is just an example of
a blog hosted on Substack.
Users can click this Share button,
and this shows various options.
One of them is "Copy link",
that simply copies the page URL to the clipboard.
So maybe we could add something
like this to our own website.
Let's go and create a new component
for this functionality.
Under "components" we can add a file,
let's call it "ShareLinkButton.jsx".
And in this file we'll export
a regular function component,
again called ShareLinkButton.
Let's start by returning a
simple "button" element,
with "Share link" as the text.
Ok, we can save this,
and go and use it in our ReviewPage component.
We could add it after the date.
Let's insert the ShareLinkButton here.
And if we save,
this is our new button.
It could do with some styling.
Let's add some CSS classes,
like a "border", and some padding around the text.
We could also make it "rounded",
set the "text" color to "slate-500",
and finally use a small font.
Ok, it now looks more like an outlined button.
If we move the mouse over it,
we'll want to give the user some visual feedback.
On hover, let's change the background color
to a darker shade of orange,
and in that case we could also make the text darker,
to compensate.
Let's see what it looks like now.
That's ok.
Now, we could display the button next to the date.
So, let me add a "div" here,
wrapping both the date and the ShareLinkButton.
This way we can style the container
div to use "flex",
with a "gap" between the children.
You can see in the browser that
the date and the button are now on the same row.
But the text is not properly aligned.
We can fix that by adding "items-baseline".
Ok, that's better.
We're now ready to add some actual functionality,
that is, do something if the
user clicks the button.
Let's set an "onClick" handler
and we'll write a separate "handleClick function.
Let's go and do that now:
define "handleClick" as an arrow function,
and for a start we can just log a message,
saying "clicked!"
This is a basic event handler in React.
But if we save,
we get an "Unhandled Runtime Error".
The message says: "If you need interactivity,"
"consider converting part of
this to a Client Component".
If you remember, we've already seen
this in the section on Rendering.
With Next.js and the App Router,
all our components are Server
Components by default.
To use any client-side functionality,
we need a Client Component instead.
We'll see exactly how Client Components
work in the next video.