How Images Work in Next.js

Where possible, we always recommend storing your images in Agility CMS's Assets area. These are automatically deployed to a CDN and support basic image transcoding via query-strings. You can simply continue to use the CDN URLs provided for your content without any additional work.

However, one of the primary benefits of having a static website is that nothing on your site can change without a new build. This ensures your website updates are atomic. If you are using CDN links to images though, in your site, one could alter an image and that change would take effect immediately on your site. You'd also have no way of reliably rolling back your site to a previous version since the images on the CDN are managed separately.

Using next/image

With the release of Next.js 10, Next.js has a built-in Image Component and Automatic Image Optimization. You can take advantage of this Image Optimization via the <Image /> component exported by next/image.

The Next.js Image Component, next/image, is an extension of the HTML <img> element, evolved for the modern web.

Getting Started

The agilitycms-nextjs-starter already has this configured for you out of the box, however, if you want to include this on a new site, there are a few steps you need to take before you start using the next/image component.

  1. Update the package.json in your Next.js project to use the latest version of Next.js

    • npm install next@latest
  2. Configure and set up your Agility CDN domain in your next.config.js file. If you need help finding your Agility CDN domain, please contact support.

    • module.exports = {
           images: {
              domains: [
                 `cdn.aglty.io`,
                 `cdn-dev.aglty.io`,
                 `${process.env.AGILITY_GUID}-cdn.agilitycms.cloud`,
              ]
            }
        } 

Using the next/image Component

To use the AgilityImage Component:

import Image from "next/image";

See here for all available props.

Example

import Image from "next/image"
<Image src={post.image.url} className="object-cover object-center rounded-lg" layout="fill" />
1 out of 1 found this helpful

Comments

0 comments

Please sign in to leave a comment.