From the course: Next.js 14 from Scratch: Build a Real-World Project Using Next.js 14 and MongoDB

Unlock this course with a free trial

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

Custom not found and loading pages

Custom not found and loading pages - Next.js Tutorial

From the course: Next.js 14 from Scratch: Build a Real-World Project Using Next.js 14 and MongoDB

Start my 1-month free trial Buy for my team

Custom not found and loading pages

“

All right, so in this video, we're going to do two things, two really cool features of Next.js. One, we're going to have a custom 404 or not found page. So if I go to like slash test, which doesn't exist, right now it gives us this black 404 page, but we want to make it our own. And then I also want to create a loading page so that when we navigate around the site, like if I go from home to properties, that split second, I want to show a loader. And we can do that simply by creating a page called loading.jsx. So let's start with the not found. So in the app folder, we just simply create a file called not-found.jsx. And let's create a React component. And we'll call this not found page. And as soon as I save that and we go to slash something that doesn't exist, you can see not found page. Now, I'm going to grab from the theme files the HTML that we need. So if we go to not found.html and go down to the section under the nav, which is this right here, we're going to grab that. And then…

Contents