next.js icon indicating copy to clipboard operation
next.js copied to clipboard

docs: Add custom labels configuration example

Open Willem-Jaap opened this issue 1 week ago • 1 comments

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.

Willem-Jaap avatar Dec 11 '25 09:12 Willem-Jaap

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

nextjs-bot avatar Dec 11 '25 09:12 nextjs-bot

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:

  1. Consider adding JetBrains IDEs (WebStorm, IntelliJ IDEA) since they're also popular:

    Settings → Editor → File Types → Add pattern for custom display
    
  2. Minor wording improvement - maybe change "When working with multiple special files" to "When working with App Router special files" to be more specific?

  3. Example screenshot? A before/after image showing page.tsx vs dashboard/page.tsx in 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! 👏

harikapadia999 avatar Dec 13 '25 03:12 harikapadia999