Prefer Image in NextJS

nextjs
Always use Next.js `<Image>` component instead of HTML `<img>` tag.
Bad:
```jsx
function ProfileCard() {
  return (
    <div className="card">
      <img src="/profile.jpg" alt="User profile" width={200} height={200} />

Install this rule for wispbit

Quick Install

Recommended
View install script

Run this one command to automatically install the rule:

curl -fsSL https://wispbit.com/api/install?rule=nextjs-prefer-image | bash

Manual install

1

Copy the rule

---
include: *.tsx
---
Always use Next.js `<Image>` component instead of HTML `<img>` tag.
Bad:
```jsx
function ProfileCard() {
  return (
    <div className="card">
      <img src="/profile.jpg" alt="User profile" width={200} height={200} />
      <h2>User Name</h2>
    </div>
  )
}
```
Good:
```jsx
import Image from "next/image"
function ProfileCard() {
  return (
    <div className="card">
      <Image
        src="/profile.jpg"
        alt="User profile"
        width={200}
        height={200}
        priority={false}
      />
      <h2>User Name</h2>
    </div>
  )
}
```
2

Add the rule into your project

Save the copied content as: .wispbit/rules/nextjs-prefer-image.md

Install this rule for Coderabbit

Copy the configuration below and add it to your repository as .coderabbit.yml in your project root.

reviews:
  path_instructions:
    - path: "*.tsx"
      instructions: |
                
        Always use Next.js `<Image>` component instead of HTML `<img>` tag.
        
        Bad:
        
        ```jsx
        function ProfileCard() {
          return (
            <div className="card">
              <img src="/profile.jpg" alt="User profile" width={200} height={200} />
              <h2>User Name</h2>
            </div>
          )
        }
        ```
        
        Good:
        
        ```jsx
        import Image from "next/image"
        
        function ProfileCard() {
          return (
            <div className="card">
              <Image
                src="/profile.jpg"
                alt="User profile"
                width={200}
                height={200}
                priority={false}
              />
              <h2>User Name</h2>
            </div>
          )
        }
        ```

Install this rule for Greptile

Greptile rules can be added through the web interface. Please see this documentation for details on how to add custom rules and context.

Always use Next.js `<Image>` component instead of HTML `<img>` tag.
Bad:
```jsx
function ProfileCard() {
  return (
    <div className="card">
      <img src="/profile.jpg" alt="User profile" width={200} height={200} />
      <h2>User Name</h2>
    </div>
  )
}
```
Good:
```jsx
import Image from "next/image"
function ProfileCard() {
  return (
    <div className="card">
      <Image
        src="/profile.jpg"
        alt="User profile"
        width={200}
        height={200}
        priority={false}
      />
      <h2>User Name</h2>
    </div>
  )
}
```

File Path Patterns:

*.tsx

Install this rule for GitHub Copilot

Copilot instructions can be added through the interface. See the documentation for details on how to create coding guidelines.

Always use Next.js `<Image>` component instead of HTML `<img>` tag.
Bad:
```jsx
function ProfileCard() {
  return (
    <div className="card">
      <img src="/profile.jpg" alt="User profile" width={200} height={200} />
      <h2>User Name</h2>
    </div>
  )
}
```
Good:
```jsx
import Image from "next/image"
function ProfileCard() {
  return (
    <div className="card">
      <Image
        src="/profile.jpg"
        alt="User profile"
        width={200}
        height={200}
        priority={false}
      />
      <h2>User Name</h2>
    </div>
  )
}
```

File Path Patterns:

*.tsx

Install this rule for Graphite Diamond

Diamond custom rules can be added through the interface. See the documentation for details on how to create custom rules.

Always use Next.js `<Image>` component instead of HTML `<img>` tag.
Bad:
```jsx
function ProfileCard() {
  return (
    <div className="card">
      <img src="/profile.jpg" alt="User profile" width={200} height={200} />
      <h2>User Name</h2>
    </div>
  )
}
```
Good:
```jsx
import Image from "next/image"
function ProfileCard() {
  return (
    <div className="card">
      <Image
        src="/profile.jpg"
        alt="User profile"
        width={200}
        height={200}
        priority={false}
      />
      <h2>User Name</h2>
    </div>
  )
}
```

File Path Patterns:

*.tsx