Next.js > Managing images

One of the major advantages of using DatoCMS instead of any other content management systems is its responsiveImage query, which returns pre-computed image attributes that will help you setting up responsive images in your frontend without any additional manipulation.

To make it even easier to offer responsive, progressive images on your projects, we offer a package called react-datocms that exposes two components pairing perfectly with the responsiveImage query: <Image /> and <RSCImage />.

Our solution offers the same advantages as using the Next.js Image component, with the added benefit of having beautiful low-quality image placeholders (LQIP) in base64 format embedded directly within the page, without any additional request to be made by the browser or server:

To take advantage of it, install the react-datocms package:

npm install react-datocms

Then, inside your page, feed content coming from a responsiveImage query directly into the <Image /> component:

1
import { Image as DatoImage, RSCImage as DatoSRCImage } from "react-datocms";
2
import { performRequest } from '../lib/datocms';
3

4
const PAGE_CONTENT_QUERY = `query HomePage($limit: IntType) {
5
  allBlogPosts(first: $limit) {
6
    id
7
    title
8
    coverImage {
9
      responsiveImage(imgixParams: { fit: crop, w: 300, h: 300, auto: format }) {
10
        sizes
11
        src
12
        width
13
        height
14
        alt
15
        title
16
        base64
17
      }
18
    }
19
  }
20
}`;
21

22
export default async function Home() {
23
  const pageContent = await performRequest(PAGE_CONTENT_QUERY, {
24
    variables: { limit: 10 },
25
  });
26

27
  return (
28
    <div>
29
      {data.allBlogPosts.map(blogPost => (
30
        <article key={blogPost.id}>
31
          {/* client component with custom lazy-loading via IntersectionObserver */}
32
          <DatoImage data={blogPost.coverImage.responsiveImage} />
33
          {/* server component, uses native loading="lazy" */}
34
          <DatoSRCImage data={blogPost.coverImage.responsiveImage} />
35
          <h2>{blogPost.title}</h2>
36
        </article>
37
      ))}
38
    </div>
39
  );
40
}

<SRCImage /> vs <Image />

Even though their purpose is the same, there are some significant differences between these two components. Depending on your specific needs, you can choose to use one or the other:

• <SRCImage /> is a React Server Component, so it can be rendered and optionally cached on the server. It doesn't create any JS footprint. It generates a single <picture /> element and implements lazy-loading using the native loading="lazy" attribute. The placeholder is set as the background to the image itself. Be careful: the placeholder is not removed when the image loads, so it's not recommended to use this component if you anticipate that the image may have an alpha channel with transparencies.

• <Image /> is a Client Component. Since it runs on the browser, it has the ability to set a cross-fade effect between the placeholder and the original image, but at the cost of generating more complex HTML output composed of multiple elements around the main <picture /> element. It also implements lazy-loading through IntersectionObserver, which allows customization of the thresholds at which lazy loading occurs.

We recommend that you delve deeper into the topic in the documentation of the components themselves.