1 00:00:00,760 --> 00:00:06,040 All right, so to get started with, I have created an empty folder on my desktop. 2 00:00:06,040 --> 00:00:08,200 I have called this as Code sync. 3 00:00:08,240 --> 00:00:10,240 And then I just open it up in VS code. 4 00:00:10,560 --> 00:00:12,120 This is the name that I came up with. 5 00:00:12,160 --> 00:00:14,120 You can call this anything that you wish. 6 00:00:14,400 --> 00:00:20,080 Once you have done this, we can go ahead and open up our terminal and just try to initialize a Next.js 7 00:00:20,120 --> 00:00:21,200 application. 8 00:00:21,200 --> 00:00:24,160 So I will say Npx create next app. 9 00:00:24,200 --> 00:00:30,320 Normally you would say at latest, but in our case I'll go with a specific version which is going to 10 00:00:30,320 --> 00:00:33,200 be 14.2 .23. 11 00:00:33,560 --> 00:00:35,560 At the moment I'm recording this video. 12 00:00:35,600 --> 00:00:41,080 The latest version is Next.js 15, which has some compatibility issues. 13 00:00:41,240 --> 00:00:48,880 For that reason, I'll go with 14.2 .23, which is an absolutely beautiful, uh, version that we can 14 00:00:48,880 --> 00:00:49,400 use. 15 00:00:49,560 --> 00:00:55,680 And to be able to initialize it under the current folder, which is this code sync, I'll put that at 16 00:00:55,680 --> 00:00:56,160 the end. 17 00:00:56,480 --> 00:00:56,920 Right. 18 00:00:57,120 --> 00:00:59,480 And we would like to go with TypeScript. 19 00:00:59,520 --> 00:01:05,560 No ESLint tailwind CSS source directory app router, which is the recommended one. 20 00:01:05,560 --> 00:01:09,490 And we don't really want to customize the default import alias. 21 00:01:09,530 --> 00:01:12,650 If you don't know what that means, I can explain it later in the video. 22 00:01:13,410 --> 00:01:21,090 So this is going to create all the files and get everything that we would need for the Next.js application. 23 00:01:21,090 --> 00:01:23,810 Then we can run npm run dev. 24 00:01:25,650 --> 00:01:32,770 Let me just clear up the terminal and just say npm run dev to get the Next.js application that we have. 25 00:01:33,610 --> 00:01:33,930 Okay. 26 00:01:33,970 --> 00:01:37,330 So this is what we just got from the Next.js team. 27 00:01:37,530 --> 00:01:39,410 Let's go back to source. 28 00:01:39,650 --> 00:01:41,010 This is the homepage UI. 29 00:01:41,730 --> 00:01:42,650 Clear this up. 30 00:01:44,890 --> 00:01:49,330 So it would be awesome if you had some Next.js knowledge at this point. 31 00:01:49,330 --> 00:01:56,770 But if you don't, I think it is still completely fine to follow along because Next.js is basically 32 00:01:56,810 --> 00:02:02,130 like at the end of the day, you are still writing react code, but there are some different concepts 33 00:02:02,130 --> 00:02:04,970 on top of it with some optimizations. 34 00:02:05,130 --> 00:02:07,170 We can go through it in this video as well. 35 00:02:07,330 --> 00:02:11,250 But as I said, it would be awesome if you had some prior knowledge. 36 00:02:11,890 --> 00:02:12,690 So let's save. 37 00:02:12,690 --> 00:02:16,690 And there is also a complete crash course that you can watch about Next.js. 38 00:02:16,730 --> 00:02:19,980 I'll just link it, uh, in the description. 39 00:02:20,580 --> 00:02:21,020 Okay. 40 00:02:21,260 --> 00:02:23,420 So this is what we got for the home page. 41 00:02:23,580 --> 00:02:29,460 On top of Next.js, we would like to add shared CDN UI, which will give us all the components that 42 00:02:29,460 --> 00:02:32,140 we would need to build an awesome UI. 43 00:02:32,860 --> 00:02:36,180 So for now, let's go under the installation with Next.js. 44 00:02:36,740 --> 00:02:37,860 Copy the script. 45 00:02:37,860 --> 00:02:39,940 I am using npm in this video. 46 00:02:39,980 --> 00:02:47,140 If you are using a different package manager, you can copy it, but I'll go with the npm option since 47 00:02:47,140 --> 00:02:51,580 everyone been using it at least the most of the audience, right? 48 00:02:51,620 --> 00:02:53,340 So I'll go ahead and paste this in. 49 00:02:53,660 --> 00:02:56,060 It will ask us three different questions. 50 00:02:56,100 --> 00:02:58,460 Go with the default ones. 51 00:03:00,020 --> 00:03:02,020 So these are mostly for colors. 52 00:03:02,540 --> 00:03:02,980 Okay. 53 00:03:03,020 --> 00:03:07,860 It will update your tailwind config file to set up the CDN UI. 54 00:03:08,100 --> 00:03:10,580 And then it will update the global CSS file. 55 00:03:10,580 --> 00:03:18,820 And it will create this lib and utils file which has this function that Schwetzingen uses behind the 56 00:03:18,820 --> 00:03:19,260 scenes. 57 00:03:19,260 --> 00:03:21,580 So you don't really need to worry about this at all. 58 00:03:21,900 --> 00:03:25,660 And let's say we want to use a button coming from CDN. 59 00:03:25,660 --> 00:03:25,750 Transition. 60 00:03:26,070 --> 00:03:27,190 So how can we do it? 61 00:03:27,870 --> 00:03:28,550 They have it. 62 00:03:28,550 --> 00:03:33,430 As an example you would say Mpc's latest add button. 63 00:03:33,430 --> 00:03:33,950 Right. 64 00:03:33,990 --> 00:03:36,190 So this part is always the same. 65 00:03:36,550 --> 00:03:40,150 And you would type the commands right. 66 00:03:40,310 --> 00:03:41,550 To be able to initialize it. 67 00:03:41,550 --> 00:03:42,590 You would say init. 68 00:03:42,630 --> 00:03:46,550 To be able to add something you would say add and the component name. 69 00:03:47,070 --> 00:03:48,230 So let's copy this. 70 00:03:48,830 --> 00:03:50,230 Go back to our application. 71 00:03:50,230 --> 00:03:51,150 Paste this in. 72 00:03:51,150 --> 00:03:56,830 And you can actually import multiple components at the same time such as button and cart. 73 00:03:58,270 --> 00:04:00,710 And it can get both of them. 74 00:04:00,750 --> 00:04:03,230 Put it under the components under the UI. 75 00:04:03,390 --> 00:04:05,230 And you would have the entire code. 76 00:04:06,030 --> 00:04:10,270 You can see it, update it, customize it and use it as you wish. 77 00:04:10,590 --> 00:04:11,670 So let's say button. 78 00:04:13,470 --> 00:04:15,630 It should be button like this. 79 00:04:16,070 --> 00:04:20,430 And it should be coming from the components UI button directory. 80 00:04:20,630 --> 00:04:23,550 So let's say sign in. 81 00:04:26,110 --> 00:04:26,430 Okay. 82 00:04:26,470 --> 00:04:31,910 So this is what we got now that we have the shared CDN and Next.js set it up. 83 00:04:31,950 --> 00:04:34,430 Next we can implement the authentication.