Image

The Image component is uses a Next.js image component underneath. As a result the image is always served in a correct size, prevents Cumulative Layout Shift, ensures faster page loads and comes with other benefits. This is how the image component looks like:

Add Image

Import Image component from image folder and the source of the image:

import { Image } from '../components/image';
import source from 'public/exoplanet.jpeg';

Image component wraps the image into a figure with an optional figcaption. The caption may be specified using the caption prop:

<Image src={source}
  caption="Artist's impression of K2-18b. K2-18b is now the only super-Earth exoplanet known to host both water and temperatures that could support life. Credit: ESA/Hubble, M. Kornmesser."
  alt="A big blue planet on the right with its star and a moon visible on the left"
/>

Customize image style

Open Image.tsx file to customize component's appearance.