1 00:00:00,000 --> 00:00:02,000 Now for this section, 2 00:00:02,000 --> 00:00:05,000 I prepared a brand new demo project. 3 00:00:05,000 --> 00:00:07,000 You'll find it attached, of course. 4 00:00:07,000 --> 00:00:12,000 You just need to run npm install in that attached project 5 00:00:12,000 --> 00:00:15,000 after you've downloaded it and extracted it 6 00:00:15,000 --> 00:00:17,000 to install all the project dependencies. 7 00:00:19,000 --> 00:00:22,000 And then once you did that, run npm run dev 8 00:00:22,000 --> 00:00:26,000 to start that NextJS Development Server. 9 00:00:28,000 --> 00:00:31,000 Now in that project I provided to you, 10 00:00:31,000 --> 00:00:34,000 you'll find a couple of folders and files, 11 00:00:34,000 --> 00:00:36,000 and you, of course, already know 12 00:00:36,000 --> 00:00:39,000 this General NextJS project structure 13 00:00:39,000 --> 00:00:43,000 because as I mentioned, I do assume that you finished 14 00:00:43,000 --> 00:00:46,000 that NextJS Essentials module. 15 00:00:46,000 --> 00:00:50,000 So I will not reintroduce you to this structure. 16 00:00:50,000 --> 00:00:53,000 Instead, in this starting project, 17 00:00:53,000 --> 00:00:57,000 you'll note that we have a fairly trivial app folder, 18 00:00:57,000 --> 00:01:00,000 which in the end only contains an icon.jpg file, 19 00:01:00,000 --> 00:01:05,000 which, well, is the favicon that is shown for this page. 20 00:01:05,000 --> 00:01:06,000 And as you learned, 21 00:01:06,000 --> 00:01:10,000 if you have a file named icon.jpg in the app folder, 22 00:01:10,000 --> 00:01:13,000 it will automatically be used by NextJS 23 00:01:13,000 --> 00:01:17,000 as a favicon for this page. 24 00:01:17,000 --> 00:01:20,000 You have a globals.css file with some styles 25 00:01:20,000 --> 00:01:23,000 that we'll use throughout this section. 26 00:01:23,000 --> 00:01:26,000 Obviously, you can change those if you wanna tweak the look 27 00:01:26,000 --> 00:01:29,000 of this demo application. 28 00:01:29,000 --> 00:01:32,000 And we got a very basic layout, which sets up some metadata 29 00:01:32,000 --> 00:01:36,000 and then a very basic shell for our pages. 30 00:01:36,000 --> 00:01:40,000 And then a very simple page.js file for the homepage. 31 00:01:40,000 --> 00:01:42,000 Nothing too fancy. 32 00:01:42,000 --> 00:01:46,000 And therefore, if you visit local host 3000, 33 00:01:46,000 --> 00:01:49,000 you should see this on the screen. 34 00:01:50,000 --> 00:01:55,000 And now I got a little challenge, a little exercise for you 35 00:01:55,000 --> 00:02:00,000 to practice what you already learned earlier in this course, 36 00:02:00,000 --> 00:02:05,000 because I want you to use your existing NextJS knowledge 37 00:02:05,000 --> 00:02:09,000 to add two new pages to this starting application 38 00:02:09,000 --> 00:02:11,000 I provided to you. 39 00:02:11,000 --> 00:02:15,000 You should add a /news page, 40 00:02:15,000 --> 00:02:20,000 so which can be visited if you enter local host 3000/news, 41 00:02:21,000 --> 00:02:24,000 which shows a list of dummy news items. 42 00:02:24,000 --> 00:02:28,000 Because the dummy app we're going to build in this section 43 00:02:28,000 --> 00:02:32,000 is a fictional, very simple news site. 44 00:02:32,000 --> 00:02:36,000 So I want you to show a list of news items 45 00:02:36,000 --> 00:02:37,000 which can be clicked. 46 00:02:37,000 --> 00:02:40,000 So these items should be links. 47 00:02:40,000 --> 00:02:44,000 And these links should take you to a news detail page, 48 00:02:44,000 --> 00:02:49,000 which is /news/ and then some ID, some identifier 49 00:02:51,000 --> 00:02:54,000 of a specific news item. 50 00:02:54,000 --> 00:02:56,000 Now at this point here, 51 00:02:56,000 --> 00:03:00,000 we, of course, don't have any real data to work with yet. 52 00:03:00,000 --> 00:03:02,000 So you can simply output some dummy links 53 00:03:02,000 --> 00:03:06,000 that lead to any news with any idea of your choice. 54 00:03:06,000 --> 00:03:09,000 And then just always show the same details page 55 00:03:09,000 --> 00:03:12,000 for the news item that is loaded. 56 00:03:12,000 --> 00:03:15,000 We don't need any real data yet. 57 00:03:16,000 --> 00:03:18,000 As a little bonus, though, 58 00:03:18,000 --> 00:03:23,000 you can try to extract that identifier 59 00:03:23,000 --> 00:03:28,000 that will be encoded in the URL of that news item page 60 00:03:28,000 --> 00:03:31,000 and output it on that news item page 61 00:03:31,000 --> 00:03:33,000 just so that you use your knowledge 62 00:03:33,000 --> 00:03:38,000 about extracting that encoded URL data. 63 00:03:38,000 --> 00:03:40,000 That's a little bonus, but the main task is to have 64 00:03:40,000 --> 00:03:44,000 these two pages that link to each other. 65 00:03:44,000 --> 00:03:48,000 And then there also is another task for you 66 00:03:48,000 --> 00:03:52,000 because I also want you to add a main header component, 67 00:03:52,000 --> 00:03:56,000 a separate component that you should build, 68 00:03:56,000 --> 00:03:58,000 add it to this website. 69 00:03:58,000 --> 00:04:02,000 And in that header, you should have two links, 70 00:04:02,000 --> 00:04:05,000 one leading to the starting page, the homepage, 71 00:04:05,000 --> 00:04:08,000 and the other one leading to that news page. 72 00:04:09,000 --> 00:04:12,000 That's my task for you. 73 00:04:12,000 --> 00:04:15,000 We'll build this together in the next lecture.