0
# Code Quality & Convention Rules
1

2
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.
3

4
## Capabilities
5

6
### no-assign-module-variable
7

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

10
```typescript { .api }
11
/**
12
 * Rule: no-assign-module-variable
13
 * Prevents assignment to module variable
14
 * Severity: error (in recommended config)
15
 * Category: Code Quality
16
 */
17
interface NoAssignModuleVariableRule extends Rule.RuleModule {
18
  meta: {
19
    docs: {
20
      description: 'Prevent assignment to module variable';
21
      category: 'Code Quality';
22
      recommended: true;
23
      url: string;
24
    };
25
    type: 'problem';
26
    schema: [];
27
  };
28
}
29
```
30

31
**Validates:** Global `module` variable is not reassigned
32
**Prevents:** Build errors and module system conflicts
33

34
### no-async-client-component
35

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

38
```typescript { .api }
39
/**
40
 * Rule: no-async-client-component
41
 * Prevents async client components
42
 * Severity: warn (in recommended config)
43
 * Category: React/Next.js Conventions
44
 */
45
interface NoAsyncClientComponentRule extends Rule.RuleModule {
46
  meta: {
47
    docs: {
48
      description: 'Prevent async client components';
49
      category: 'React Conventions';
50
      recommended: true;
51
      url: string;
52
    };
53
    type: 'problem';
54
    schema: [];
55
  };
56
}
57
```
58

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

62
### no-typos
63

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

66
```typescript { .api }
67
/**
68
 * Rule: no-typos
69
 * Catches common Next.js API typos
70
 * Severity: warn (in recommended config)
71
 * Category: Code Quality
72
 */
73
interface NoTyposRule extends Rule.RuleModule {
74
  meta: {
75
    docs: {
76
      description: 'Prevent common Next.js API typos';
77
      category: 'Code Quality';
78
      recommended: true;
79
      url: string;
80
    };
81
    type: 'suggestion';
82
    schema: [];
83
  };
84
}
85
```
86

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

90
## Usage Examples
91

92
### Avoiding Module Assignment
93

94
```javascript
95
// ❌ Incorrect - Assigning to module variable
96
module = { exports: {} }; // This will trigger no-assign-module-variable
97

98
// ✅ Correct - Proper module.exports usage
99
module.exports = {
100
  // your exports
101
};
102

103
// ✅ Correct - ESM exports
104
export default function MyComponent() {
105
  return <div>Hello</div>;
106
}
107
```
108

109
### Client Component Patterns
110

111
```jsx
112
// ❌ Incorrect - Async client component
113
'use client';
114

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

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

124
export default function ClientComponent() {
125
  const [data, setData] = useState(null);
126
  
127
  useEffect(() => {
128
    fetch('/api/data')
129
      .then(res => res.json())
130
      .then(setData);
131
  }, []);
132
  
133
  return <div>{data}</div>;
134
}
135

136
// ✅ Correct - Async server component (no 'use client')
137
export default async function ServerComponent() {
138
  const data = await fetch('/api/data');
139
  return <div>{data}</div>;
140
}
141
```
142

143
### Common Typo Prevention
144

145
```javascript
146
// ❌ Common typos that no-typos catches
147
export async function getServerSideProps() {
148
  return {
149
    porps: { // Typo: should be 'props'
150
      data: 'hello'
151
    }
152
  };
153
}
154

155
export async function getStaticProps() {
156
  return {
157
    porps: { // Typo: should be 'props'  
158
      data: 'hello'
159
    },
160
    revalidat: 60 // Typo: should be 'revalidate'
161
  };
162
}
163

164
// ✅ Correct spelling
165
export async function getServerSideProps() {
166
  return {
167
    props: {
168
      data: 'hello'
169
    }
170
  };
171
}
172

173
export async function getStaticProps() {
174
  return {
175
    props: {
176
      data: 'hello'
177
    },
178
    revalidate: 60
179
  };
180
}
181
```
182

183
### Convention Rules Configuration
184

185
```javascript
186
// Focus on code quality and conventions
187
module.exports = {
188
  plugins: ['@next/next'],
189
  rules: {
190
    // Critical convention rules as errors
191
    '@next/next/no-assign-module-variable': 'error',
192
    
193
    // Best practice rules as warnings
194
    '@next/next/no-async-client-component': 'warn',
195
    '@next/next/no-typos': 'warn',
196
  },
197
};
198
```
199

200
## Flat Configuration Example
201

202
```javascript
203
// eslint.config.js
204
import { rules } from "@next/eslint-plugin-next";
205

206
export default [
207
  {
208
    plugins: {
209
      '@next/next': { rules },
210
    },
211
    rules: {
212
      // Enforce strict conventions
213
      '@next/next/no-assign-module-variable': 'error',
214
      '@next/next/no-async-client-component': 'error',
215
      '@next/next/no-typos': 'error',
216
    },
217
  },
218
];
219
```
220

221
## Rule Categories
222

223
- **Module System**: no-assign-module-variable
224
- **React Patterns**: no-async-client-component  
225
- **API Usage**: no-typos
226

227
## Common Mistakes Prevented
228

229
### Module System Issues
230
- Reassigning the global `module` variable
231
- Conflicts between CommonJS and ESM patterns
232
- Build-time errors in bundling process
233

234
### React Component Patterns
235
- Using async functions for client components
236
- Mixing server and client component patterns incorrectly
237
- Runtime errors in client-side rendering
238

239
### API Typos
240
- Misspelling Next.js data fetching function return properties
241
- Incorrect configuration property names
242
- Runtime errors due to undefined properties
243

244
## Best Practices
245

246
### Module Exports
247
- Use `module.exports` for CommonJS or `export` for ESM
248
- Never reassign the `module` variable itself
249
- Be consistent with export patterns across your codebase
250

251
### Component Architecture
252
- Use async functions only for server components
253
- Handle data fetching in client components with useEffect or data fetching libraries
254
- Clearly separate server and client component responsibilities
255

256
### API Usage
257
- Use TypeScript for better API property validation
258
- Reference Next.js documentation for correct property names
259
- Enable these rules to catch typos early in development