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

Performance & Core Web Vitals Rules

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

ESLint rules focused on optimizing loading performance and Core Web Vitals metrics in Next.js applications. These rules help prevent common performance pitfalls and encourage best practices for web performance.

Capabilities

google-font-display

Enforces the font-display CSS property for Google Fonts to improve loading performance.

/**
 * Rule: google-font-display
 * Enforces font-display CSS property for Google Fonts
 * Severity: warn (in recommended config)
 * Category: Performance
 */
interface GoogleFontDisplayRule extends Rule.RuleModule {
  meta: {
    docs: {
      description: 'Enforce font-display CSS property for Google Fonts';
      category: 'Performance';
      recommended: true;
      url: string;
    };
    type: 'problem';
    schema: [];
  };
}

Validates: Google Font link elements have proper font-display parameter Prevents: Fonts blocking page render during load

google-font-preconnect

Enforces preconnect resource hints for Google Fonts domains to improve loading performance.

/**
 * Rule: google-font-preconnect
 * Enforces preconnect for Google Fonts domains
 * Severity: warn (in recommended config)
 * Category: Performance
 */
interface GoogleFontPreconnectRule extends Rule.RuleModule {
  meta: {
    docs: {
      description: 'Enforce preconnect resource hint for Google Fonts';
      category: 'Performance';
      recommended: true;
      url: string;
    };
    type: 'problem';
    schema: [];
  };
}

Validates: Preconnect hints are present for Google Font domains Prevents: DNS lookup delays for font loading

no-html-link-for-pages

Prevents HTML link elements for internal Next.js pages, promoting client-side navigation.

/**
 * Rule: no-html-link-for-pages
 * Prevents HTML link elements for internal Next.js pages
 * Severity: warn (recommended), error (core-web-vitals)
 * Category: Performance
 */
interface NoHtmlLinkForPagesRule extends Rule.RuleModule {
  meta: {
    docs: {
      description: 'Prevent HTML anchor links for Next.js pages';
      category: 'Performance';
      recommended: true;
      url: string;
    };
    type: 'suggestion';
    schema: [];
  };
}

Validates: Internal navigation uses Next.js Link component Prevents: Page refreshes that break SPA navigation benefits

no-sync-scripts

Prevents synchronous scripts that can block page rendering and hurt performance.

/**
 * Rule: no-sync-scripts
 * Prevents synchronous scripts that block rendering
 * Severity: warn (recommended), error (core-web-vitals)
 * Category: Performance
 */
interface NoSyncScriptsRule extends Rule.RuleModule {
  meta: {
    docs: {
      description: 'Prevent synchronous scripts';
      category: 'Performance';
      recommended: true;
      url: string;
    };
    type: 'problem';
    schema: [];
  };
}

Validates: Scripts use async, defer, or Next.js Script component Prevents: Render-blocking JavaScript that hurts Core Web Vitals

no-img-element

Prevents HTML img elements in favor of Next.js optimized Image component.

/**
 * Rule: no-img-element
 * Prevents HTML img elements, promotes Next.js Image component
 * Severity: warn (in recommended config)
 * Category: Performance
 */
interface NoImgElementRule extends Rule.RuleModule {
  meta: {
    docs: {
      description: 'Prevent usage of HTML img element';
      category: 'Performance';
      recommended: true;
      url: string;
    };
    type: 'problem';
    schema: [];
  };
}

Validates: Images use Next.js Image component instead of HTML img Prevents: Unoptimized images that hurt LCP and bandwidth usage Exceptions: Allows img elements within picture elements, and in app directory metadata route files

no-page-custom-font

Prevents custom font usage in pages directory files to improve loading performance.

/**
 * Rule: no-page-custom-font
 * Prevents custom font usage in pages directory
 * Severity: warn (in recommended config)
 * Category: Performance
 */
interface NoPageCustomFontRule extends Rule.RuleModule {
  meta: {
    docs: {
      description: 'Prevent page-only custom fonts';
      category: 'Performance';
      recommended: true;
      url: string;
    };
    type: 'problem';
    schema: [];
  };
}

Validates: Custom fonts are loaded globally, not per-page Prevents: Font loading performance issues and layout shifts

Usage Examples

Configuring Performance Rules

// Focus on Core Web Vitals optimization
module.exports = {
  extends: ['plugin:@next/next/core-web-vitals'],
  rules: {
    // Promote font optimization to error level
    '@next/next/google-font-display': 'error',
    '@next/next/google-font-preconnect': 'error',
  },
};

Custom Performance Configuration

// eslint.config.js - Custom performance-focused config
import { rules } from "@next/eslint-plugin-next";

export default [
  {
    plugins: {
      '@next/next': { rules },
    },
    rules: {
      // Critical performance rules as errors
      '@next/next/no-sync-scripts': 'error',
      '@next/next/no-html-link-for-pages': 'error',
      '@next/next/no-img-element': 'error',
      
      // Font optimization as warnings
      '@next/next/google-font-display': 'warn',
      '@next/next/google-font-preconnect': 'warn',
    },
  },
];

Rule Categories

Font Optimization: google-font-display, google-font-preconnect, no-page-custom-font
Navigation Performance: no-html-link-for-pages
Script Performance: no-sync-scripts
Image Optimization: no-img-element