1
00:00:02,080 --> 00:00:06,310
In the last lecture, we created our first nextjs application.

2
00:00:06,310 --> 00:00:11,980
Now this is not a complete nextjs course and you could actually create a course about this,

3
00:00:11,980 --> 00:00:16,710
I just want to show you the bare basic features so that you can dive deeper,

4
00:00:16,720 --> 00:00:20,080
for example with the github repo I pointed you to.

5
00:00:20,080 --> 00:00:26,230
So let's now see how we can easily navigate from our main index page to the auth index page,

6
00:00:26,230 --> 00:00:32,170
for that we of course need a link and with react router, we use the linked component react router

7
00:00:32,200 --> 00:00:35,280
gave us. Now with nextjs,

8
00:00:35,290 --> 00:00:37,650
we also have a link component we can use,

9
00:00:37,750 --> 00:00:40,140
it's not coming from react router though

10
00:00:40,240 --> 00:00:44,610
but instead it's coming from well, nextjs of course.

11
00:00:44,710 --> 00:00:48,430
So to navigate around, I'll import a new component,

12
00:00:48,430 --> 00:00:56,680
the link component from next/link, important link has a lower case L here in the import path.

13
00:00:56,980 --> 00:00:59,320
Now we can add such a link here,

14
00:00:59,500 --> 00:01:07,500
for example, I can add a paragraph in my main page and say go to and now link auth.

15
00:01:07,540 --> 00:01:12,880
Now for this to work, the link of course needs to be configured to point somewhere and you do this with

16
00:01:12,880 --> 00:01:16,990
the ref attribute like on a normal anchor tag in normal html.

17
00:01:17,080 --> 00:01:23,410
And there, you can point to auth/auth to point to the auth folder and there, it will always pick the index.js

18
00:01:23,420 --> 00:01:25,660
file if you got one.

19
00:01:25,690 --> 00:01:28,830
So link alone won't do the trick though,

20
00:01:28,900 --> 00:01:35,530
you actually still use the normal anchor tag inside of it without the ref attribute though, behind the

21
00:01:35,530 --> 00:01:42,790
scenes, nextjs will basically add the ref attribute to the anchor tag but then capture any clicks

22
00:01:42,790 --> 00:01:47,770
on the anchor tag and handle that internally so that you don't really reload the page.

23
00:01:47,800 --> 00:01:51,970
If we now save this and go back to our application, let's reload the app,

24
00:01:52,270 --> 00:01:56,120
we should see the link down, if we click on it, we go to /auth.

25
00:01:56,320 --> 00:02:01,630
Another cool thing you should be able to see is if you go to the network tab and reload your main

26
00:02:01,630 --> 00:02:04,200
page and you click on auth,

27
00:02:04,490 --> 00:02:11,850
you also see that an extra auth bundle was loaded and that is what nextjs does for you,

28
00:02:12,010 --> 00:02:13,790
automatic code splitting.

29
00:02:13,870 --> 00:02:16,880
By the way, don't be intimidated by the file sizes,

30
00:02:16,890 --> 00:02:18,660
this is not optimized at all,

31
00:02:18,670 --> 00:02:22,540
this contains a lot of development environment overhead.

32
00:02:22,750 --> 00:02:28,600
So that's the automated code splitting you get for free and with the link you see here, you can easily

33
00:02:28,600 --> 00:02:31,280
navigate around in your application.

34
00:02:31,590 --> 00:02:36,190
So that's how we use the link and that is how we can easily get around in our application.

35
00:02:36,190 --> 00:02:38,630
Here also not limited to using the link though,

36
00:02:38,680 --> 00:02:44,620
let's say you have a button where you want to go to auth and you want to do this on a click and therefore

37
00:02:44,620 --> 00:02:45,930
navigate imperatively,

38
00:02:45,940 --> 00:02:49,240
so in your code then you can always do this.

39
00:02:49,300 --> 00:02:54,100
For example here of course by registering onClick listener and then defining a method which should get

40
00:02:54,100 --> 00:02:58,350
executed and that of course could be if you have a class based component,

41
00:02:58,360 --> 00:03:06,320
any method in that component, here I'm just writing it in inline to keep it brief. You then can import the

42
00:03:06,320 --> 00:03:15,380
router from next/router, like this with lowercase r though and then here, you can simply call router

43
00:03:15,470 --> 00:03:17,810
push/auth

44
00:03:17,990 --> 00:03:20,320
and this is a very quick way of imperatively

45
00:03:20,360 --> 00:03:28,310
so in code, navigating around. If you now go back and load your main page, got that button, if you click it, you're

46
00:03:28,340 --> 00:03:33,830
on the auth page now navigated through code with that router object.

47
00:03:33,830 --> 00:03:36,870
This is how you get around, how you use the link in nextjs.

48
00:03:37,400 --> 00:03:43,210
One of the core concepts and it looks super simple but a lot is happening behind the scenes,

49
00:03:43,280 --> 00:03:47,550
most importantly the automatic code splitting which is awesome.

50
00:03:47,900 --> 00:03:51,700
Now let's see what else nextjs gives us and how we work with it.