Loading Images into Next.js

[00:00:00]
>> Scott Moss: Almost done, now, in order to use these assets, what, the image tag in Next.js, you have to tell Next.js about the domain in which these images will be loaded from, they have to be in this approved list. So we need to do that. The way you do that with Next.js is in the config.

[00:00:22]
So what that's gonna look like in the Next.js config. Next.js, there we go. So we need to add the domain here for Contentful, which is using Azure cuz that's why it's .net. We have to add it here so we can use the images that are coming back from Contentful with the image component from Next.js, you basically have to put it on this allow list.

[00:00:44]
You could do that in the Next.js config, so we're just gonna do that here. So I'm just gonna copy that, go to my Next.js config, and add that.
>> Scott Moss: Okay, now that we have that, let's go to our clients, and we need to make our server component that is going to wrap this, make the call, and pass in the data.

[00:01:13]
So first, I'm just gonna declare some props in this clients because it's gonna be passed in versus it being called. So I'm just gonna say it's gonna take in content, and the type of that is going to be the LogoWallQuery, but we want a sub piece of it, so assetCollections items.

[00:01:40]
So that's what it's for. I need to wrap this in an object and say content is that type. So now if you see content, it's actually like content, it's an array, right? So if I say,
>> Scott Moss: That's an image.
>> Scott Moss: Okay, so we got that, then we just need to make a component that wraps this and use this inside of our homepage instead of this component.

[00:02:08]
So I'm just gonna make a new component here in the components folder and I'll call it logo-wall. I'm just gonna follow the convention of their file naming. I typically like to capitalize my components, but it's all good, so this is LogoWall.
>> Scott Moss: It literally just renders the clients from Clients.

[00:02:38]
>> Scott Moss: It's for a default LogoWall, and then up here, async. I'm gonna say data = await getContentForLogoWall.
>> Scott Moss: There we go. So we got our data, and I'm gonna say content is gonna be data.assetCollection.items. This goes the way, I think it does, it's still gonna have an error, and I hope it does so we can talk about that.

[00:03:12]
So let's go and try to run this.
>> Scott Moss: Wait, I didn't add it to the homepage. Sorry, guess you gotta do that. So here, instead of using Clients here, I'm gonna get rid of that. Actually I'm just gonna say, let's make this logo,
>> Scott Moss: LogoWall.
>> Scott Moss: There we go.

[00:03:42]
So now let's try that.
>> Scott Moss: Okay, no error. I guess that works just fine. It's still showing the hard-coded ones, so let's go into the Clients and actually put in the ones from the props. So instead of doing this, I'm just gonna just copy one, since they're all the same minus the heights and stuff.

[00:04:08]
I'm gonna get rid of the rest of these, they're just repeating, so get rid of all this stuff. Where does this end? I think it ends here.
>> Scott Moss: No-
>> Student 1: One too many.
>> Scott Moss: One too many. Okay, here we go. There we go. Okay, so I'm gonna do that, and then I'm gonna say content.map, give me a logo.

[00:04:33]
And then for each logo, I'm gonna do this. I'll put a key on this so React can leave me alone. The key will be the logo.url. And then here for the source, that's logo.url. Alternate is logo.title.
>> Scott Moss: width = (logo.width).
>> Scott Moss: height = (logo.height). There we go.
>> Scott Moss: I might have to do a restart with the next config.

[00:05:07]
We'll see. Nope, looks exactly the same. So that's how we we know it works because we put the same images up there. So everything works exactly the way it's supposed to.
>> Student 2: Would you control the order, or is that just like another GraphQL?
>> Scott Moss: That's a great question.

[00:05:24]
So the question was, how do you control the order? I was just about to talk about that. So, two ways, just two ways. It depends on who you want to have control of the order. If you want the content folks to be able to control the order, then you need to go make another content model that isn't the asset model in which you link an asset to.

[00:05:47]
And then that way you can query that content model. You can attach that to a collection, and that collection will have a list in which they can sort. Pretty much it'll look just like this. We already have an example of it, while I'm talking, I can just show you.

[00:06:01]
Basically if we go to our hero, right, we have this list, I can sort this list, right? So you would make a collection called LogoWall, and it would have a field called logos. That field would just be a collection of assets which you can just drag like this.

[00:06:20]
And that's how you would get the order, if you wanted them to control the order. Now if you wanted to control the order, you would just add that to your GraphQL query on whatever order you wanted, programmatically. So that's how you would do it.
>> Scott Moss: Yep. What is this internally doing for configuring domain images?

[00:06:39]
Could you talk about that a little bit more? What is it internally doing? Setting up CORS rules or something? Yeah, it could be some CORS, I don't know. I don't know exactly what it would be doing. I'm guessing by default, they don't want you, that image component is very, there's a lot going on in the image component as far as optimizing images and things like that.

[00:07:05]
So it needs to be like an opt-in experience. They don't want you accidentally trying to optimize images you didn't mean to optimize. So I think it's just an opt-in experience, but I'm sure there's something going on as far as like, if you go look at the Next.js docs, they have stuff set up for all the different CMSs, so integrations.

[00:07:30]
So if I go look at Contentfull, there we go. They have specific integrations and things that they have. So I wouldn't be surprised if they're just trying to figure out the different types of mind types. They're trying to figure out how to optimize the image, and that's a lot of work to be doing if you didn't want it to happen in the first place.

[00:07:50]
So, I think it's just an opt-in experience. I don't think it has a lot to do with the network since we're doing it on local host, and I don't see any other calls going out. I think it's mostly just an opt-in experience, yes?
>> Student 2: Are you gonna get into versioning content?

[00:08:05]
>> Scott Moss: Am I gonna get into versioning content? No, I'm not gonna get into versioning content because that's really advanced and platform specific. I could talk about it. We won't be doing it. [LAUGH] But that's very platform specific, there's different camps of thought on how that works. Some products don't believe in versioning and they'd rather just have a better draft, publish process or they have multi-stays processes where content can go through multiple stages and have custom stages and approval workflows.

[00:08:45]
And then you have the camp of, yeah, I want people to be able to pull down different histories of whatever. So it's just too specific to really go into, and it's quite complicated. But at the end of the day, it's just gotta be an API call that you can make.

[00:09:00]
How you set that up practically and what that actually does, that's where the use cases are very specific. Because why would you need a older version of something when you could just make the older version be the latest version and always just have the latest version? So it's just very specific, so probably not.