dev-booster 1.18.0 → 1.18.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +5 -2
- package/package.json +1 -1
- package/template/.devbooster/MANIFEST.md +36 -2
- package/template/.devbooster/boosters/advisor.md +5 -0
- package/template/.devbooster/boosters/audit.md +20 -0
- package/template/.devbooster/boosters/auto-triage.md +5 -0
- package/template/.devbooster/boosters/backend.md +12 -0
- package/template/.devbooster/boosters/builder.md +5 -0
- package/template/.devbooster/boosters/code-audit.md +19 -0
- package/template/.devbooster/boosters/coder.md +5 -0
- package/template/.devbooster/boosters/commit.md +233 -0
- package/template/.devbooster/boosters/create.md +5 -0
- package/template/.devbooster/boosters/debug.md +19 -0
- package/template/.devbooster/boosters/deploy.md +12 -0
- package/template/.devbooster/boosters/discovery.md +5 -0
- package/template/.devbooster/boosters/frontend.md +12 -0
- package/template/.devbooster/boosters/implementation.md +5 -0
- package/template/.devbooster/boosters/investigation.md +5 -0
- package/template/.devbooster/boosters/performance.md +12 -0
- package/template/.devbooster/boosters/planning.md +5 -0
- package/template/.devbooster/boosters/refactor.md +12 -0
- package/template/.devbooster/boosters/review.md +12 -0
- package/template/.devbooster/boosters/security.md +14 -0
- package/template/.devbooster/boosters/smart-task.md +27 -16
- package/template/.devbooster/boosters/stack-refresh.md +20 -0
- package/template/.devbooster/boosters/testing.md +12 -0
- package/template/.devbooster/hub/knowledge/angular-patterns.md +185 -0
- package/template/.devbooster/hub/knowledge/dependency-guide.md +175 -0
- package/template/.devbooster/hub/knowledge/eslint-migration.md +206 -0
- package/template/.devbooster/hub/knowledge/index.md +91 -0
- package/template/.devbooster/hub/knowledge/migration-guides.md +137 -0
- package/template/.devbooster/hub/knowledge/monorepo-patterns.md +121 -0
- package/template/.devbooster/hub/knowledge/nestjs-patterns.md +185 -0
- package/template/.devbooster/hub/knowledge/nextjs-pitfalls.md +226 -0
- package/template/.devbooster/hub/knowledge/nodejs-patterns.md +148 -0
- package/template/.devbooster/hub/knowledge/package-manager-patterns.md +143 -0
- package/template/.devbooster/hub/knowledge/prisma-postgresql-patterns.md +188 -0
- package/template/.devbooster/hub/knowledge/react-patterns.md +500 -0
- package/template/.devbooster/hub/knowledge/tailwind-shadcn-patterns.md +146 -0
- package/template/.devbooster/hub/knowledge/tanstack-patterns.md +278 -0
- package/template/.devbooster/hub/knowledge/testing-patterns.md +164 -0
- package/template/.devbooster/hub/knowledge/trpc-patterns.md +212 -0
- package/template/.devbooster/hub/knowledge/typescript-patterns.md +219 -0
- package/template/.devbooster/hub/knowledge/upgrade-fallout.md +154 -0
- package/template/.devbooster/hub/knowledge/vite-patterns.md +177 -0
- package/template/.devbooster/rules/GUIDE.md +26 -0
- package/template/.devbooster/rules/PROTOCOL.md +3 -2
- package/template/.devbooster/rules/TRIGGERS.md +15 -0
|
@@ -0,0 +1,185 @@
|
|
|
1
|
+
# NestJS Patterns
|
|
2
|
+
|
|
3
|
+
> **Purpose:** Practical patterns for dependable NestJS application boundaries.
|
|
4
|
+
> **Primary official sources:** [Nest modules](https://docs.nestjs.com/modules) · [Nest providers](https://docs.nestjs.com/providers) · [Nest validation](https://docs.nestjs.com/techniques/validation) · [Nest authentication](https://docs.nestjs.com/security/authentication) · [Nest exception filters](https://docs.nestjs.com/exception-filters) · [Nest configuration](https://docs.nestjs.com/techniques/configuration)
|
|
5
|
+
|
|
6
|
+
## Project Convention Decision Rule
|
|
7
|
+
|
|
8
|
+
Before applying this guidance, verify the installed versions, local rules, existing abstractions, configuration, and tests. Preserve a valid established project convention; do not replace it only because another documented approach is also valid. Use official sources to verify API behavior, compatibility, constraints, and migrations. Recommend a change only when the developer requests it or evidence shows the current approach is incompatible, unsafe, deprecated, broken, or responsible for a verified issue.
|
|
9
|
+
|
|
10
|
+
---
|
|
11
|
+
|
|
12
|
+
## Table of Contents
|
|
13
|
+
|
|
14
|
+
1. [Module and Provider Visibility](#module-and-provider-visibility)
|
|
15
|
+
2. [Circular Dependencies and forwardRef](#circular-dependencies-and-forwardref)
|
|
16
|
+
3. [Validation Pipes and DTO Transformation](#validation-pipes-and-dto-transformation)
|
|
17
|
+
4. [Authentication Guards and Execution Context](#authentication-guards-and-execution-context)
|
|
18
|
+
5. [Global Exception Filters and Error Contracts](#global-exception-filters-and-error-contracts)
|
|
19
|
+
6. [Configuration and Environment Validation](#configuration-and-environment-validation)
|
|
20
|
+
7. [Request-Scoped Provider Caveats](#request-scoped-provider-caveats)
|
|
21
|
+
|
|
22
|
+
---
|
|
23
|
+
|
|
24
|
+
## Module and Provider Visibility
|
|
25
|
+
|
|
26
|
+
### Symptom
|
|
27
|
+
Nest cannot resolve a dependency even though a provider exists elsewhere, or a feature accidentally depends on an implementation that should be private.
|
|
28
|
+
|
|
29
|
+
### Verify first
|
|
30
|
+
- Read the consuming module's `imports`, the providing module's `providers`, and its `exports`.
|
|
31
|
+
- Confirm injection tokens match exactly, especially for custom providers and interfaces (which do not exist at runtime).
|
|
32
|
+
- Check whether the module was registered in the application graph rather than merely imported by a TypeScript file.
|
|
33
|
+
|
|
34
|
+
### Fix
|
|
35
|
+
- Keep a provider private by default. Export only the provider token or service intended as the module's public API.
|
|
36
|
+
- Import the module that exports the provider; adding the provider directly to a second module creates a separate instance and may hide the ownership problem.
|
|
37
|
+
- Use explicit tokens for abstractions and bind them in one composition location.
|
|
38
|
+
|
|
39
|
+
### Verify
|
|
40
|
+
- Bootstrap a test module using the same imports as the production consumer.
|
|
41
|
+
- Confirm stateful providers have the intended instance lifetime.
|
|
42
|
+
|
|
43
|
+
*Sources: [Nest modules](https://docs.nestjs.com/modules), [Nest custom providers](https://docs.nestjs.com/fundamentals/custom-providers).*
|
|
44
|
+
|
|
45
|
+
---
|
|
46
|
+
|
|
47
|
+
## Circular Dependencies and forwardRef
|
|
48
|
+
|
|
49
|
+
### Problem
|
|
50
|
+
Two providers or modules require each other, leading to unresolved dependencies, undefined imports, or tightly coupled business behavior.
|
|
51
|
+
|
|
52
|
+
### Verify first
|
|
53
|
+
- Distinguish a Nest dependency cycle from a TypeScript import cycle; inspect the dependency direction and runtime tokens.
|
|
54
|
+
- Identify whether the services are coordinating two responsibilities that should be extracted behind a third service, event, or interface.
|
|
55
|
+
|
|
56
|
+
### Fix
|
|
57
|
+
- Prefer removing the cycle by extracting the shared orchestration or introducing a narrower dependency direction.
|
|
58
|
+
- Use `forwardRef(() => Dependency)` only when the cycle is intentional, limited, and understood. Apply it at the matching module/provider injection point.
|
|
59
|
+
- Do not rely on constructor order between circular providers; Nest documents that instantiation order is indeterminate.
|
|
60
|
+
|
|
61
|
+
### Verify
|
|
62
|
+
- Bootstrap the affected module and exercise both paths through the cycle.
|
|
63
|
+
- Check that unit tests can replace each side independently; difficult substitution is a sign that the boundary remains too coupled.
|
|
64
|
+
|
|
65
|
+
*Source: [Nest circular dependency fundamentals](https://docs.nestjs.com/fundamentals/circular-dependency).*
|
|
66
|
+
|
|
67
|
+
---
|
|
68
|
+
|
|
69
|
+
## Validation Pipes and DTO Transformation
|
|
70
|
+
|
|
71
|
+
### Symptom
|
|
72
|
+
Requests accept unexpected fields, route/query values retain string types, nested objects are not validated, or validation behavior differs between endpoints.
|
|
73
|
+
|
|
74
|
+
### Verify first
|
|
75
|
+
- Identify the transport and source: body, query, params, headers, or a message payload.
|
|
76
|
+
- Confirm the runtime DTO is a concrete class with `class-validator` decorators; TypeScript types/interfaces alone cannot be reflected for validation.
|
|
77
|
+
- Test representative invalid input, unknown fields, nested DTOs, and coercion edge cases such as empty strings and dates.
|
|
78
|
+
|
|
79
|
+
### Fix
|
|
80
|
+
- Apply a global `ValidationPipe` only after choosing an API policy for `whitelist`, `forbidNonWhitelisted`, and transformation.
|
|
81
|
+
- Use DTO classes for input contracts. For nested values, provide type metadata such as `@Type(() => ChildDto)` where required by `class-transformer`.
|
|
82
|
+
- Enable `transform` when handlers need converted primitive route/query values, but declare expected types and test coercion. Transformation is not a substitute for semantic validation.
|
|
83
|
+
- Keep validation rules at the boundary; preserve domain-specific invariants in application/domain logic as well.
|
|
84
|
+
|
|
85
|
+
### Verify
|
|
86
|
+
- Add end-to-end tests asserting the status code and error body for malformed input.
|
|
87
|
+
- Confirm successful inputs arrive at the handler with the expected runtime types.
|
|
88
|
+
|
|
89
|
+
*Sources: [Nest validation](https://docs.nestjs.com/techniques/validation), [class-validator](https://github.com/typestack/class-validator), [class-transformer](https://github.com/typestack/class-transformer).*
|
|
90
|
+
|
|
91
|
+
---
|
|
92
|
+
|
|
93
|
+
## Authentication Guards and Execution Context
|
|
94
|
+
|
|
95
|
+
### Problem
|
|
96
|
+
Authentication works for one transport but is bypassed or reads the wrong request object for another; authorization logic becomes duplicated across controllers.
|
|
97
|
+
|
|
98
|
+
### Verify first
|
|
99
|
+
- Identify the active transport and context: HTTP, GraphQL, WebSocket, or RPC. `ExecutionContext` exposes different arguments for each.
|
|
100
|
+
- Separate authentication (establishing identity) from authorization (deciding access).
|
|
101
|
+
- Define which routes are public and how metadata inheritance at controller and handler levels should work.
|
|
102
|
+
|
|
103
|
+
### Fix
|
|
104
|
+
- Put identity extraction and verification in a guard or strategy appropriate to the transport.
|
|
105
|
+
- Use `ExecutionContext` APIs rather than assuming `switchToHttp().getRequest()` is valid everywhere.
|
|
106
|
+
- Express authorization requirements as explicit metadata and enforce them in a guard. Keep resource-level checks close to the use case when they require loading the resource.
|
|
107
|
+
- Attach only the normalized identity/claims needed downstream; do not treat unverified decoded token data as authenticated identity.
|
|
108
|
+
|
|
109
|
+
### Verify
|
|
110
|
+
- Test absent, malformed, expired, and valid credentials plus forbidden-but-authenticated access.
|
|
111
|
+
- Exercise every supported transport and both controller- and method-level metadata paths.
|
|
112
|
+
|
|
113
|
+
*Sources: [Nest guards](https://docs.nestjs.com/guards), [Nest execution context](https://docs.nestjs.com/fundamentals/execution-context), [Nest authorization](https://docs.nestjs.com/security/authorization).*
|
|
114
|
+
|
|
115
|
+
---
|
|
116
|
+
|
|
117
|
+
## Global Exception Filters and Error Contracts
|
|
118
|
+
|
|
119
|
+
### Symptom
|
|
120
|
+
Clients receive inconsistent error bodies, internal details leak, or exceptions from different layers map to arbitrary status codes.
|
|
121
|
+
|
|
122
|
+
### Verify first
|
|
123
|
+
- Define the public error contract: status, stable machine-readable code, safe message, field errors where applicable, and correlation/request identifier policy.
|
|
124
|
+
- Identify adapter behavior and existing global filters/interceptors. A filter that writes an HTTP response is transport-specific.
|
|
125
|
+
- Classify expected domain/application errors separately from programming errors and infrastructure failures.
|
|
126
|
+
|
|
127
|
+
### Fix
|
|
128
|
+
- Use Nest's built-in HTTP exceptions for straightforward transport errors.
|
|
129
|
+
- Add a global filter to translate known application errors into one documented public contract, log unexpected errors with safe context, and avoid exposing stack traces or secrets.
|
|
130
|
+
- Preserve the original cause for observability when wrapping errors, but do not return it to clients.
|
|
131
|
+
- Avoid catching every exception inside controllers; doing so fragments error policy and can hide defects.
|
|
132
|
+
|
|
133
|
+
### Verify
|
|
134
|
+
- Test validation, not-found, forbidden, conflict, and unexpected-error responses.
|
|
135
|
+
- Ensure production responses do not contain stack traces, tokens, database errors, or internal file paths.
|
|
136
|
+
|
|
137
|
+
*Sources: [Nest exception filters](https://docs.nestjs.com/exception-filters), [Nest validation errors](https://docs.nestjs.com/techniques/validation#disable-detailed-errors).*
|
|
138
|
+
|
|
139
|
+
---
|
|
140
|
+
|
|
141
|
+
## Configuration and Environment Validation
|
|
142
|
+
|
|
143
|
+
### Problem
|
|
144
|
+
The application starts with missing or malformed configuration, discovers it only under traffic, or reads environment variables throughout business code.
|
|
145
|
+
|
|
146
|
+
### Verify first
|
|
147
|
+
- Inventory required settings, optional settings with defaults, secret sources, and environment-specific constraints.
|
|
148
|
+
- Confirm how configuration is loaded in each runtime; `.env` files are not automatically a production secret-management strategy.
|
|
149
|
+
- Decide which invalid settings must fail startup versus which can be disabled safely.
|
|
150
|
+
|
|
151
|
+
### Fix
|
|
152
|
+
- Centralize configuration with `@nestjs/config` and expose typed, focused configuration access to consumers.
|
|
153
|
+
- Validate required environment values during startup with a schema or custom validation function. Validate format and range, not only presence.
|
|
154
|
+
- Keep secrets out of logs, errors, repository files, and client-side configuration.
|
|
155
|
+
- Prefer injecting configuration over reading `process.env` across arbitrary services, which makes tests and runtime behavior harder to control.
|
|
156
|
+
|
|
157
|
+
### Verify
|
|
158
|
+
- Start the application with missing, malformed, and valid configurations.
|
|
159
|
+
- Confirm failures identify the setting safely without printing its secret value.
|
|
160
|
+
|
|
161
|
+
*Source: [Nest configuration](https://docs.nestjs.com/techniques/configuration).*
|
|
162
|
+
|
|
163
|
+
---
|
|
164
|
+
|
|
165
|
+
## Request-Scoped Provider Caveats
|
|
166
|
+
|
|
167
|
+
### Problem
|
|
168
|
+
A request-scoped dependency unexpectedly increases latency/memory use, causes broad scope propagation, or behaves inconsistently in non-HTTP code.
|
|
169
|
+
|
|
170
|
+
### Verify first
|
|
171
|
+
- Confirm that mutable per-request state cannot instead be passed as an explicit argument or carried by a transport context.
|
|
172
|
+
- Inspect the dependency tree: a request-scoped provider can make dependent providers request-scoped.
|
|
173
|
+
- Measure the allocation and latency impact under expected concurrency, and identify whether the code also runs in jobs, events, or WebSockets.
|
|
174
|
+
|
|
175
|
+
### Fix
|
|
176
|
+
- Keep services singleton-scoped by default; make dependencies request-scoped only for a concrete per-request lifecycle requirement.
|
|
177
|
+
- Pass request-specific values explicitly when practical. This preserves singleton reuse and makes behavior easier to test.
|
|
178
|
+
- For non-singleton scenarios, use Nest's documented context/request-provider mechanisms rather than assuming an HTTP request exists.
|
|
179
|
+
- Do not use request scope as a substitute for authorization isolation or transaction management.
|
|
180
|
+
|
|
181
|
+
### Verify
|
|
182
|
+
- Load-test the affected route and check instance lifecycle behavior.
|
|
183
|
+
- Exercise background and non-HTTP invocation paths if the provider is shared with them.
|
|
184
|
+
|
|
185
|
+
*Sources: [Nest injection scopes](https://docs.nestjs.com/fundamentals/injection-scopes), [Nest request lifecycle](https://docs.nestjs.com/faq/request-lifecycle).*
|
|
@@ -0,0 +1,226 @@
|
|
|
1
|
+
# ▲ Next.js Pitfalls
|
|
2
|
+
|
|
3
|
+
> **Purpose:** Common pitfalls and issues in Next.js 16+ projects
|
|
4
|
+
> **Primary official sources:** [Next.js TypeScript configuration](https://nextjs.org/docs/app/api-reference/config/next-config-js/typescript) · [Next.js 16 upgrade guide](https://nextjs.org/docs/app/guides/upgrading/version-16) · [Next.js Image configuration](https://nextjs.org/docs/app/api-reference/components/image#configuration-options)
|
|
5
|
+
|
|
6
|
+
## Project Convention Decision Rule
|
|
7
|
+
|
|
8
|
+
Before applying this guidance, verify the installed versions, router and rendering model, local rules, existing abstractions, configuration, and tests. Preserve a valid established project convention; do not replace it only because another documented approach is also valid. Use official sources to verify API behavior, compatibility, constraints, and migrations. Recommend a change only when the developer requests it or evidence shows the current approach is incompatible, unsafe, deprecated, broken, or responsible for a verified issue.
|
|
9
|
+
|
|
10
|
+
---
|
|
11
|
+
|
|
12
|
+
## Table of Contents
|
|
13
|
+
|
|
14
|
+
1. [Framework-level Masking — ignoreBuildErrors](#framework-level-masking)
|
|
15
|
+
2. [Legacy Build-time Lint Masking — Next.js 15 and Earlier](#legacy-build-time-lint-masking)
|
|
16
|
+
3. [Broken Lint Script After a Next.js 16 Upgrade](#broken-lint-script-after-a-nextjs-16-upgrade)
|
|
17
|
+
4. [Invalid next.config Properties](#invalid-nextconfig-properties)
|
|
18
|
+
5. [TSConfig Changes Triggered by Next.js](#tsconfig-changes-triggered-by-nextjs)
|
|
19
|
+
6. [New Lint Findings After an Upgrade](#new-lint-findings-after-an-upgrade)
|
|
20
|
+
7. [Warnings Need Triage](#warnings-need-triage)
|
|
21
|
+
8. [Choose Server and Client Boundaries Deliberately](#choose-server-and-client-boundaries-deliberately)
|
|
22
|
+
9. [Use Route Loading and Error Boundaries Before Rebuilding Them](#use-route-loading-and-error-boundaries-before-rebuilding-them)
|
|
23
|
+
10. [Avoid Hydration Mismatches by Preserving Initial Output](#avoid-hydration-mismatches-by-preserving-initial-output)
|
|
24
|
+
|
|
25
|
+
---
|
|
26
|
+
|
|
27
|
+
## Framework-level Masking
|
|
28
|
+
|
|
29
|
+
### Problem
|
|
30
|
+
The `typescript.ignoreBuildErrors: true` option in `next.config.*` skips Next.js's built-in TypeScript type-checking step during production builds. It does not run the check and suppress its errors, so it can allow type errors to reach deployment.
|
|
31
|
+
|
|
32
|
+
*Source: [Next.js TypeScript configuration](https://nextjs.org/docs/app/api-reference/config/next-config-js/typescript)*
|
|
33
|
+
|
|
34
|
+
> The official Next.js documentation warns: "If disabled, be sure you are running type checks as part of your build or deploy process, otherwise this can be very dangerous."
|
|
35
|
+
|
|
36
|
+
### Code (symptom)
|
|
37
|
+
```js
|
|
38
|
+
// next.config.js — bypasses Next.js type checking
|
|
39
|
+
typescript: { ignoreBuildErrors: true }
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
### Fix
|
|
43
|
+
Remove the flag; `false` is the default:
|
|
44
|
+
```js
|
|
45
|
+
module.exports = {
|
|
46
|
+
typescript: {
|
|
47
|
+
ignoreBuildErrors: false,
|
|
48
|
+
},
|
|
49
|
+
}
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
If a project temporarily keeps the flag, run an explicit type check such as `tsc --noEmit` in CI or the deployment pipeline.
|
|
53
|
+
|
|
54
|
+
---
|
|
55
|
+
|
|
56
|
+
## Legacy Build-time Lint Masking
|
|
57
|
+
|
|
58
|
+
**Evidence:** Field-validated in a real audit.
|
|
59
|
+
|
|
60
|
+
### Applicability
|
|
61
|
+
Next.js 15 and earlier. The `eslint.ignoreDuringBuilds` option was supported in these versions and allowed production builds to complete with ESLint errors.
|
|
62
|
+
|
|
63
|
+
*Source: [Next.js 15 ESLint configuration](https://nextjs.org/docs/15/app/api-reference/config/next-config-js/eslint)*
|
|
64
|
+
|
|
65
|
+
### Code (symptom)
|
|
66
|
+
```js
|
|
67
|
+
module.exports = {
|
|
68
|
+
eslint: {
|
|
69
|
+
ignoreDuringBuilds: true,
|
|
70
|
+
},
|
|
71
|
+
}
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
### Why it matters
|
|
75
|
+
This setting bypasses Next.js's built-in build-time lint failure. It may have been introduced as a temporary deployment workaround, but it hides lint failures unless ESLint runs independently in CI or another verified workflow.
|
|
76
|
+
|
|
77
|
+
### Version boundary
|
|
78
|
+
Next.js 16 removed `next lint`, build-time linting, and the `eslint` key in `next.config.*`. For Next.js 16+, remove this legacy config and run ESLint directly as a separate validation command.
|
|
79
|
+
|
|
80
|
+
---
|
|
81
|
+
|
|
82
|
+
## Broken Lint Script After a Next.js 16 Upgrade
|
|
83
|
+
|
|
84
|
+
### Problem
|
|
85
|
+
Starting with Next.js 16, `next lint` is removed. `next build` no longer runs linting, and the `eslint` key in `next.config.*` is removed.
|
|
86
|
+
|
|
87
|
+
Invoking the removed command can produce an error such as:
|
|
88
|
+
```
|
|
89
|
+
Invalid project directory provided, no such directory: .../lint
|
|
90
|
+
```
|
|
91
|
+
|
|
92
|
+
### Fix
|
|
93
|
+
Run ESLint directly and make linting a separate CI or deployment step:
|
|
94
|
+
```json
|
|
95
|
+
{
|
|
96
|
+
"scripts": {
|
|
97
|
+
"lint": "eslint ."
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
```
|
|
101
|
+
|
|
102
|
+
For flat-config setup and migration details, see [ESLint Migration](./eslint-migration.md).
|
|
103
|
+
|
|
104
|
+
---
|
|
105
|
+
|
|
106
|
+
## Invalid next.config Properties
|
|
107
|
+
|
|
108
|
+
### Problem
|
|
109
|
+
A property in an unsupported location in `next.config.*` can produce a configuration warning or be ignored. For example, `unoptimized` is not a top-level Next.js config option.
|
|
110
|
+
|
|
111
|
+
### Code (symptom)
|
|
112
|
+
```js
|
|
113
|
+
// Invalid location
|
|
114
|
+
module.exports = { unoptimized: true }
|
|
115
|
+
|
|
116
|
+
// Valid location
|
|
117
|
+
module.exports = { images: { unoptimized: true } }
|
|
118
|
+
```
|
|
119
|
+
|
|
120
|
+
### Fix
|
|
121
|
+
Use the documented `images.unoptimized` option:
|
|
122
|
+
```js
|
|
123
|
+
module.exports = {
|
|
124
|
+
images: {
|
|
125
|
+
unoptimized: true,
|
|
126
|
+
},
|
|
127
|
+
}
|
|
128
|
+
```
|
|
129
|
+
|
|
130
|
+
---
|
|
131
|
+
|
|
132
|
+
## TSConfig Changes Triggered by Next.js
|
|
133
|
+
|
|
134
|
+
### Problem
|
|
135
|
+
When TypeScript is added to a project, `next dev` and `next build` can create or update `tsconfig.json` with recommended settings and generated-type includes.
|
|
136
|
+
|
|
137
|
+
### Handling
|
|
138
|
+
- Review the complete `tsconfig.json` diff and identify why each change was made.
|
|
139
|
+
- Keep required generated-type includes, such as `.next/types/**/*.ts`, when the project uses Next.js route-aware types.
|
|
140
|
+
- Validate compiler-option changes, including `moduleResolution`, against the project's Next.js and TypeScript versions before accepting or reverting them.
|
|
141
|
+
- Commit intentional configuration changes so they are visible in review.
|
|
142
|
+
|
|
143
|
+
---
|
|
144
|
+
|
|
145
|
+
## New Lint Findings After an Upgrade
|
|
146
|
+
|
|
147
|
+
### Problem
|
|
148
|
+
After migrating to ESLint flat config or updating Next.js, ESLint, or plugins, new rules or changed analysis can reveal existing issues or introduce upgrade-specific incompatibilities.
|
|
149
|
+
|
|
150
|
+
### Common examples
|
|
151
|
+
- A callback referenced before declaration
|
|
152
|
+
- Non-deterministic logic during render, such as `Math.random()` in a component body
|
|
153
|
+
- An unused import that was previously not reported
|
|
154
|
+
|
|
155
|
+
### Handling
|
|
156
|
+
1. Analyze each finding individually.
|
|
157
|
+
2. Classify it as a pre-existing issue now detected, a configuration change, or an upgrade regression.
|
|
158
|
+
3. Apply a specific fix or document a narrowly justified exception.
|
|
159
|
+
|
|
160
|
+
---
|
|
161
|
+
|
|
162
|
+
## Warnings Need Triage
|
|
163
|
+
|
|
164
|
+
### Problem
|
|
165
|
+
A successful build can still emit warnings about configuration, deprecations, or behavior that affects production.
|
|
166
|
+
|
|
167
|
+
### Checklist
|
|
168
|
+
After a framework upgrade:
|
|
169
|
+
1. Run `next build` and capture the full output.
|
|
170
|
+
2. Review warnings as well as errors.
|
|
171
|
+
3. Determine the source, impact, and owner of each warning.
|
|
172
|
+
4. Fix the warning or document an accepted disposition according to the project's release policy.
|
|
173
|
+
|
|
174
|
+
### Rule of thumb
|
|
175
|
+
**A passing build with warnings requires triage; warnings are neither automatically deploy-blocking nor automatically acceptable.**
|
|
176
|
+
|
|
177
|
+
---
|
|
178
|
+
|
|
179
|
+
## Choose Server and Client Boundaries Deliberately
|
|
180
|
+
|
|
181
|
+
### Decision
|
|
182
|
+
In the App Router, components are Server Components by default. Add `'use client'` only when the component or one of its direct responsibilities requires client-side capabilities such as state, Effects, browser APIs, or event handlers.
|
|
183
|
+
|
|
184
|
+
### Verify first
|
|
185
|
+
- Identify the active router; do not apply App Router guidance to a Pages Router project.
|
|
186
|
+
- Keep the client boundary as narrow as the existing architecture permits.
|
|
187
|
+
- Inspect existing component boundaries and shared providers before moving a component to the client.
|
|
188
|
+
- Pass serializable props across the Server-to-Client boundary.
|
|
189
|
+
|
|
190
|
+
Do not convert a server-rendered subtree to a Client Component merely to solve a small interactive concern. Extract the interactive leaf when that preserves the project’s established composition pattern.
|
|
191
|
+
|
|
192
|
+
*Sources: [Next.js — Server and Client Components](https://nextjs.org/docs/app/getting-started/server-and-client-components) · [Next.js — use client](https://nextjs.org/docs/app/api-reference/directives/use-client)*
|
|
193
|
+
|
|
194
|
+
---
|
|
195
|
+
|
|
196
|
+
## Use Route Loading and Error Boundaries Before Rebuilding Them
|
|
197
|
+
|
|
198
|
+
### Decision
|
|
199
|
+
For App Router route segments, inspect existing `loading.*`, `error.*`, and shared layout conventions before adding component-local loading or error state. These files define framework-native boundaries for the segment and its descendants.
|
|
200
|
+
|
|
201
|
+
### Verify first
|
|
202
|
+
- Confirm whether the loading state is route-level, component-level, or owned by an existing client query abstraction.
|
|
203
|
+
- Preserve existing fallback, retry, error-reporting, and accessibility conventions.
|
|
204
|
+
- Do not use `loading.*` as a substitute for errors in a client-side mutation or interaction; use the project’s local feedback pattern there.
|
|
205
|
+
- Confirm the required error boundary shape for the installed Next version before creating one.
|
|
206
|
+
|
|
207
|
+
Use the smallest boundary that gives the intended user experience. A project may intentionally prefer a shared route skeleton or a local component state; preserve either approach when valid.
|
|
208
|
+
|
|
209
|
+
*Sources: [Next.js — Loading UI and Streaming](https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming) · [Next.js — Error Handling](https://nextjs.org/docs/app/building-your-application/routing/error-handling)*
|
|
210
|
+
|
|
211
|
+
---
|
|
212
|
+
|
|
213
|
+
## Avoid Hydration Mismatches by Preserving Initial Output
|
|
214
|
+
|
|
215
|
+
### Symptom
|
|
216
|
+
The server-rendered HTML differs from the first client render, producing a hydration warning, discarded markup, or visible flicker.
|
|
217
|
+
|
|
218
|
+
### Verify first
|
|
219
|
+
Look for browser-only values (`window`, storage, viewport), time, randomness, locale, and data that changes between the server and first client render. Confirm whether the component is intended to render consistently on both sides.
|
|
220
|
+
|
|
221
|
+
### Fix
|
|
222
|
+
Render the same initial output on server and client, then read browser-only state after mount when necessary. For an intentionally client-only widget, isolate it behind the project’s established client boundary rather than scattering hydration suppressions.
|
|
223
|
+
|
|
224
|
+
Do not use `suppressHydrationWarning` as a general fix; it is a narrow escape hatch and does not reconcile the underlying output.
|
|
225
|
+
|
|
226
|
+
*Source: [Next.js — React Hydration Error](https://nextjs.org/docs/messages/react-hydration-error)*
|
|
@@ -0,0 +1,148 @@
|
|
|
1
|
+
# Node.js Runtime Patterns
|
|
2
|
+
|
|
3
|
+
> **Purpose:** Diagnose and prevent common Node.js runtime, module, environment, and script failures.
|
|
4
|
+
> **Primary official sources:** [Node.js documentation](https://nodejs.org/docs/latest/api/) · [npm package.json documentation](https://docs.npmjs.com/cli/v11/configuring-npm/package-json) · [npm scripts documentation](https://docs.npmjs.com/cli/v11/using-npm/scripts)
|
|
5
|
+
|
|
6
|
+
## Project Convention Decision Rule
|
|
7
|
+
|
|
8
|
+
Before applying this guidance, verify the installed versions, local rules, existing abstractions, configuration, runtime environment, and tests. Preserve a valid established project convention; do not replace it only because another documented approach is also valid. Use official sources to verify API behavior, compatibility, constraints, and migrations. Recommend a change only when the developer requests it or evidence shows the current approach is incompatible, unsafe, deprecated, broken, or responsible for a verified issue.
|
|
9
|
+
|
|
10
|
+
---
|
|
11
|
+
|
|
12
|
+
## Table of Contents
|
|
13
|
+
|
|
14
|
+
1. [Runtime and Engines Misalignment](#runtime-and-engines-misalignment)
|
|
15
|
+
2. [ESM and CommonJS Interoperability](#esm-and-commonjs-interoperability)
|
|
16
|
+
3. [Environment Loading and Validation](#environment-loading-and-validation)
|
|
17
|
+
4. [Unhandled Async Failures](#unhandled-async-failures)
|
|
18
|
+
5. [Portable npm Scripts and Lifecycle Hooks](#portable-npm-scripts-and-lifecycle-hooks)
|
|
19
|
+
6. [Version Manager, CI, and Container Alignment](#version-manager-ci-and-container-alignment)
|
|
20
|
+
|
|
21
|
+
---
|
|
22
|
+
|
|
23
|
+
## Runtime and Engines Misalignment
|
|
24
|
+
|
|
25
|
+
### Symptom
|
|
26
|
+
A command works on one machine but fails in CI or production with syntax errors, unsupported APIs, native-module errors, or an `EBADENGINE` warning/error.
|
|
27
|
+
|
|
28
|
+
### Verify first
|
|
29
|
+
```sh
|
|
30
|
+
node --version
|
|
31
|
+
npm --version
|
|
32
|
+
node -p "process.version"
|
|
33
|
+
```
|
|
34
|
+
Compare those values with the root `package.json` `engines`, the CI runtime setup, container base image, and any version-manager file. `engines` expresses compatibility metadata; enforcement depends on the package manager and its configuration. See [npm `engines`](https://docs.npmjs.com/cli/v11/configuring-npm/package-json#engines).
|
|
35
|
+
|
|
36
|
+
### Fix
|
|
37
|
+
- Define a tested Node range in `engines`; use an exact version only when reproducibility requires it.
|
|
38
|
+
- Select a Node version explicitly in CI and containers rather than relying on a runner or image default.
|
|
39
|
+
- Rebuild native dependencies after changing Node versions; do not reuse artifacts built against an incompatible ABI.
|
|
40
|
+
- Keep local version-manager configuration aligned with the supported range.
|
|
41
|
+
|
|
42
|
+
---
|
|
43
|
+
|
|
44
|
+
## ESM and CommonJS Interoperability
|
|
45
|
+
|
|
46
|
+
### Symptom
|
|
47
|
+
`require is not defined`, `ERR_REQUIRE_ESM`, missing named exports, or different behavior between development and production builds.
|
|
48
|
+
|
|
49
|
+
### Verify first
|
|
50
|
+
Inspect the closest `package.json` for `"type"`, the file extension (`.mjs`, `.cjs`, `.js`), and the dependency's documented exports. Node determines module interpretation from these inputs. See [Node.js modules: packages](https://nodejs.org/docs/latest/api/packages.html) and [ECMAScript modules](https://nodejs.org/docs/latest/api/esm.html).
|
|
51
|
+
|
|
52
|
+
### Fix
|
|
53
|
+
- Choose one module system for new application code and declare it deliberately with `type` or explicit extensions.
|
|
54
|
+
- In ESM, import CommonJS through its default export when necessary, then read properties from that value.
|
|
55
|
+
- In CommonJS, use `import()` for an ESM-only dependency because synchronous `require()` has compatibility limits.
|
|
56
|
+
- Do not depend on undocumented deep imports or inferred named exports; use the dependency's public export map.
|
|
57
|
+
|
|
58
|
+
```js
|
|
59
|
+
// CommonJS loading an ESM package
|
|
60
|
+
const loadTool = () => import('an-esm-only-package')
|
|
61
|
+
|
|
62
|
+
// ESM consuming CommonJS
|
|
63
|
+
import legacyPackage from 'legacy-package'
|
|
64
|
+
const { createClient } = legacyPackage
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
---
|
|
68
|
+
|
|
69
|
+
## Environment Loading and Validation
|
|
70
|
+
|
|
71
|
+
### Symptom
|
|
72
|
+
A service starts with `undefined` configuration, uses development credentials in another environment, or fails only after handling traffic.
|
|
73
|
+
|
|
74
|
+
### Verify first
|
|
75
|
+
Identify where configuration is loaded, which process owns it, and whether the expected variables are present without printing secrets:
|
|
76
|
+
|
|
77
|
+
```sh
|
|
78
|
+
node -e "console.log(Boolean(process.env.REQUIRED_SETTING))"
|
|
79
|
+
```
|
|
80
|
+
Node exposes the process environment through [`process.env`](https://nodejs.org/docs/latest/api/process.html#processenv). Recent Node releases also document loading `.env` files with [`--env-file`](https://nodejs.org/docs/latest/api/cli.html#--env-fileconfig); verify availability in the exact Node version in use before relying on it.
|
|
81
|
+
|
|
82
|
+
### Fix
|
|
83
|
+
- Load configuration before importing or initializing code that reads it.
|
|
84
|
+
- Validate required variables, types, allowed values, and cross-field constraints at process startup; fail with variable names, never secret values.
|
|
85
|
+
- Treat environment values as strings until parsed and validated.
|
|
86
|
+
- Keep secrets out of source control and inject them through the deployment environment or an approved secret mechanism.
|
|
87
|
+
|
|
88
|
+
---
|
|
89
|
+
|
|
90
|
+
## Unhandled Async Failures
|
|
91
|
+
|
|
92
|
+
### Symptom
|
|
93
|
+
A request hangs, an error appears as an unhandled rejection, or the process exits unexpectedly after an async operation fails.
|
|
94
|
+
|
|
95
|
+
### Verify first
|
|
96
|
+
Trace every promise-returning call to an `await`/`return`/`.catch()`. Review the runtime's unhandled-rejection behavior for the deployed Node version: [Node.js `unhandledRejection`](https://nodejs.org/docs/latest/api/process.html#event-unhandledrejection).
|
|
97
|
+
|
|
98
|
+
### Fix
|
|
99
|
+
- Await promises inside `try`/`catch` where recovery or translation is needed.
|
|
100
|
+
- Return promises from wrapper functions so callers can observe failures.
|
|
101
|
+
- At process boundaries, log actionable context, release resources, and exit or restart according to the service's supervision model.
|
|
102
|
+
- Do not use a global rejection handler as a substitute for local error handling; it is an observability and last-resort shutdown boundary.
|
|
103
|
+
|
|
104
|
+
```js
|
|
105
|
+
async function readConfiguration() {
|
|
106
|
+
try {
|
|
107
|
+
return await fetchConfiguration()
|
|
108
|
+
} catch (error) {
|
|
109
|
+
throw new Error('Configuration could not be loaded', { cause: error })
|
|
110
|
+
}
|
|
111
|
+
}
|
|
112
|
+
```
|
|
113
|
+
|
|
114
|
+
---
|
|
115
|
+
|
|
116
|
+
## Portable npm Scripts and Lifecycle Hooks
|
|
117
|
+
|
|
118
|
+
### Symptom
|
|
119
|
+
A script passes on one operating system but fails in CI, or an install unexpectedly runs build, download, or publish-related code.
|
|
120
|
+
|
|
121
|
+
### Verify first
|
|
122
|
+
Review `scripts` and lifecycle names in `package.json`, then run the exact package-manager command used by CI. npm exposes lifecycle context through environment variables and has command-specific lifecycle behavior; see [npm scripts](https://docs.npmjs.com/cli/v11/using-npm/scripts) and [lifecycle scripts](https://docs.npmjs.com/cli/v11/using-npm/scripts#life-cycle-operation-order).
|
|
123
|
+
|
|
124
|
+
### Fix
|
|
125
|
+
- Prefer Node-based scripts or cross-platform tooling over shell-specific syntax, utilities, and environment assignments.
|
|
126
|
+
- Make each script's inputs and outputs explicit; use package binaries through the package manager rather than assuming global installations.
|
|
127
|
+
- Keep `prepare`, `prepack`, `prepublishOnly`, and install hooks small and intentional. Verify which commands trigger each hook before placing builds or side effects there.
|
|
128
|
+
- Run install commands with lifecycle scripts disabled only as a diagnostic or controlled security measure, not as a permanent workaround for an unknown hook.
|
|
129
|
+
|
|
130
|
+
---
|
|
131
|
+
|
|
132
|
+
## Version Manager, CI, and Container Alignment
|
|
133
|
+
|
|
134
|
+
### Problem
|
|
135
|
+
Node is pinned locally but not in CI or the deployment image, creating a runtime matrix that is neither tested nor supported.
|
|
136
|
+
|
|
137
|
+
### Fix
|
|
138
|
+
Use one documented source of truth for the supported Node range, and make every execution environment select a compatible runtime:
|
|
139
|
+
|
|
140
|
+
| Environment | Check |
|
|
141
|
+
| --- | --- |
|
|
142
|
+
| Local development | Version-manager configuration and `node --version` |
|
|
143
|
+
| CI | Explicit setup action/task and cache key including Node and lockfile |
|
|
144
|
+
| Container | Explicit base-image tag and rebuild after runtime changes |
|
|
145
|
+
| Deployment | Platform runtime setting or image runtime |
|
|
146
|
+
|
|
147
|
+
### Verify first
|
|
148
|
+
Print `node --version` at the start of CI and from the built container. Install from the committed lockfile, then run the same test/build commands that validate local development. For supported release lines and schedules, use the [Node.js release page](https://nodejs.org/en/about/previous-releases).
|