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

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

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

Rule Configurations

Name: tessl/npm-next--eslint-plugin-next
Author: tessl

Pre-configured ESLint rule sets optimized for different Next.js development scenarios, available in both legacy and flat ESLint configuration formats.

Capabilities

Legacy Configuration Format

Traditional ESLint configuration format for established projects.

/**
 * Legacy ESLint configuration objects
 */
interface LegacyConfigs {
  recommended: {
    plugins: ['@next/next'];
    rules: Record<string, 'warn' | 'error'>;
  };
  'core-web-vitals': {
    plugins: ['@next/next'];
    extends: ['plugin:@next/next/recommended'];
    rules: Record<string, 'error'>;
  };
}

Usage:

// .eslintrc.js
module.exports = {
  extends: ['plugin:@next/next/recommended'],
  // Additional configuration...
};

// For performance-focused linting
module.exports = {
  extends: ['plugin:@next/next/core-web-vitals'],
};

Flat Configuration Format

Modern flat ESLint configuration format for new projects.

/**
 * Flat ESLint configuration objects for modern ESLint setups
 */
interface FlatConfigs {
  recommended: {
    name: 'next/recommended';
    plugins: {
      '@next/next': ESLintPlugin;
    };
    rules: Record<string, 'warn' | 'error'>;
  };
  coreWebVitals: {
    name: 'next/core-web-vitals';
    plugins: {
      '@next/next': ESLintPlugin;
    };
    rules: Record<string, 'warn' | 'error'>;
  };
}

Usage:

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

export default [
  flatConfig.recommended,
  // Your other configurations...
];

// For performance-focused linting
export default [
  flatConfig.coreWebVitals,
];

Recommended Configuration Rules

The standard rule set for general Next.js development best practices.

/**
 * Recommended configuration includes 21 rules with appropriate severity levels
 */
interface RecommendedRules {
  // Warning-level rules for best practices
  '@next/next/google-font-display': 'warn';
  '@next/next/google-font-preconnect': 'warn';
  '@next/next/next-script-for-ga': 'warn';
  '@next/next/no-async-client-component': 'warn';
  '@next/next/no-before-interactive-script-outside-document': 'warn';
  '@next/next/no-css-tags': 'warn';
  '@next/next/no-head-element': 'warn';
  '@next/next/no-html-link-for-pages': 'warn';
  '@next/next/no-img-element': 'warn';
  '@next/next/no-page-custom-font': 'warn';
  '@next/next/no-styled-jsx-in-document': 'warn';
  '@next/next/no-sync-scripts': 'warn';
  '@next/next/no-title-in-document-head': 'warn';
  '@next/next/no-typos': 'warn';
  '@next/next/no-unwanted-polyfillio': 'warn';
  
  // Error-level rules for critical issues
  '@next/next/inline-script-id': 'error';
  '@next/next/no-assign-module-variable': 'error';
  '@next/next/no-document-import-in-page': 'error';
  '@next/next/no-duplicate-head': 'error';
  '@next/next/no-head-import-in-document': 'error';
  '@next/next/no-script-component-in-head': 'error';
}

Core Web Vitals Configuration Rules

Performance-focused rule set for optimizing Core Web Vitals metrics.

/**
 * Core Web Vitals configuration focuses on performance-critical rules
 * Extends recommended configuration and promotes specific rules to error level
 */
interface CoreWebVitalsRules {
  '@next/next/no-html-link-for-pages': 'error';
  '@next/next/no-sync-scripts': 'error';
}

Usage Example:

// Combines recommended rules with Core Web Vitals rules at error level
// Final rule severity for these two rules becomes 'error' instead of 'warn'
{
  extends: ['plugin:@next/next/core-web-vitals'],
  // This includes all recommended rules plus upgrades severity for:
  // - no-html-link-for-pages: 'error' (was 'warn')
  // - no-sync-scripts: 'error' (was 'warn')
}

Access Patterns

Direct Rule Access

/**
 * Access individual configurations
 */
import { configs, flatConfig } from "@next/eslint-plugin-next";

// Legacy format
const recommendedConfig = configs.recommended;
const coreWebVitalsConfig = configs['core-web-vitals'];

// Flat format  
const flatRecommended = flatConfig.recommended;
const flatCoreWebVitals = flatConfig.coreWebVitals;

Plugin Integration

/**
 * Full plugin integration with custom rule overrides
 */
// eslint.config.js
import plugin, { flatConfig } from "@next/eslint-plugin-next";

export default [
  flatConfig.recommended,
  {
    plugins: {
      '@next/next': plugin,
    },
    rules: {
      // Override specific rules
      '@next/next/no-img-element': 'off',
      '@next/next/google-font-display': 'error',
    },
  },
];