Using NextJS Image with Custom Loader in GraphCMS
Using NextJS Image with Custom Loader in GraphCMS
Repo: https://github.com/GraphCMS/graphcms-…
Content
1.079 -> Scott Spence: Okey dokey. In
this video, we are taking a look
4.829 -> at using the NextJS image
component with a custom loader
9.329 -> with GraphCMS. This example is
available in the GraphCMS
12.329 -> examples repo over on GitHub.
This example demonstrates how to
15.629 -> use a custom loader function
with NextJS Js image component
18.659 -> and GraphCMS assets. It allows
you to perform asset
21.959 -> transformations using the
GraphCMS CDN, rather than a
25.379 -> default NextJS loader; you can
find relevant information over
29.039 -> on NextJS documentation and the
links in the readme here. I'm
32.579 -> going to download this manually
with npx degit. I'll pop that
36.419 -> command into our terminal and
wait for it to download CD into
39.809 -> the project directory and open
up VS code. Before we take a
44.219 -> look at the project, however,
I'm going to instal the
46.199 -> dependencies with Yarn. And
while that is installing, we'll
50.819 -> take a look at the project. So
NextJS config stays the same
54.509 -> with the media.graphcms.com
domain specified in the pages
59.039 -> will go straight to the index
here. If we scroll up, we use
62.519 -> our NextJS image GraphQL client
from GraphQL request. We're
67.349 -> specifying our custom loader
here GraphCMS image loader, we
71.639 -> can destructure out the source
and the width here. And we're
76.229 -> returning this for our custom
loader which is media
80.309 -> graphcms.com and we're pass
ng the width, and we're giving
84.989 -> it the relative source. We're u
ing it in our index page her
89.099 -> , let's go down to our getS
aticProps. First of all, th
92.219 -> s is where we're defining o
r GraphCMS client with GraphQL
95.879 -> lient, and we're destructuring
the products here with the imag
99.059 -> height, URL width and name alon
with the ID that's been returne
103.289 -> as props to the Index page up h
re and here's where we're us
109.229 -> ng the custom loader along with
he image URL, and a fixed width
115.079 -> and height. Quickly take a
look at it in action with Yarn dev
119.699 -> we'll pop on over to localhost
3000 here. You'll see we've got
125.159 -> our images rendered. That's it
for this one. I hope you found
127.619 -> it useful. I'll see you in the
next one. Thanks a lot, bye bye
Source: https://www.youtube.com/watch?v=loatYRYGLUI