1
00:00:02,070 --> 00:00:04,350
So we learn the basics about next

2
00:00:04,470 --> 00:00:10,230
but what is if I still want to compose my application from components and not just pages, should I not

3
00:00:10,230 --> 00:00:11,420
do that anymore?

4
00:00:11,520 --> 00:00:13,360
We absolutely should.

5
00:00:13,380 --> 00:00:16,770
The way you build your react application doesn't change,

6
00:00:16,800 --> 00:00:22,800
it's still a good practice to compose your application of many small pieces.

7
00:00:22,800 --> 00:00:27,420
So let's add a new folder, components and this folder name actually is up to you,

8
00:00:27,450 --> 00:00:29,340
nextjs to doesn't care about that,

9
00:00:29,370 --> 00:00:33,890
you could name it C, CMP, whatever you want. In there,

10
00:00:34,080 --> 00:00:37,920
I'll add my user.js, a user component,

11
00:00:38,160 --> 00:00:46,670
I'll create a constant user, get some props maybe and then output some jsx and for that I'll of course

12
00:00:46,670 --> 00:00:57,230
as always import react from react like that and export this user constant as the file default. In

13
00:00:57,250 --> 00:00:58,010
here

14
00:00:58,090 --> 00:01:06,110
we can now create a new div where I want to output some user data like for example the name which I expect

15
00:01:06,110 --> 00:01:07,920
to get via props

16
00:01:08,240 --> 00:01:13,020
and then let's say also the age, props.age.

17
00:01:13,140 --> 00:01:17,760
That's a very simple component of course deliberately because we're not pulling components,

18
00:01:17,780 --> 00:01:21,920
I want to show you how to use that in the nextjs application.

19
00:01:22,010 --> 00:01:26,260
Now once we got that, once we get this component, we use it as always,

20
00:01:26,390 --> 00:01:29,230
let's say we want to use in the authIndex.js file,

21
00:01:29,240 --> 00:01:32,350
we simply import user from

22
00:01:32,450 --> 00:01:39,520
now let's go up and let's go up to the components folder and there import the user file and I then

23
00:01:39,530 --> 00:01:41,930
simply add my user component like this,

24
00:01:42,110 --> 00:01:49,470
passing the name props since I expect this and the age prop which is the number like that, this is how I can use

25
00:01:49,480 --> 00:01:49,950
this.

26
00:01:50,100 --> 00:01:52,760
Now if we save all the files and we go back,

27
00:01:52,760 --> 00:01:54,130
you already see it here

28
00:01:54,170 --> 00:01:56,120
Max 28.

29
00:01:56,300 --> 00:02:02,050
So we still work with components in our nextjs application,

30
00:02:02,180 --> 00:02:09,980
we just have the special pages folder which also contains components, functional or class based ones but

31
00:02:09,980 --> 00:02:16,700
which is the only folder which gets some special treatment because nextjs as we'll parse all the files

32
00:02:16,700 --> 00:02:21,740
in their as pages, create routes for them and automatically code split.

33
00:02:21,860 --> 00:02:28,060
By the way that code splitting of course also includes components included in that page like the user

34
00:02:28,070 --> 00:02:28,820
component,

35
00:02:29,060 --> 00:02:33,490
we only use that in the auth component, in the authindex.js file

36
00:02:33,680 --> 00:02:36,100
so we only load the code for it

37
00:02:36,260 --> 00:02:42,650
if we navigate to that page. If we spend our entire time on the main index.js page where we don't

38
00:02:42,650 --> 00:02:46,310
use the user component, we would never load the code for this either.