or run

tessl search
Log in

Version

Files

tile.json

tessl/npm-next--eslint-plugin-next

ESLint plugin for Next.js with 21 rules enforcing best practices and Core Web Vitals optimization.

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@next/eslint-plugin-next@15.5.x

To install, run

tessl install tessl/npm-next--eslint-plugin-next@15.5.0

index.mddocs/

@next/eslint-plugin-next

A comprehensive ESLint plugin specifically designed for Next.js applications, providing 21 specialized linting rules that enforce Next.js best practices and optimize Core Web Vitals performance. The plugin includes preset configurations for both general Next.js development and performance-focused linting.

Package Information

  • Package Name: @next/eslint-plugin-next
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install --save-dev @next/eslint-plugin-next

Core Imports

ESM Import

import plugin from "@next/eslint-plugin-next";
import { rules, configs, flatConfig } from "@next/eslint-plugin-next";

CommonJS Import

const plugin = require("@next/eslint-plugin-next");
const { rules, configs, flatConfig } = require("@next/eslint-plugin-next");

Basic Usage

Legacy ESLint Configuration

// .eslintrc.js
module.exports = {
  extends: ["plugin:@next/next/recommended"],
  // Or for performance focus:
  // extends: ["plugin:@next/next/core-web-vitals"],
};

Flat ESLint Configuration

// eslint.config.js
import { flatConfig } from "@next/eslint-plugin-next";

export default [
  flatConfig.recommended,
  // Or for performance focus:
  // flatConfig.coreWebVitals,
];

Architecture

The plugin is organized around several key components:

  • Rules Engine: 21 individual ESLint rules targeting specific Next.js patterns and performance optimizations
  • Configuration Presets: Pre-configured rule sets for different use cases (recommended, core-web-vitals)
  • Multi-Format Support: Compatible with both legacy and flat ESLint configuration formats

Capabilities

Rule Configurations

Pre-configured ESLint rule sets optimized for different Next.js development scenarios.

interface PluginConfigs {
  recommended: {
    plugins: string[];
    rules: Record<string, 'warn' | 'error'>;
  };
  'core-web-vitals': {
    plugins: string[];
    extends: string[];
    rules: Record<string, 'error'>;
  };
}

interface FlatConfig {
  recommended: {
    name: string;
    plugins: Record<string, any>;
    rules: Record<string, 'warn' | 'error'>;
  };
  coreWebVitals: {
    name: string;
    plugins: Record<string, any>;
    rules: Record<string, 'warn' | 'error'>;
  };
}

Configurations

Performance & Core Web Vitals Rules

Rules focused on optimizing loading performance and Core Web Vitals metrics.

interface PerformanceRules {
  'google-font-display': Rule.RuleModule;
  'google-font-preconnect': Rule.RuleModule;
  'no-html-link-for-pages': Rule.RuleModule;
  'no-sync-scripts': Rule.RuleModule;
  'no-img-element': Rule.RuleModule;
  'no-page-custom-font': Rule.RuleModule;
}

Performance Rules

Document & Head Management Rules

Rules for proper Next.js document structure and head element management.

interface DocumentRules {
  'no-head-element': Rule.RuleModule;
  'no-head-import-in-document': Rule.RuleModule;
  'no-document-import-in-page': Rule.RuleModule;
  'no-duplicate-head': Rule.RuleModule;
  'no-title-in-document-head': Rule.RuleModule;
  'no-styled-jsx-in-document': Rule.RuleModule;
}

Document Rules

Script & Asset Management Rules

Rules for proper script loading and asset management in Next.js applications.

interface ScriptRules {
  'inline-script-id': Rule.RuleModule;
  'next-script-for-ga': Rule.RuleModule;
  'no-before-interactive-script-outside-document': Rule.RuleModule;
  'no-script-component-in-head': Rule.RuleModule;
  'no-unwanted-polyfillio': Rule.RuleModule;
  'no-css-tags': Rule.RuleModule;
}

Script Rules

Code Quality & Convention Rules

Rules for enforcing Next.js conventions and preventing common mistakes.

interface ConventionRules {
  'no-assign-module-variable': Rule.RuleModule;
  'no-async-client-component': Rule.RuleModule;
  'no-typos': Rule.RuleModule;
}

Convention Rules

Types

import type { Rule } from 'eslint';

interface ESLintPlugin {
  rules: Record<string, Rule.RuleModule>;
  configs: {
    recommended: {
      plugins: string[];
      rules: Record<string, 'warn' | 'error'>;
    };
    'core-web-vitals': {
      plugins: string[];
      extends: string[];
      rules: Record<string, 'error'>;
    };
  };
}

interface ValidationError {
  message: string;
  line?: number;
  column?: number;
  severity: 'error' | 'warn';
}