Display Keystatic data in Next js

[00:00] Okay. So instead of displaying a pre tag, let's delete that and we'll first check that we actually have at least one author. And if so, here we'll have a fragment with an h two that says written by and then an unordered list where we will iterate through the authors. Authors dot [00:19] map and for each author will return an li author dot name. And let's check out the first post written by Jed and Simon. Great. You may have noticed that we're missing the key here and the slug would be perfect for that. But if we look at what the author object is, we have name, avatar and [00:39] showcase, but we actually do not have the slug. When you use authors dot read, you do not get the slug part of the object. But what we can do instead of returning an array of just the data for each author is return an object which spreads all the properties of [00:59] the author and also adds the slug, author slug. So now our authors array is an array of authors that contain the slug as well as the fields for each author. Very good. Which means that now we can here add the key author dot slug. Let's display a little more [01:19] data than just the name because remember our authors also have an avatar field and then a showcase. So we'll expand on that li item a little bit. The author name will go in an h three tag. Next, let's use Next. Js image component. And for the source, we will pass [01:39] author dot avatar. And, yeah, let's give it a width and height of 100 pixels and an alt tag of avatar for author dot name. And just because we did not make the avatar mandatory, let's have a fallback image of if we look in the public directory here, you can see that I've added [01:59] a placeholder image. And here we go. Both our authors have now an image. You can see that Jed doesn't have an avatar, so it uses the fallback. And Simon has that cool little basketball dude that looks a lot like Simon's son.