1
00:00:01,480 --> 00:00:04,660
Let's get started doing some setup for this next j ust project.

2
00:00:04,660 --> 00:00:09,100
Now all we really have to do is install a couple of dependencies write out a script or two and that's

3
00:00:09,100 --> 00:00:10,620
how we get started with Next j us.

4
00:00:10,660 --> 00:00:15,250
There's no real generator or anything like that that we have to run or install.

5
00:00:15,440 --> 00:00:17,880
So I gonna get started by going over to my terminal.

6
00:00:17,950 --> 00:00:21,880
I'm gonna make sure I'm inside my ticketing directory.

7
00:00:21,960 --> 00:00:29,250
I'm going to create a new folder inside this directory called client I'll then change into client and

8
00:00:29,250 --> 00:00:32,060
I'm going to generate a package not just on file inside there.

9
00:00:32,240 --> 00:00:36,460
By running empty minute dash y.

10
00:00:36,760 --> 00:00:42,750
There's my package on JS on file and then going to install three different dependencies.

11
00:00:42,830 --> 00:00:51,050
I'm going to get react react as Dom and next and installing these is just going to take a moment or

12
00:00:51,060 --> 00:00:51,410
two.

13
00:00:51,420 --> 00:00:55,410
So while that's running I'm going to flip back over to my terminal or see with my code editor and we're

14
00:00:55,410 --> 00:01:01,230
gonna start to write out a little bit of code inside this new client directory right here inside the

15
00:01:01,230 --> 00:01:09,290
client directory I'm going to first make a new folder called pages inside this Pages directory.

16
00:01:09,290 --> 00:01:13,660
We're gonna end up writing out several different JavaScript files inside of each of these files.

17
00:01:13,670 --> 00:01:16,500
We are going to export a react component.

18
00:01:16,670 --> 00:01:21,920
Now if you are used to making use of react you might have used react router in the past react router

19
00:01:21,920 --> 00:01:26,690
is all about setting up some routing configuration inside of a javascript file.

20
00:01:26,990 --> 00:01:32,870
But next J works in a very different way in order to setup routing inside of a next J.S. Project.

21
00:01:32,930 --> 00:01:38,240
We're going to have a very particular set of routes or files with very particular file names inside

22
00:01:38,240 --> 00:01:39,840
this page's directory.

23
00:01:39,920 --> 00:01:45,340
So this page is folder right here is a very magic folder whenever Next j s first starts up it's going

24
00:01:45,340 --> 00:01:50,780
to read all the files so we list out inside there and depending upon the file names and possibly some

25
00:01:50,780 --> 00:01:52,730
folders so we create inside there as well.

26
00:01:52,730 --> 00:01:58,490
Next j US is going to interpret those file names as being distinct routes that we can visit inside of

27
00:01:58,490 --> 00:01:59,750
the application.

28
00:01:59,780 --> 00:02:03,320
So let me give you a quick example inside of the Pages directory.

29
00:02:03,320 --> 00:02:10,490
I'm gonna make a new file called indexed J.S. and I'll make another file called.

30
00:02:10,510 --> 00:02:12,440
How about many on the dot.

31
00:02:12,510 --> 00:02:18,630
J.S. so in both of these different files we're going to create a component and then export it as the

32
00:02:18,690 --> 00:02:22,310
default exports are going to first start off inside a banana.

33
00:02:22,320 --> 00:02:27,880
J.S. at the very top I'm going to do an export default.

34
00:02:31,370 --> 00:02:42,080
And I've got to return an H1 that says banana and then going to copy this I'm gonna save this file.

35
00:02:42,240 --> 00:02:45,600
I'm going to go over to index such as the file we just created.

36
00:02:45,600 --> 00:02:51,680
I'll paste inside there and I'll change this one to instead say landing page.

37
00:02:51,770 --> 00:02:55,040
So now whenever we start up our project using next.

38
00:02:55,040 --> 00:02:59,000
Next is going to take a look at the contents of pages that's going to see there are two files inside

39
00:02:59,000 --> 00:03:04,070
of your named index dot J.S. if we have the file name index they'll be used as the root root of our

40
00:03:04,070 --> 00:03:05,100
application.

41
00:03:05,100 --> 00:03:10,580
So now any time we tried to visit next J us or visit this application we should see the content landing

42
00:03:10,580 --> 00:03:15,560
page on the screen if we tried to instead navigate to a route of banana.

43
00:03:15,560 --> 00:03:18,780
So in other words something like local host slash banana.

44
00:03:18,950 --> 00:03:22,920
We should see and each one of banana appear on screen instead.

45
00:03:22,930 --> 00:03:24,140
Again file names.

46
00:03:24,140 --> 00:03:25,720
Map up to rep names.

47
00:03:26,750 --> 00:03:28,010
I'd actually test this thing out.

48
00:03:28,010 --> 00:03:32,270
We need to be able to start up our project to start up a next project.

49
00:03:32,270 --> 00:03:37,010
We're gonna go into our package dot Jason File and we're going to manually write in a couple of scripts

50
00:03:37,010 --> 00:03:38,210
inside of here.

51
00:03:38,210 --> 00:03:41,460
So again with next J we don't get any generators or anything like that.

52
00:03:41,510 --> 00:03:45,300
We just do all the set up very manually because it's a very small amount of setup.

53
00:03:45,700 --> 00:03:50,780
So I to delete the script section or delete the test script inside there and I'll replace it with a

54
00:03:50,840 --> 00:03:54,260
dev script whenever we run this Dev script.

55
00:03:54,260 --> 00:03:57,170
We're going to execute next inside of our project.

56
00:03:57,170 --> 00:03:57,820
That's pretty much it.

57
00:03:59,460 --> 00:04:06,400
It's now to start up our project we'll go back over toward terminal and run NPM run dev to run next.

58
00:04:06,410 --> 00:04:07,810
Now just be really clear.

59
00:04:07,850 --> 00:04:12,110
Right now we are executing or starting up next outside of our Cuba Daddy's cluster.

60
00:04:12,110 --> 00:04:15,400
We are going to be running next inside of Cuba cities.

61
00:04:15,500 --> 00:04:19,940
This is just a very quick demonstration just to get you familiar with this kind of pages style routing

62
00:04:20,960 --> 00:04:21,230
okay.

63
00:04:21,250 --> 00:04:27,870
So back inside my client directory I'll do an NPM run Dev that's going to start up our server on local

64
00:04:27,870 --> 00:04:30,310
ost three thousand.

65
00:04:30,400 --> 00:04:34,930
Now remember you might already have some stuff running on local host 3000 from stuff we did earlier

66
00:04:34,930 --> 00:04:36,100
inside this course.

67
00:04:36,130 --> 00:04:40,510
So if you get some kind of Port air or something like that some kind of startup air you're going to

68
00:04:40,510 --> 00:04:46,900
need to find whatever process you're still running on local three thousand and stop it and so on then

69
00:04:46,900 --> 00:04:50,750
going to go over to my browser and navigate to locos 3000.

70
00:04:50,920 --> 00:04:58,240
And again I'm going to see a landing page on the screen because anytime we come to a route by default

71
00:04:58,320 --> 00:05:03,400
index not just will be loaded inside of the pages directory but now if we go to local three thousand

72
00:05:03,400 --> 00:05:07,190
slash banana we'll see banana instead.

73
00:05:07,240 --> 00:05:12,130
Really the only thing we got to keep in mind here around next is that these file names and some different

74
00:05:12,130 --> 00:05:13,960
folders we create inside of here as well.

75
00:05:13,960 --> 00:05:18,860
They're going to map up to actual routes that we can visit inside the browser.

76
00:05:18,980 --> 00:05:23,480
So now that we've got the basics of next but together quick pause and we'll continue development in

77
00:05:23,480 --> 00:05:24,020
just a moment.