docs: Add custom labels configuration example
Adds a VS Code/Cursor workspace configuration example for custom editor labels that works with all Next.js file conventions.
This improves the developer experience when working with multiple routing files (page, layout, error, etc.) by displaying the parent directory name alongside the filename in VS Code tabs, making it easier to distinguish between files with identical names.
Allow CI Workflow Run
- [ ] approve CI run for commit: 4568b7f3c9a71de58a03b56bb176676b52f83dcb
Note: this should only be enabled once the PR is ready to go and can only be enabled by a maintainer
Excellent documentation addition! 🎯
This is a super practical tip that many developers will appreciate. Having multiple page.tsx or layout.tsx tabs open can be confusing, and this VS Code/Cursor configuration solves that pain point perfectly.
Suggestions:
-
Consider adding JetBrains IDEs (WebStorm, IntelliJ IDEA) since they're also popular:
Settings → Editor → File Types → Add pattern for custom display -
Minor wording improvement - maybe change "When working with multiple special files" to "When working with App Router special files" to be more specific?
-
Example screenshot? A before/after image showing
page.tsxvsdashboard/page.tsxin tabs would make this even clearer (though I understand if that's out of scope).
Overall, this is a valuable DX improvement for the docs! 👏