An image component in Next.js is a pre-optimized and declarative element used for efficiently displaying images on web pages.

Automatic image optimization for improved performance.

Responsive images for different device sizes.

Lazy loading to reduce initial page load time.

On-the-fly transformations for image resizing, cropping, and filters.

Automatic selection of optimal image formats.

Placeholder support for smoother loading and layout consistency.

The Image Component requires the following properties: src, width, height, and alt.

What's interesting to note is that the next/image automatically generates width, height, and blurDataURL values for statically imported images. These values are used to prevent Cumulative Layout Shift(CLS) before the image is finally loaded. It's also possible to pass these values explicitly.

 export default function Page() {
  return (
    <div>
      <Image
        src="/sample.png"
        width={500}
        height={500}
        alt="Sample Picture"
      />
    </div>
  )
}

Note: You should always add the width and height props in the image component when using remote images because NextJS cannot determine the dimension of the image during the build process for proper page rendering to prevent layout shifts.

A loader is a function returning a URL string for the image, given the following parameters:

Here is an example of using a custom loader:

'use client'
 
import Image from 'next/image'
 
const imageLoader = ({ src, width, quality }) => {
  return `https://example.com/${src}?w=${width}&q=${quality || 75}`
}
 
export default function Page() {
  return (
    <Image
      loader={imageLoader}
      src="sample.png"
      alt="Sample Picture"
      width={500}
      height={500}
    />
  )
}

Alternatively, you can use the loaderFile configuration in next.config.js to configure every instance of next/image in your application, without passing a prop.

When set to true, the image will fill its parent element without explicitly defining width and height. The default image fit behavior stretches the image to fit the container. 

A string containing information on how wide the image will be at certain breakpoints. The size value has a significant impact on performance for pictures that use fill or are styled to have a responsive site. For example, if you know your styling will cause an image to be full-width on mobile devices, in a 2-column layout on tablets, and in a 3-column layout on desktop displays, you should include a sizes property such as the following:

import Image from 'next/image'
 
export default function Page() {
  return (
    <div className="grid-element">
      <Image
        fill
        src="/example.png"
        sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
      />
    </div>
  )
}

These example sizes could have a dramatic effect on performance metrics. Without the 33vw sizes, the image selected from the server would be 3 times as wide as it needs to be. Because file size is proportional to the square of the width, without sizes the user would download an image that's 9 times larger than necessary.

The quality of the optimized image is an integer between 1 and 100, where 100 is the best quality and therefore largest file size. Defaults to 75.

Setting the "priority" property to true for an image makes it a high priority and reloads it, disabling lazy loading. The default value is false.

placeholder = 'empty' // {empty} | {blur}

The "placeholder" property determines the type of placeholder used during image loading. It can be set to "blur" or "empty" (default). 

Demo the shimmer effect with blurDataURL prop

Demo the color effect with blurDataURL prop                                               

const imageStyle = {
  borderRadius: '50%',
  border: '1px solid #fff',
}
 
export default function ProfileImage() {
  return <Image src="..." style={imageStyle} />
}

Keep in mind that the necessary width and height props can interact with your styling. If you use styling to change an image's width, you should also change its height to auto to keep the image's inherent aspect ratio. Otherwise, your image will be deformed.

This property is only meant for advanced use cases. Switching an image to load with eagerness will normally hurt performance. We recommend using the priority property instead, which will eagerly pre-load the image.

The loading behavior of the image. Defaults to lazy.

When lazy, defer loading the image until it reaches a calculated distance from the view port.

'use client'   <Image onLoadingComplete={(img) => console.log(img.naturalWidth)} />

 A callback method is called after the image has finished loading and the placeholder has been removed. The callback function will be invoked with a single parameter, a reference to the underlying image> element.

The domain configuration can be used to provide a list of allowed hostnames for external images. This helps to prevent your application from malicious users. For example, the following configuration will ensure your external images starts with s3.amazonaws.com. Any other protocol or unmatched hostname will respond with 400 Bad Requests.

module.exports = {
    images: {
    domains: ['s3.amazonaws.com']
  },
}

Tailwind merge allows you to merge multiple Tailwind CSS classes and automatically resolves conflicts between classes by removing classes conflicting with a class defined later.

Supports Tailwind v3.0 up to v3.3 (if you use Tailwind v2, use tailwind-merge v0.9.0)

Works in all modern browsers and Node >=12

Tailwind-merge makes it simple to create components with multiple levels of composition. This is particularly useful for design systems and UI component libraries. If you anticipate that styles will be modified at various levels of a component hierarchy, tailwind-merge helps maintain a small API surface between components.

<button classname= twMerge('baseClasses','propsClasses')> Submit <button>

In this button example baseClasses are those that uses direct in the button and propsClasses are those that are defined later or coming through the props.

Merging internal classes with className prop: The primary purpose of tailwind-merge is to merge a className prop with the default classes of a component.

// React components with JSX syntax used in this example

function MyComponent({className }) {
    return (
        <div
            className={twMerge(p-5 text-gray font-bold,className,)}
        >
            Hello
        </div>
    )
}

You don't have to worry about potentially expensive re-renders because tailwind-merge caches results, making a re-render with the same props and state relatively lightweight as far as the call to twMerge is concerned.

tailwind-merge is designed to be predictable and intuitive. It follows a set of rules to determine which class wins when there are conflicts. Here is a brief overview of the conflict resolution tailwind-merge can do.

twMerge('p-3 px-5') // → 'p-3 px-5'
twMerge('inset-x-4 right-4') // → 'inset-x-4 right-4'

twMerge('inset-x-px -inset-1') // → '-inset-1'
twMerge('bottom-auto inset-y-6') // → 'inset-y-6'
twMerge('inline block') // → 'block'

twMerge('p-2 hover:p-4') // → 'p-2 hover:p-4'
twMerge('hover:p-2 hover:p-4') // → 'hover:p-4'
twMerge('hover:focus:p-2 focus:hover:p-4') // → 'focus:hover:p-4'

Use twJoin instead of twMerge when you simply join the class strings together without handling conflicting classes.

twJoin('m-4 text-center p-2 p-4') // → 'm-4 text-center'
twJoin('flex justify-center inset-x-4 right-4') // → 'flex justify-center'
twJoin('p-2 hover:p-4') // → 'p-2 hover:p-4'

Joining classes rather than merging forces you to write your code in such a way that no merge conflicts arise, which appears to be more work at first. However twJoin is faster than other class joining libraries because it avoids conflict resolution. It simplifies grouping conflicting classes together and eliminates the need for checking conflicts in subsequent arguments. This makes it easier to understand and use.

How to use and get benefits from tailwind merge

Next.js, a popular React framework, gains traction for its ease of use, performance, and scalability. Combined with Tailwind CSS, it becomes a powerful tool for modern web app development. Next.js + Tailwind CSS: Efficient web development synergy. Simplified rendering, routing, and styling. Faster development, re-usability, responsiveness, customization, enhanced experience.

Installing Tailwind while creating Next.Js project:

Install Node.js: Ensure that Node.js is installed on your machine. You can download and install the latest version from the official Node.js website.

Create a New Next.js Project: Use the terminal or command prompt to navigate to the desired directory and run the following command to create a new Next.js project:

when you run the above command you will see the following below questions from the terminal, you can also install your tailwind at starting up environment by selecting the yes answer. 

Install tailwindcss via npm, and create your tailwind.config.js file.

> npm install -D tailwindcss
> npx tailwindcss init

Add the paths to all of your template files in your tailwind.config.js file.

/* File Name => "tailwind.config.js"*/

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],   /* in this line the path has been added*/
  theme: {
    extend: {},
  },
  plugins: [],
}

Add the @tailwind directives for each of Tailwind’s layers to your main CSS file.

/* File Name => "src/global.css"*/

@tailwind base;
@tailwind components;
@tailwind utilities;

Run the CLI tool to scan your template files for classes and build your CSS.

> npx tailwindcss -i ./src/global.css -o ./dist/output.css --watch

Add your compiled CSS file to the<head>and start using Tailwind’s utility classes to style your content.

/* File Name => "src/index.html"*/

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="/dist/output.css" rel="stylesheet">
</head>
<body>
  <h1 class="text-xl font-bold leading-[23px]">
    Its practice Tailwind
  </h1>
</body>
</html>

Use Tailwind utility classes for component styling and re-usability.

Customize Tailwind CSS in tailwind.config.js.

Simplify responsive design with built-in utility classes.

Extract recurring styles into utility classes with @apply.

Enhance development with IntelliSense and autocomplete.

Explore official documentation and community resources for guidance.

Imagine you're building a Next.js application for an e-commerce website. You want to utilize Tailwind CSS to create a visually appealing and responsive user interface. Here's how you can apply the best practices and tips:

Plan and Organize your CSS: Create a logical structure for your CSS classes. For example, you can group typography-related classes together, such as "text-primary" or "text-heading." Similarly, group spacing and layout classes under appropriate categories like "margin" or "flex."

<h1 className="text-primary text-3xl font-bold">Welcome to Our Blog</h1>


Use Utility Classes Wisely: Instead of using multiple utility classes for similar styles, combine them to create custom classes. For example, if you need a button with a primary color and a larger size, create a custom class like "btn-primary-lg" that applies both styles.

Leverage Tailwind CSS Plugins: Explore Tailwind CSS plugins that suit your needs. For example, if you have complex forms, use a plugin like tailwindcss-forms to apply ready-to-use form styles.

<form>
  <input className="form-input" type="text" placeholder="Enter your name" />
  <button className="btn-primary">Submit</button>
</form>


Stay Updated: Follow the official documentation and community resources of both Next.js and Tailwind CSS to stay updated with the latest features, improvements, and bug fixes. 

Stay up to date with the latest news and updates from Wsquare.

Welcome To The Wsquare Blogs

FREQUENTLY ASKED QUESTIONS

Feel Free To Ask

Social Media Links

Resource

Blog

Contact Us

Support

Book a Meeting

Sales