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

Code Quality & Convention Rules

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

ESLint rules for enforcing Next.js conventions and preventing common coding mistakes. These rules help maintain code quality and catch errors that are specific to Next.js development patterns.

Capabilities

no-assign-module-variable

Prevents assignment to the global module variable which can cause build issues.

/**
 * Rule: no-assign-module-variable
 * Prevents assignment to module variable
 * Severity: error (in recommended config)
 * Category: Code Quality
 */
interface NoAssignModuleVariableRule extends Rule.RuleModule {
  meta: {
    docs: {
      description: 'Prevent assignment to module variable';
      category: 'Code Quality';
      recommended: true;
      url: string;
    };
    type: 'problem';
    schema: [];
  };
}

Validates: Global module variable is not reassigned Prevents: Build errors and module system conflicts

no-async-client-component

Prevents async client components which are not supported in React's client-side rendering.

/**
 * Rule: no-async-client-component
 * Prevents async client components
 * Severity: warn (in recommended config)
 * Category: React/Next.js Conventions
 */
interface NoAsyncClientComponentRule extends Rule.RuleModule {
  meta: {
    docs: {
      description: 'Prevent async client components';
      category: 'React Conventions';
      recommended: true;
      url: string;
    };
    type: 'problem';
    schema: [];
  };
}

Validates: Client components (with 'use client') are not async functions Prevents: Runtime errors in client-side React components

no-typos

Catches common typos in Next.js API and configuration usage.

/**
 * Rule: no-typos
 * Catches common Next.js API typos
 * Severity: warn (in recommended config)
 * Category: Code Quality
 */
interface NoTyposRule extends Rule.RuleModule {
  meta: {
    docs: {
      description: 'Prevent common Next.js API typos';
      category: 'Code Quality';
      recommended: true;
      url: string;
    };
    type: 'suggestion';
    schema: [];
  };
}

Validates: Correct spelling of Next.js API methods and properties Prevents: Runtime errors due to misspelled API calls

Usage Examples

Avoiding Module Assignment

// ❌ Incorrect - Assigning to module variable
module = { exports: {} }; // This will trigger no-assign-module-variable

// ✅ Correct - Proper module.exports usage
module.exports = {
  // your exports
};

// ✅ Correct - ESM exports
export default function MyComponent() {
  return <div>Hello</div>;
}

Client Component Patterns

// ❌ Incorrect - Async client component
'use client';

export default async function ClientComponent() { // This will trigger no-async-client-component
  const data = await fetch('/api/data');
  return <div>{data}</div>;
}

// ✅ Correct - Non-async client component with useEffect
'use client';
import { useState, useEffect } from 'react';

export default function ClientComponent() {
  const [data, setData] = useState(null);
  
  useEffect(() => {
    fetch('/api/data')
      .then(res => res.json())
      .then(setData);
  }, []);
  
  return <div>{data}</div>;
}

// ✅ Correct - Async server component (no 'use client')
export default async function ServerComponent() {
  const data = await fetch('/api/data');
  return <div>{data}</div>;
}

Common Typo Prevention

// ❌ Common typos that no-typos catches
export async function getServerSideProps() {
  return {
    porps: { // Typo: should be 'props'
      data: 'hello'
    }
  };
}

export async function getStaticProps() {
  return {
    porps: { // Typo: should be 'props'  
      data: 'hello'
    },
    revalidat: 60 // Typo: should be 'revalidate'
  };
}

// ✅ Correct spelling
export async function getServerSideProps() {
  return {
    props: {
      data: 'hello'
    }
  };
}

export async function getStaticProps() {
  return {
    props: {
      data: 'hello'
    },
    revalidate: 60
  };
}

Convention Rules Configuration

// Focus on code quality and conventions
module.exports = {
  plugins: ['@next/next'],
  rules: {
    // Critical convention rules as errors
    '@next/next/no-assign-module-variable': 'error',
    
    // Best practice rules as warnings
    '@next/next/no-async-client-component': 'warn',
    '@next/next/no-typos': 'warn',
  },
};

Flat Configuration Example

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

export default [
  {
    plugins: {
      '@next/next': { rules },
    },
    rules: {
      // Enforce strict conventions
      '@next/next/no-assign-module-variable': 'error',
      '@next/next/no-async-client-component': 'error',
      '@next/next/no-typos': 'error',
    },
  },
];

Rule Categories

Module System: no-assign-module-variable
React Patterns: no-async-client-component
API Usage: no-typos

Common Mistakes Prevented

Module System Issues

Reassigning the global module variable
Conflicts between CommonJS and ESM patterns
Build-time errors in bundling process

React Component Patterns

Using async functions for client components
Mixing server and client component patterns incorrectly
Runtime errors in client-side rendering

API Typos

Misspelling Next.js data fetching function return properties
Incorrect configuration property names
Runtime errors due to undefined properties

Best Practices

Module Exports

Use module.exports for CommonJS or export for ESM
Never reassign the module variable itself
Be consistent with export patterns across your codebase

Component Architecture

Use async functions only for server components
Handle data fetching in client components with useEffect or data fetching libraries
Clearly separate server and client component responsibilities