1 00:00:00,000 --> 00:00:02,000 Now besides improving the markup 2 00:00:02,000 --> 00:00:07,000 and styling, there's one other thing we might want to do 3 00:00:07,000 --> 00:00:10,000 with this basic application. 4 00:00:10,000 --> 00:00:14,000 We might handle situations where visitors, 5 00:00:14,000 --> 00:00:17,000 users of this website try to visit pages 6 00:00:17,000 --> 00:00:22,000 or request news articles that don't exist. 7 00:00:22,000 --> 00:00:26,000 And we can do that by adding another special file 8 00:00:26,000 --> 00:00:30,000 to this project, the not-found.js file. 9 00:00:32,000 --> 00:00:35,000 And this is a file that allows you to set up 10 00:00:35,000 --> 00:00:37,000 some not found page, 11 00:00:37,000 --> 00:00:40,000 some content that will be shown on the screen 12 00:00:40,000 --> 00:00:43,000 if some page or resource is not found. 13 00:00:43,000 --> 00:00:46,000 And you can add such a not-found.js file 14 00:00:46,000 --> 00:00:51,000 anywhere in your app folder, including in nested folders 15 00:00:51,000 --> 00:00:55,000 to have a route specific not found fallback, 16 00:00:55,000 --> 00:00:57,000 but here I'm setting it up at the root level 17 00:00:57,000 --> 00:01:01,000 of the app folder so that I catch any not found errors 18 00:01:01,000 --> 00:01:06,000 thrown from anywhere in this application or this website. 19 00:01:07,000 --> 00:01:09,000 Now in this not-found.js file, 20 00:01:09,000 --> 00:01:12,000 we should then export a component function, 21 00:01:12,000 --> 00:01:17,000 the NotFoundPage component function, for example, 22 00:01:17,000 --> 00:01:19,000 and it's then up to you which kind 23 00:01:19,000 --> 00:01:21,000 of fallback content you wanna show here. 24 00:01:21,000 --> 00:01:25,000 Here I'll return a div with an id of error, 25 00:01:25,000 --> 00:01:29,000 which will simply make sure that it's stalled appropriately. 26 00:01:30,000 --> 00:01:33,000 And I'll add a h1 tag where I'll say Not Found. 27 00:01:34,000 --> 00:01:38,000 And below that maybe a paragraph where we could say, 28 00:01:38,000 --> 00:01:42,000 the requested resource could not be found. 29 00:01:44,000 --> 00:01:45,000 Something like that. 30 00:01:47,000 --> 00:01:49,000 With that, if you save that file, 31 00:01:49,000 --> 00:01:54,000 if you try to enter some page that doesn't exist like /abc, 32 00:01:55,000 --> 00:01:58,000 you'll see that not found content. 33 00:01:59,000 --> 00:02:02,000 Now that's some general not found content, 34 00:02:02,000 --> 00:02:05,000 a general not found page that will be shown 35 00:02:05,000 --> 00:02:10,000 whenever a not found error occurs anywhere on this website. 36 00:02:10,000 --> 00:02:12,000 We could also copy this file 37 00:02:12,000 --> 00:02:16,000 and set up a more specific not-found.js file 38 00:02:16,000 --> 00:02:19,000 for a nested path. 39 00:02:19,000 --> 00:02:22,000 For example, here in this news slug folder, 40 00:02:24,000 --> 00:02:27,000 this would allow us to set up some fallback content 41 00:02:27,000 --> 00:02:30,000 that should be shown if an article isn't found, 42 00:02:30,000 --> 00:02:32,000 if a news item isn't found. 43 00:02:32,000 --> 00:02:36,000 Therefore, in that nested not-found.js file, 44 00:02:36,000 --> 00:02:39,000 I'll rename this function to NewsNotFound. 45 00:02:42,000 --> 00:02:44,000 Though of course this name doesn't matter. 46 00:02:44,000 --> 00:02:48,000 And I'll keep the structure, but I'll change the text 47 00:02:48,000 --> 00:02:52,000 or I'll change the text in this paragraph to be precise. 48 00:02:52,000 --> 00:02:54,000 And I'll say, unfortunately, 49 00:02:54,000 --> 00:02:58,000 we could not find the requested article. 50 00:02:58,000 --> 00:02:59,000 Something like this. 51 00:03:02,000 --> 00:03:07,000 Now the idea is that if we now try to visit an article 52 00:03:07,000 --> 00:03:11,000 that does not exist, like /news/abc, 53 00:03:11,000 --> 00:03:13,000 we get this custom fallback, 54 00:03:13,000 --> 00:03:15,000 but as you see, that's not happening here. 55 00:03:15,000 --> 00:03:18,000 Instead, I get some runtime error. 56 00:03:19,000 --> 00:03:20,000 And we're getting that 57 00:03:20,000 --> 00:03:24,000 because of course NextJS doesn't really understand 58 00:03:24,000 --> 00:03:26,000 whether an article exists or not. 59 00:03:26,000 --> 00:03:30,000 In this slug page.js file, we simply try 60 00:03:30,000 --> 00:03:33,000 to find an article for the provided slug. 61 00:03:33,000 --> 00:03:36,000 So for the slug that was in the URL, 62 00:03:36,000 --> 00:03:39,000 and well, if that yields undefined here, 63 00:03:39,000 --> 00:03:41,000 we'll simply run into some errors, 64 00:03:41,000 --> 00:03:46,000 but we won't technically generate a not found error. 65 00:03:47,000 --> 00:03:49,000 To do that, we should add an extra if check here 66 00:03:49,000 --> 00:03:54,000 and check if not newsItem, so if that is undefined, 67 00:03:54,000 --> 00:03:57,000 and in that case you can call a function 68 00:03:57,000 --> 00:04:02,000 that's provided by NextJS, the notFound function 69 00:04:02,000 --> 00:04:06,000 that should be imported from next/navigation. 70 00:04:07,000 --> 00:04:09,000 When you call this function, 71 00:04:09,000 --> 00:04:13,000 you'll trigger such a not found error, 72 00:04:13,000 --> 00:04:15,000 and NextJS will then handle that 73 00:04:15,000 --> 00:04:19,000 by showing the closest not found fallback content. 74 00:04:21,000 --> 00:04:23,000 So with that, if you save this, 75 00:04:23,000 --> 00:04:27,000 if you now reload for /news/abc, 76 00:04:27,000 --> 00:04:31,000 you see you are getting this news article fallback 77 00:04:31,000 --> 00:04:33,000 and that's now the behavior we want. 78 00:04:33,000 --> 00:04:37,000 And with that, we're now also handling these situations.