Next.js

The Next.js configuration has Next.js-specific linting rules for image optimization, document structure, and App Router patterns.

Installation

Add the Next.js configuration to your biome.jsonc:

biome.jsonc

{
  "extends": ["ultracite/core", "ultracite/next"]
}

Note: The Next.js configuration automatically includes React rules, so you don't need to add ultracite/react separately.

Overview

This configuration adds rules specific to Next.js development:

Image Optimization: Enforce use of Next.js Image component
Document Structure: Prevent improper usage of Next.js special components
Client Components: Ensure async client components are handled correctly
Configuration Files: Special handling for next.config.* files

Next.js-Specific Rules

Nursery

Rule	Setting	Description
`noNextAsyncClientComponent`	`error`	Prevent async client components in Next.js. Client components should be synchronous; use server components for async operations.

Performance

Rule	Setting	Description
`noImgElement`	`error`	Disallow use of `<img>` HTML element. Use Next.js `<Image>` component instead for automatic image optimization.

Style

Rule	Setting	Description
`noHeadElement`	`error`	Disallow use of `<head>` HTML element. Use Next.js `next/head` or App Router metadata API instead.

Suspicious

Rule	Setting	Description
`noDocumentImportInPage`	`error`	Prevent importing `next/document` in page files. `_document.tsx` should only exist in `pages/_document.tsx`.
`noHeadImportInDocument`	`error`	Prevent importing `next/head` in `_document.tsx`. Use `<Head>` from `next/document` instead.

Configuration File Overrides

The Next.js preset includes special handling for configuration files and App Router components:

Next.js Configuration Files

{
  "overrides": [
    {
      "includes": ["next.config.*"],
      "linter": {
        "rules": {
          "suspicious": {
            "useAwait": "off"
          }
        }
      }
    }
  ]
}

This allows for Next.js configuration patterns that might not typically pass linting rules.

App Router Pages and Layouts

{
  "overrides": [
    {
      "includes": ["**/page.{ts,tsx,js,jsx}", "**/layout.{ts,tsx,js,jsx}"],
      "linter": {
        "rules": {
          "suspicious": {
            "useAwait": "off"
          }
        }
      }
    }
  ]
}

App Router page and layout components are allowed to be async without requiring await, as Next.js handles these specially for server-side rendering and data fetching.

Next.js

On this page