docs(examples): add Next.js v16 example#1198
Conversation
📝 WalkthroughWalkthroughThis pull request introduces a complete Next.js example application demonstrating HTTP proxy middleware configuration, along with updates to root-level configuration files to exclude the new example from linting and spell-checking. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Comment |
commit: |
chimurai
force-pushed
the
example-nextjs-16
branch
from
aa8aed6 to
a1564c3
Compare
|
coverage: 93.103%. remained the same — example-nextjs-16 into master |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (2)
examples/next-app/app/globals.css (1)
40-43: Keep a stronger default link affordance.Line 42 removes underlines globally; this makes links harder to identify. Consider keeping underline by default (or adding an equivalent persistent non-color cue).
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@examples/next-app/app/globals.css` around lines 40 - 43, The global rule for the anchor selector "a" removes underlines (text-decoration: none), reducing link affordance; revert or adjust that rule so anchors retain a persistent non-color cue—either remove the text-decoration override from the "a" selector or change it to a persistent underline (or add a focused/visited underline variant), or scope the no-underline rule to a utility class (e.g., ".no-underline") so only explicitly marked links lose underlines; update the "a" selector in globals.css accordingly and ensure any components relying on no-underline use the utility class instead.examples/next-app/README.md (1)
1-36: Consider adding one repo-specific pointer for the proxy example.This reads like a stock template; a short note linking to the proxy setup doc/file would make the example easier to use in this repo context.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@examples/next-app/README.md` around lines 1 - 36, Update the examples/next-app README.md to include a single repo-specific pointer to the proxy example: add a short sentence/link (e.g., "See the proxy setup for this repo") near the "Getting Started" or just after the dev server snippet so users know where to find the proxy configuration, and link it to the repository's proxy setup documentation/file (the proxy setup doc referenced by this repo).
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@eslint.config.mjs`:
- Line 10: The globalIgnores call currently excludes the entire
examples/next-app tree; change it to ignore only build/artifact directories
(e.g., '.next') instead of source files so linting still runs on app/layout.tsx,
app/page.tsx, next.config.ts; update the globalIgnores(['dist',
'examples/next-app']) invocation to replace 'examples/next-app' with the
appropriate artifact paths (such as 'examples/next-app/.next') so only generated
artifacts are ignored while source files remain linted.
In `@examples/next-app/pages/api/_proxy.ts`:
- Line 8: The proxy configuration is using an insecure upstream URL (the target
property) with "http://jsonplaceholder.typicode.com"; update the proxy target to
use HTTPS (e.g., "https://jsonplaceholder.typicode.com") in the proxy setup so
the proxy in pages/api/_proxy.ts forwards over TLS, and verify any related
settings that depend on protocol (such as changeOrigin or secure flags) in the
same proxy configuration.
---
Nitpick comments:
In `@examples/next-app/app/globals.css`:
- Around line 40-43: The global rule for the anchor selector "a" removes
underlines (text-decoration: none), reducing link affordance; revert or adjust
that rule so anchors retain a persistent non-color cue—either remove the
text-decoration override from the "a" selector or change it to a persistent
underline (or add a focused/visited underline variant), or scope the
no-underline rule to a utility class (e.g., ".no-underline") so only explicitly
marked links lose underlines; update the "a" selector in globals.css accordingly
and ensure any components relying on no-underline use the utility class instead.
In `@examples/next-app/README.md`:
- Around line 1-36: Update the examples/next-app README.md to include a single
repo-specific pointer to the proxy example: add a short sentence/link (e.g.,
"See the proxy setup for this repo") near the "Getting Started" or just after
the dev server snippet so users know where to find the proxy configuration, and
link it to the repository's proxy setup documentation/file (the proxy setup doc
referenced by this repo).
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 4f19f482-db7e-483a-9b43-bbc35e951a31
⛔ Files ignored due to path filters (7)
examples/next-app/app/favicon.icois excluded by!**/*.icoexamples/next-app/package-lock.jsonis excluded by!**/package-lock.jsonexamples/next-app/public/file.svgis excluded by!**/*.svgexamples/next-app/public/globe.svgis excluded by!**/*.svgexamples/next-app/public/next.svgis excluded by!**/*.svgexamples/next-app/public/vercel.svgis excluded by!**/*.svgexamples/next-app/public/window.svgis excluded by!**/*.svg
📒 Files selected for processing (14)
cspell.jsoneslint.config.mjsexamples/next-app/.gitignoreexamples/next-app/PROXY.mdexamples/next-app/README.mdexamples/next-app/app/globals.cssexamples/next-app/app/layout.tsxexamples/next-app/app/page.module.cssexamples/next-app/app/page.tsxexamples/next-app/next.config.tsexamples/next-app/package.jsonexamples/next-app/pages/api/_proxy.tsexamples/next-app/pages/api/users.tsexamples/next-app/tsconfig.json
| eslint.configs.recommended, | ||
| tseslint.configs.recommended, | ||
| globalIgnores(['dist']), | ||
| globalIgnores(['dist', 'examples/next-app']), |
There was a problem hiding this comment.
🧩 Analysis chain
🌐 Web query:
In ESLint flat config, does globalIgnores(['examples/next-app']) recursively ignore all files under that directory (including .ts/.tsx source files)?
💡 Result:
Yes—if the pattern matches a directory, ESLint will skip traversing into it, so all files under it (including .ts/.tsx) are ignored. ESLint’s docs show directory ignores using a trailing slash (e.g. .config/) and note this means “file search will not traverse into it at all.” [1]
So prefer:
globalIgnores(["examples/next-app/"])Note: patterns are resolved relative to eslint.config.*, and (unlike .gitignore) a pattern like examples/next-app (no **/) won’t match directories with that name elsewhere; to match anywhere, use:
globalIgnores(["**/examples/next-app/"])
``` [1]
**Sources:** [1]
---
🏁 Script executed:
```shell
# Check if examples/next-app exists and what's in it
fd --type d 'examples' -x ls -la {}Repository: chimurai/http-proxy-middleware
Length of output: 983
🏁 Script executed:
# Examine the eslint.config.mjs file
cat -n eslint.config.mjs | head -30Repository: chimurai/http-proxy-middleware
Length of output: 1048
🏁 Script executed:
# Look for any .gitignore or similar to understand what artifacts are typically ignored
fd -e gitignore -e eslintignore | xargs cat -nRepository: chimurai/http-proxy-middleware
Length of output: 56
🏁 Script executed:
# Explore the next-app directory structure
find examples/next-app -maxdepth 2 -type f -o -type d | head -50Repository: chimurai/http-proxy-middleware
Length of output: 751
🏁 Script executed:
# Check what directories typically exist in a Next.js app
ls -la examples/next-app/Repository: chimurai/http-proxy-middleware
Length of output: 806
🏁 Script executed:
# Check what's in the next-app's .gitignore to understand what artifacts are generated
cat examples/next-app/.gitignoreRepository: chimurai/http-proxy-middleware
Length of output: 553
Ignore only generated artifacts, not the entire example source tree.
Line 10 disables linting for all examples/next-app source files. This prevents detecting regressions in actual source code like app/layout.tsx, app/page.tsx, and next.config.ts. The Next.js build directory .next/ is the primary artifact that should be excluded from linting.
Proposed adjustment
- globalIgnores(['dist', 'examples/next-app']),
+ globalIgnores(['dist', 'examples/next-app/.next']),📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| globalIgnores(['dist', 'examples/next-app']), | |
| globalIgnores(['dist', 'examples/next-app/.next']), |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@eslint.config.mjs` at line 10, The globalIgnores call currently excludes the
entire examples/next-app tree; change it to ignore only build/artifact
directories (e.g., '.next') instead of source files so linting still runs on
app/layout.tsx, app/page.tsx, next.config.ts; update the globalIgnores(['dist',
'examples/next-app']) invocation to replace 'examples/next-app' with the
appropriate artifact paths (such as 'examples/next-app/.next') so only generated
artifacts are ignored while source files remain linted.
| // Singleton | ||
| // prevent a new proxy being created for every request | ||
| export const proxyMiddleware = createProxyMiddleware<NextApiRequest, NextApiResponse>({ | ||
| target: 'http://jsonplaceholder.typicode.com', |
There was a problem hiding this comment.
Use HTTPS for the upstream target.
Line 8 currently proxies over plaintext HTTP, which weakens transport security and makes the sample unsafe to copy into real usage.
Proposed fix
- target: 'http://jsonplaceholder.typicode.com',
+ target: 'https://jsonplaceholder.typicode.com',📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| target: 'http://jsonplaceholder.typicode.com', | |
| target: 'https://jsonplaceholder.typicode.com', |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@examples/next-app/pages/api/_proxy.ts` at line 8, The proxy configuration is
using an insecure upstream URL (the target property) with
"http://jsonplaceholder.typicode.com"; update the proxy target to use HTTPS
(e.g., "https://jsonplaceholder.typicode.com") in the proxy setup so the proxy
in pages/api/_proxy.ts forwards over TLS, and verify any related settings that
depend on protocol (such as changeOrigin or secure flags) in the same proxy
configuration.
2 participants
Summary by CodeRabbit
New Features
Documentation
Chores