Using Next.js Image Component with Advanced Styling

Showcase advanced styling options for Next.js's built-in Image component for optimized image delivery.
import Image from 'next/image';
import styles from './MyImage.module.css'; // assuming we have CSS modules

export default function MyImage() {
  return (
    <div className={styles.imageContainer}>
      {/* Custom wrapper with relative position for advanced styling */}
        src='/path-to-your-image.jpg' // Replace with your image path
        alt='Descriptive text for accessibility'
        layout='fill' // Image will fill the parent container
        objectFit='cover' // Image will cover the area, maintaining aspect ratio
        className={styles.myImage} // Custom style from module CSS
This code snippet demonstrates the use of the Image component from Next.js with advanced styling options. It uses CSS modules for styling. The Image component is placed inside a custom wrapper with relative positioning, which allows for advanced layout control. `layout='fill'` ensures that the image will fill the dimensions of its parent, and `objectFit='cover'` makes sure the aspect ratio is maintained while covering the available area. Custom styles are applied using `className` from the imported CSS module.