 What's up friends, Chantastic here and today I'm going to show you some of the async special files in Next.js 13 beta app directory, you know, all the cool stuff that's out there right now. We're doing our week two recap of React holiday. So if you're not signed up, check out react.holiday and get all of the emails right to your inbox talking about all these cool new features. Today we're going to cover all of the async routing features. So this will be things like if you're fetching data, you may have an error or a loading page or not found. These are all states that next will manage for you if you use these special files. So let's dive in, cover all those now. Okay, so first things first, start your server npm run dev. Check that out in the browser. Yes, we get it and we can close that up. We need a new route that actually fetches data. So we'll add a new file at route Hello, and we'll use a page dot jsx. Remember, pages need to be page dot jsx. They can't just be like an index anymore or a file with the route that you want to use. Let's get a basic page set up here, export default function, hello page and return paragraph. Hello, save that and visit our hello routes. Perfect. So we have hello. But we want to actually fetch data. And I'm going to make a request to await a fetch to HTTP colon forward slash local host 3000 API slash hello. Now you may be wondering like where does this whole API thing come from? If you're new to next, there's a sample API page right here in pages slash API. And it just returns JSON, just a static john doe JSON. It's just a starter endpoint to show you how API is work, but we're going to use it here. So let's close that immediately we see an error. So we have this await error right here. And the reason we're seeing that is because this function is not an async function. As soon as we change it to an async function, that error goes away. So key thing to know if you have a async react components, you need to mark them or export the async function. Okay, so now we can await the data request JSON. And here interpolates data dot name, no name yet. So we're gonna have to do some debugging. The problem is just me. I forgot to await this. That's the problem. So now that we are properly awaiting our request JSON, we will see that data. And that's all you need to know. You just need to export an async function and do your async work and render it like usual. Super cool. Now, oftentimes when you're requesting data asynchronously, you are going to have some latency or waiting. Hopefully it's pretty fast, but sometimes you might be waiting a while. So let's add a loading page now, which is another one of next special files. First, let's make this component really slow. We can do this just by awaiting a new promise, taking a resolve function, using set time out and calling that function after 1000 seconds, not 1000 seconds 1000 milliseconds, one second. Let's save that and see what happens. So we don't see much of a change now, right here. But we will as soon as we add a loading.jsx file, loading.jsx. This file can be pretty boring. We're just going to exports default function, hello, loading and return anything we want. We'll just go simple right now, loading, super boring. But it will work. Now just in case you missed it, watch right here. I'm going to hit refresh, refresh. We see loading for a second and then our data comes in. All we had to do was have this loading file. Nothing special about this is just a garden variety default export function. Okay, so what happens if your request fails, if it doesn't go through at all, let's try doing something for that as well. I'm going to change this and I'm going to make a different request. We'll request to a service that I like a lot, which is we can actually make a request to a specific status code to enact certain states. So I want to prop the error. So I'm going to use a 500 response. And we get an error. Super cool. Next has this kind of built in error handling system. But we can see that there's nothing rendered here. Our application doesn't handle that error gracefully. We can fix that by adding a error.jsx file. Very similar. We'll export default function, hello, error and return anything we want. Something went wrong. Okay, save that, hit refresh. And nothing happens. Why does nothing happen? Well, let's check our server logs and see if there's anything helpful in here. So, okay, cool. I see an error right here. Functions cannot be passed directly to client components before because they're not serializable. Okay, so this means that we need to turn this into a client component. So use client. Now, this is one thing that you need to keep in mind for error components is that they have to be client components. We just use this, use client directive as we've seen in previous lessons. And we should be good to go. So let's hit refresh. And yeah, we see this kind of heads up display from next, but we also get our error page rendered. What else can we do with this? Well, this is kind of non specific error. So what we may want to do is say, if the response is not okay, then throw some more specific error like failed to fetch, save that. And so now we see our error in here, as well as in our logs, error failed to fetch. Now you'll notice that these errors also come with this digest code in this error function. I want to take this error and see kind of like what we get from it what we can see. So let's kind of wrap this in a fragment. These are pre tag JSON dot string if I know too. Now, when we serialize this all we see is this digest code, but it does match to the error digest ID that we get in this error, which is pretty cool. However, we can also do some really cool stuff with the error, which will actually include all of the information that we have here. So we could use react dot use effect and send this error to some logging service. So right now I'm just going to console dot log the error. And we'll only do this anytime the error changes. So hit save there. Let's give ourselves a little bit of an identifier just just to be safe. Finally, we have to import react, react from react, that you use this use effect, we'll get the error, but I'd like to see that it actually logged. And so yeah, so we see our identifier, which I added Watt and then the error. So if we want to we could send this off to some error reporting service like so and have access to the actual error. Now there's one more thing that you might want to know is that we can actually take a reset function here. This is provided by next and create a button for it reset that on click we call that will create a button right here, which will actually reset this error boundary. Now, my understanding is it doesn't actually like refetch the request. We can reset this error boundary. But because this is like a client side request is not going to refetch the data for that page. Tell me what you think about this, or if you know more than me, this is all I know at this point. So if you know more than me, like if you could actually refire that request, how that would work, I'd love to know. Let me know in the comments below. Okay, so we've gotten all the way to you error now and we have one more other type of error that we may want to handle, which is a not found. The URL is amazing, but you can kind of inject whatever you want into a URL. And so there's a potential that we could have that we can make fetch requests to IDs that don't exist. So let's handle not found go into our page component and make a request for a 404. And to do this properly, I actually want to wrap all of this in a function. So we have more control over our return values. So let's move this up and create a function async function fetch, fetch user, take an ID which we won't use right now, and move all this in there. Now, in the event that this fails, we actually don't want to throw an error directly from here anymore, we just want to return undefined. And that'll give us a few more options. And we'll return data if we get to this point in the function. Now let's call this function inside of our components, let user equal a weight fetch user, we don't need to pass an ID right now. And then if there's not a user, like we get undefined back in this case, we'll call a function not found. And my understanding is this actually does a redirect could be wrong. Again, let me know. And we need to import that from next navigation. Okay, let's save this and see how it goes. Oh, one last thing we got to return this return weight request.json. Now we actually get a helpful error, which is next not found. So let's add a not found route, not found dot JSX, and export a component turn page not found. And there we go, look at that. We made a request to this page, we got a 404 and through all of our nonsense here, we actually propped this page not found. So we have control over that as well. Now, one of the really cool things that I want to show you is that nested layouts actually play a big part in this. So if I take my layout file right here inside of my app directory, and actually extend it to have some other things inside of it, let's put a header here, it just says my app. Now because this is part of the layout that is above our hello route, the my app part of the layout renders even though this page wasn't found in the hello route. So this is really cool. Only parts of your page need to fail. And so if you have like a list of links that you were clicking over here, even though this view might fail, you'd be able to still have an interactive page through the composing layout. We learned a handful of new special files and how to use them in a next route, the error loading and not found special files. So that's it. Thanks so much for watching this week to recap on the async features of the next JS 13 beta act directory router. I'm super excited to cover this. If you want to follow along with react holiday, we are next going to be building up an application. And I think it's going to be some kind of like podcast type app that gets data and uses links and you know, we'll fail if it does. I don't know, we're gonna use all these features in an actual app. So sign up today. And I hope to see you in your inbox. If not, I'll see you next week right here. Bye