All language subtitles for 001 Share Link Button_en

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.