0
# Rule Configurations
1

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

4
## Capabilities
5

6
### Legacy Configuration Format
7

8
Traditional ESLint configuration format for established projects.
9

10
```typescript { .api }
11
/**
12
 * Legacy ESLint configuration objects
13
 */
14
interface LegacyConfigs {
15
  recommended: {
16
    plugins: ['@next/next'];
17
    rules: Record<string, 'warn' | 'error'>;
18
  };
19
  'core-web-vitals': {
20
    plugins: ['@next/next'];
21
    extends: ['plugin:@next/next/recommended'];
22
    rules: Record<string, 'error'>;
23
  };
24
}
25
```
26

27
**Usage:**
28

29
```javascript
30
// .eslintrc.js
31
module.exports = {
32
  extends: ['plugin:@next/next/recommended'],
33
  // Additional configuration...
34
};
35

36
// For performance-focused linting
37
module.exports = {
38
  extends: ['plugin:@next/next/core-web-vitals'],
39
};
40
```
41

42
### Flat Configuration Format
43

44
Modern flat ESLint configuration format for new projects.
45

46
```typescript { .api }
47
/**
48
 * Flat ESLint configuration objects for modern ESLint setups
49
 */
50
interface FlatConfigs {
51
  recommended: {
52
    name: 'next/recommended';
53
    plugins: {
54
      '@next/next': ESLintPlugin;
55
    };
56
    rules: Record<string, 'warn' | 'error'>;
57
  };
58
  coreWebVitals: {
59
    name: 'next/core-web-vitals';
60
    plugins: {
61
      '@next/next': ESLintPlugin;
62
    };
63
    rules: Record<string, 'warn' | 'error'>;
64
  };
65
}
66
```
67

68
**Usage:**
69

70
```javascript
71
// eslint.config.js
72
import { flatConfig } from "@next/eslint-plugin-next";
73

74
export default [
75
  flatConfig.recommended,
76
  // Your other configurations...
77
];
78

79
// For performance-focused linting
80
export default [
81
  flatConfig.coreWebVitals,
82
];
83
```
84

85
### Recommended Configuration Rules
86

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

89
```typescript { .api }
90
/**
91
 * Recommended configuration includes 21 rules with appropriate severity levels
92
 */
93
interface RecommendedRules {
94
  // Warning-level rules for best practices
95
  '@next/next/google-font-display': 'warn';
96
  '@next/next/google-font-preconnect': 'warn';
97
  '@next/next/next-script-for-ga': 'warn';
98
  '@next/next/no-async-client-component': 'warn';
99
  '@next/next/no-before-interactive-script-outside-document': 'warn';
100
  '@next/next/no-css-tags': 'warn';
101
  '@next/next/no-head-element': 'warn';
102
  '@next/next/no-html-link-for-pages': 'warn';
103
  '@next/next/no-img-element': 'warn';
104
  '@next/next/no-page-custom-font': 'warn';
105
  '@next/next/no-styled-jsx-in-document': 'warn';
106
  '@next/next/no-sync-scripts': 'warn';
107
  '@next/next/no-title-in-document-head': 'warn';
108
  '@next/next/no-typos': 'warn';
109
  '@next/next/no-unwanted-polyfillio': 'warn';
110
  
111
  // Error-level rules for critical issues
112
  '@next/next/inline-script-id': 'error';
113
  '@next/next/no-assign-module-variable': 'error';
114
  '@next/next/no-document-import-in-page': 'error';
115
  '@next/next/no-duplicate-head': 'error';
116
  '@next/next/no-head-import-in-document': 'error';
117
  '@next/next/no-script-component-in-head': 'error';
118
}
119
```
120

121
### Core Web Vitals Configuration Rules
122

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

125
```typescript { .api }
126
/**
127
 * Core Web Vitals configuration focuses on performance-critical rules
128
 * Extends recommended configuration and promotes specific rules to error level
129
 */
130
interface CoreWebVitalsRules {
131
  '@next/next/no-html-link-for-pages': 'error';
132
  '@next/next/no-sync-scripts': 'error';
133
}
134
```
135

136
**Usage Example:**
137

138
```javascript
139
// Combines recommended rules with Core Web Vitals rules at error level
140
// Final rule severity for these two rules becomes 'error' instead of 'warn'
141
{
142
  extends: ['plugin:@next/next/core-web-vitals'],
143
  // This includes all recommended rules plus upgrades severity for:
144
  // - no-html-link-for-pages: 'error' (was 'warn')
145
  // - no-sync-scripts: 'error' (was 'warn')
146
}
147
```
148

149
## Access Patterns
150

151
### Direct Rule Access
152

153
```typescript { .api }
154
/**
155
 * Access individual configurations
156
 */
157
import { configs, flatConfig } from "@next/eslint-plugin-next";
158

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

163
// Flat format  
164
const flatRecommended = flatConfig.recommended;
165
const flatCoreWebVitals = flatConfig.coreWebVitals;
166
```
167

168
### Plugin Integration
169

170
```typescript { .api }
171
/**
172
 * Full plugin integration with custom rule overrides
173
 */
174
// eslint.config.js
175
import plugin, { flatConfig } from "@next/eslint-plugin-next";
176

177
export default [
178
  flatConfig.recommended,
179
  {
180
    plugins: {
181
      '@next/next': plugin,
182
    },
183
    rules: {
184
      // Override specific rules
185
      '@next/next/no-img-element': 'off',
186
      '@next/next/google-font-display': 'error',
187
    },
188
  },
189
];
190
```