Next.js Config IntelliSense
IntelliSense autocomplete for Next.js 15/16 Route Segment Config exports with automatic version detection and deprecation warnings.
Features
- Smart Autocomplete: Type
export const in Next.js route files to get IntelliSense suggestions for all route segment config options
- Version-Aware: Automatically detects your Next.js version from
package.json and shows/hides options accordingly
- Deprecation Warnings: Shows deprecation notices for options that are removed or deprecated in Next.js 15/16
- Comprehensive Documentation: Each option includes detailed explanations of behavior and use cases
- Zero Configuration: Works out of the box in any Next.js project
Supported Route Segment Configs
Core Options
dynamic - Controls rendering strategy (auto, force-dynamic, force-static, error)
- Next.js 16: Shows migration hints for
cacheComponents when applicable
fetchCache - Data caching strategies (7 options from aggressive caching to no-store)runtime - Runtime environment (nodejs, edge)
- Automatically hides deprecated
experimental-edge in Next.js 15+
preferredRegion - Deployment region preferences (auto, global, home)dynamicParams - Dynamic parameter handling (boolean)experimental_ppr - Partial Prerendering toggle
- Marked as deprecated in Next.js 16 with migration guidance
revalidate - Cache revalidation intervals (false, 0, or seconds)maxDuration - Maximum execution time (5, 10, 30, 60 seconds)
Requirements
- VS Code 1.96.0 or higher
- Next.js project (version detection works with Next.js 13+)
Usage
- Open a TypeScript/JavaScript file in your Next.js
app directory (page.tsx, layout.tsx, route.ts, etc.)
- Type
export const followed by a config name
- Select from the autocomplete suggestions
Example
// Type: export const dynamic =
// IntelliSense will suggest: "auto", "force-dynamic", "force-static", "error"
export const dynamic = "force-dynamic";
export const runtime = "edge";
export const revalidate = 60;
Version Detection
The extension automatically reads your package.json to detect the Next.js version and:
"export cost ..." config completionss
use directives completions at the top of the file
Shows version-appropriate options
Hides deprecated options in newer versions
Displays migration hints when using deprecated features
Filters out removed options (e.g., experimental-edge runtime in Next.js 15+)
Future To-do's
I kinda want to implement this, I want to first see how useful it could be (i want it to hurt first)
these were suggest by claude.
Next.js 16 Advanced Caching Features
- [ ]
"use cache" directive autocomplete (file/component/function level)
- [ ]
cacheLife() function parameter suggestions with presets (seconds, minutes, hours, days, weeks, max)
- [ ]
cacheTag() function autocomplete with tag name suggestions
- [ ]
revalidateTag() autocomplete for cache invalidation
- [ ] Detection of
cacheComponents config in next.config.js for smarter deprecation warnings
- [ ] Context-aware suggestions based on file type (page, layout, route handler)
Enhanced Developer Experience
- [ ] Quick fixes for deprecated options with automatic migration
- [ ] Hover documentation for existing config values
- [ ] Code snippets for common config combinations
- [ ] Validation warnings for incompatible config combinations
Known Issues
None at this time. Please report issues on the GitHub repository.
Release Notes
0.0.1
Initial release with:
- Support for all Next.js 15/16 Route Segment Config options
- Automatic version detection from package.json
- Deprecation warnings for Next.js 16
- Smart filtering of removed options
Credits
Inspired by nextjs-route-config-intellisense by Leonardo Cavalcante, updated for Next.js 15/16 compatibility.
License
MIT
| |
