From the course: Master React 19 and Next.js 16 with Hands-On Projects and Real-World Applications

Unlock this course with a free trial

Join today to access over 25,200 courses taught by industry experts.

Building the NotFound page

Building the NotFound page

From the course: Master React 19 and Next.js 16 with Hands-On Projects and Real-World Applications

Start my 1-month free trial Buy for my team

Building the NotFound page

“

In this session, you'll learn how to create a user-friendly 404 Not Found page for your React Story collection app. This page will gracefully handle navigation errors and guide users back to the main story list, ensuring a smooth user experience. The current URL matches a Not Found page. Now, I'm adding some styling to the main div. I'm using Tailwind CSS classes, giving it a minimum height of the screen, Flexbox for centering content, and a light grey background. This creates a visually appealing layout for our 404 page. I am now adding a nested div with the class TextCenter. This will ensure all the content within this div is centrally aligned, enhancing the readability and visual appeal of the page. Let's add the classic 404 heading. I'm inserting an H1 tag within the nested div with the text 404. I'm also using Tailwind CSS classes to style it with a large font size, bold weight, and a bottom margin. Now I'm adding a descriptive message below the 404 heading. I'm inserting a P tag…

Contents