The 404 page

[00:00 - 00:20] page 404. To create a custom 404 page, we need to create a file called 404.tsx. Pages, new file 404.tsx. We're going to store the files for this page right inside this file along with the component. That's because next requires all the pages to contain a default expert for a component that is the page.

[00:21 - 00:32] That means that we cannot create a 404 directory with a file 404 with a file style.ts, like for other components. Doing so would result in an error when we build our project.

[00:33 - 00:45] So let's define the styles here. We'll need a container, "styled_dev". It's going to have "display_flex", "flex_wrap_wrap", "wrap_wrap", "justify_ content_center", "align_item_center", and "text_align_center".

[00:46 - 00:54] Define the main block, "const_main", it's going to be "styled". "H2", it's going to be the block that's going to say 404, and we want it in a big font.

[00:55 - 01:03] The font size should be "10rem" and "line_height", "11rem". We'll use the accent font family for this element, and with "100%".

[01:04 - 01:14] And finally define the description block. "const_description" is "styled_dev". It's going to be the text telling the user what's going on and how did they end up on this page.

[01:15 - 01:21] It's only going to have "with 100%". Define the "not found" page, "const_not found" return.

[01:22 - 01:34] Continue, that renders a main block with text 404 and a description block saying "oops, the page not found". Expert the "not found" page as a default element.

[01:35 - 01:40] Expert, default, "not found". And now we have our 404 page.

[01:41 - 01:49] Now if you open some page that we can process, some unknown page, you will see 404 in our accent font and text "oops the page not found".