1
00:00:03,000 --> 00:00:05,672
In this section we'll take a deeper

2
00:00:05,672 --> 00:00:07,658
look at Client Components.

3
00:00:07,734 --> 00:00:11,720
So far everything in our pages is fully static.

4
00:00:11,720 --> 00:00:14,492
The only interactivity is that users

5
00:00:14,492 --> 00:00:16,957
can navigate to different pages,

6
00:00:17,034 --> 00:00:20,433
and that does use client-side navigation,

7
00:00:20,433 --> 00:00:23,770
but it's all managed by Next.js automatically.

8
00:00:23,770 --> 00:00:25,668
Now, let's say we'd like to

9
00:00:25,668 --> 00:00:27,424
add a button to this page

10
00:00:27,495 --> 00:00:29,751
to make it easier for our users

11
00:00:29,751 --> 00:00:32,008
to share a link to this review.

12
00:00:32,081 --> 00:00:34,703
Many websites show a Share link

13
00:00:34,703 --> 00:00:36,648
button on each article.

14
00:00:36,732 --> 00:00:39,128
This one is just an example of

15
00:00:39,128 --> 00:00:41,204
a blog hosted on Substack.

16
00:00:41,284 --> 00:00:44,210
Users can click this Share button,

17
00:00:44,210 --> 00:00:46,363
and this shows various options.

18
00:00:46,363 --> 00:00:48,401
One of them is "Copy link",

19
00:00:48,401 --> 00:00:52,162
that simply copies the page URL to the clipboard.

20
00:00:52,162 --> 00:00:54,131
So maybe we could add something

21
00:00:54,131 --> 00:00:55,974
like this to our own website.

22
00:00:56,037 --> 00:00:58,239
Let's go and create a new component

23
00:00:58,239 --> 00:00:59,686
for this functionality.

24
00:00:59,748 --> 00:01:02,055
Under "components" we can add a file,

25
00:01:02,055 --> 00:01:05,459
let's call it "ShareLinkButton.jsx".

26
00:01:05,459 --> 00:01:07,414
And in this file we'll export

27
00:01:07,414 --> 00:01:09,368
a regular function component,

28
00:01:09,435 --> 00:01:12,038
again called ShareLinkButton.

29
00:01:12,395 --> 00:01:14,285
Let's start by returning a

30
00:01:14,285 --> 00:01:16,031
simple "button" element,

31
00:01:16,103 --> 00:01:18,746
with "Share link" as the text.

32
00:01:18,863 --> 00:01:20,631
Ok, we can save this,

33
00:01:20,631 --> 00:01:23,937
and go and use it in our ReviewPage component.

34
00:01:23,937 --> 00:01:25,965
We could add it after the date.

35
00:01:25,965 --> 00:01:29,194
Let's insert the ShareLinkButton here.

36
00:01:29,194 --> 00:01:30,098
And if we save,

37
00:01:30,774 --> 00:01:32,707
this is our new button.

38
00:01:32,707 --> 00:01:34,935
It could do with some styling.

39
00:01:34,935 --> 00:01:37,079
Let's add some CSS classes,

40
00:01:37,555 --> 00:01:41,125
like a "border", and some padding around the text.

41
00:01:41,125 --> 00:01:43,077
We could also make it "rounded",

42
00:01:43,077 --> 00:01:46,868
set the "text" color to "slate-500",

43
00:01:46,868 --> 00:01:49,297
and finally use a small font.

44
00:01:49,728 --> 00:01:53,808
Ok, it now looks more like an outlined button.

45
00:01:53,808 --> 00:01:55,808
If we move the mouse over it,

46
00:01:55,808 --> 00:01:58,939
we'll want to give the user some visual feedback.

47
00:01:58,939 --> 00:02:02,242
On hover, let's change the background color

48
00:02:02,242 --> 00:02:04,715
to a darker shade of orange,

49
00:02:04,715 --> 00:02:08,340
and in that case we could also make the text darker,

50
00:02:08,340 --> 00:02:09,317
to compensate.

51
00:02:09,386 --> 00:02:11,301
Let's see what it looks like now.

52
00:02:11,546 --> 00:02:12,801
That's ok.

53
00:02:12,801 --> 00:02:16,287
Now, we could display the button next to the date.

54
00:02:16,287 --> 00:02:18,603
So, let me add a "div" here,

55
00:02:18,603 --> 00:02:22,285
wrapping both the date and the ShareLinkButton.

56
00:02:22,285 --> 00:02:24,879
This way we can style the container

57
00:02:24,879 --> 00:02:26,214
div to use "flex",

58
00:02:26,288 --> 00:02:28,616
with a "gap" between the children.

59
00:02:28,688 --> 00:02:30,550
You can see in the browser that

60
00:02:30,550 --> 00:02:33,591
the date and the button are now on the same row.

61
00:02:33,591 --> 00:02:36,772
But the text is not properly aligned.

62
00:02:36,772 --> 00:02:40,580
We can fix that by adding "items-baseline".

63
00:02:40,772 --> 00:02:42,327
Ok, that's better.

64
00:02:42,327 --> 00:02:45,237
We're now ready to add some actual functionality,

65
00:02:45,237 --> 00:02:47,334
that is, do something if the

66
00:02:47,334 --> 00:02:49,056
user clicks the button.

67
00:02:49,131 --> 00:02:51,630
Let's set an "onClick" handler

68
00:02:51,630 --> 00:02:55,059
and we'll write a separate "handleClick function.

69
00:02:55,059 --> 00:02:56,935
Let's go and do that now:

70
00:02:57,539 --> 00:03:00,955
define "handleClick" as an arrow function,

71
00:03:00,955 --> 00:03:04,045
and for a start we can just log a message,

72
00:03:04,045 --> 00:03:05,296
saying "clicked!"

73
00:03:05,370 --> 00:03:08,676
This is a basic event handler in React.

74
00:03:08,676 --> 00:03:10,050
But if we save,

75
00:03:10,436 --> 00:03:13,581
we get an "Unhandled Runtime Error".

76
00:03:13,581 --> 00:03:16,600
The message says: "If you need interactivity,"

77
00:03:16,600 --> 00:03:18,732
"consider converting part of

78
00:03:18,732 --> 00:03:20,864
this to a Client Component".

79
00:03:20,940 --> 00:03:23,264
If you remember, we've already seen

80
00:03:23,264 --> 00:03:25,456
this in the section on Rendering.

81
00:03:25,522 --> 00:03:28,454
With Next.js and the App Router,

82
00:03:28,454 --> 00:03:30,748
all our components are Server

83
00:03:30,748 --> 00:03:32,489
Components by default.

84
00:03:32,568 --> 00:03:35,513
To use any client-side functionality,

85
00:03:35,513 --> 00:03:38,306
we need a Client Component instead.

86
00:03:38,306 --> 00:03:41,326
We'll see exactly how Client Components

87
00:03:41,326 --> 00:03:43,107
work in the next video.