How to resolve 'Next Image not taking class properties' issue?

In this article, we will solve the problem of "Next Image not taking class properties" occurring due to the way the 'next/image' component handles its underlying HTML layout and overall structure. The 'next/image' component is the component that generates the additional wrapper elements and inline styles to perform the image optimization.

Understanding 'Next Image not taking class properties' Issue

The Next.js <Image> component does not directly accept className or other style-related props because it is designed to handle image optimization and rendering separately from styling. The component is optimized for performance, focusing on aspects like lazy loading, responsive images, and format selection, rather than direct styling

Solution

To solve the className error in Next.js we have multiple approaches. We can use the inline styles to directly add the stylings. Also, we can create a wrapper component for the image and implement the styles on that component. These approaches are described below with examples.

Steps to Create the Next App

Step 1: Set up React Project using the Command:

npx create-next-app next-image-example

Step 2: Navigate to the Project folder using:

cd next-image-example

Project Structure:

The updated dependencies in package.json file will look like:

"dependencies": {
    "next": "14.0.4",
    "react": "^18",
    "react-dom": "^18"
}

Approach 1: Using Inline Styles

• We have applied the styles directly as inline styles to the <div> element containing the Image component.
• The border, borderRadius, boxShadow, and margin properties have been properly applied using inline CSS.
• You can change the styles in the code, the changes will be reflected in the image too.

Syntax:

import Image from "next/image";
const HomePage = () => (
	<div>
		{/* Header */}
		{/* Section Title */}
		{/* Container with inline styles */}
		{/* Image component */}
	</div>
);
export default HomePage;

Example: Now in your index.js file add the below content:

//index.js
import Image from 'next/image';

const HomePage = () => {
	return (
		<div style=
			{
				{
					display: 'flex',
					flexDirection: 'column',
					alignItems: 'center',
					justifyContent: 'center',
					minHeight: '100vh'
				}
			}>
			<h1 style={{ color: 'green' }}>
				GeeksforGeeks
			</h1>
			<h3>
				Next Image not taking class
				properties [Approach 1: Using Inline Styles]
			</h3>

			<div style=
				{
					{
						border: '2px solid red',
						borderRadius: '4px',
						boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)',
						margin: '20px'
					}
				}>
				{/* next/image with specified width, height, and styles */}
				<Image
					src=
"https://media.geeksforgeeks.org/wp-content/uploads/20230816191453/gfglogo.png"
					alt="GFG Image"
					width={300}
					height={300}
				/>
			</div>
		</div>
	);
};

export default HomePage;

Now, paste the below config code in the file "next.config.js". We are adding the configuration for external images.

// next.config.js
module.exports = {
	images: {
		domains: ["media.geeksforgeeks.org"], // Add the domain of your image source
	},
};

Step to run the application: Now run the application with the below command:

npm run dev

Output:

Approach 2: Using Custom Image Wrapper:

• We have encapsulated the 'Image' component into the custom component ('CustomImage').
• This custom component applies the desired class properties and the proper styling using the CSS modules.
• So the styling is separated and properly applied to the 'Image' component to ensure that the class properties are properly known and the desired styles are displayed properly.

Example: Now add the below code in the respective files shown in Project Strucutre.

/* styles.module.css */
.container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	background-color: #f4f4f4;
	text-align: center;
}

.title {
	color: #079e20;
	font-size: 2.5rem;
	margin-bottom: 10px;
}

.subtitle {
	color: rgb(0, 0, 0);
	font-size: 1.5rem;
	margin-bottom: 20px;
}

.imagesRow {
	display: flex;
	justify-content: center;
	align-items: center;
}

.imageContainer {
	border-radius: 10px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	transition: border-color 0.3s, transform 0.3s;
	cursor: pointer;
	display: inline-block;
	margin: 20px;
}

.imageStyle {
	display: block;
	border-radius: 6px;
}

.imageContainer:hover {
	border-color: #fff;
	transform: scale(1.05);
}

//index.js
import CustomImage from './CustomImage';
import styles from './styles.module.css';

const HomePage = () => {
	return (
		<div className={styles.container}>
			<h1 className={styles.title}>
				GeeksforGeeks
			</h1>
			<h3 className={styles.subtitle}>
				Next Image not taking class properties 
				[Approach 2: Custom Image Wrapper]
			</h3>

			<div className={styles.imagesRow}>
				<CustomImage
					src=
"https://media.geeksforgeeks.org/wp-content/uploads/20230816191453/gfglogo.png"
					alt="GFG Image 1"
					width={300}
					height={300}
					borderColor="#FE012B"
				/>

				<CustomImage
					src=
"https://media.geeksforgeeks.org/wp-content/uploads/20230816114558/Avator.jpg"
					alt="GFG Image 2"
					width={300}
					height={300}
					borderColor="#0A04FB"
				/>
			</div>
		</div>
	);
};

export default HomePage;

//CustomImage.js
import React from 'react';
import Image from 'next/image';
import styles from './styles.module.css';

const CustomImage = (
	{
		src, alt,
		width, height,
		borderColor
	}
) => {
	const imageStyles = {
		border: `4px solid ${borderColor}`,
	};

	return (
		<div className={styles.imageContainer}
			style={imageStyles}>
			<Image src={src}
				alt={alt} width={width}
				height={height}
				className={styles.imageStyle} />
		</div>
	);
};

export default CustomImage;

Step 3: Now, paste the below config code in the file "next.config.js". We are adding the configuration for external images.

// next.config.js
module.exports = {
    images: {
      domains: ['media.geeksforgeeks.org'], // Add the domain of your image source
    },
};

Step to run the application: Now run the application with the below command:

npm run dev

Output:

Conclustion

Next.js <Image> component does not directly support className for styling. Instead, use wrapper elements, CSS Modules, or styled-components to apply styles. These methods ensure that your images are both optimized and properly styled according to your needs.