The Nextjs Component Identifier is a Visual Studio Code extension designed to help developers working on Next.js projects. It visually distinguishes between client-side and server-side components in the VS Code file explorer, enhancing productivity and clarity.
Features
Dynamic Decorations:
Adds a C (orange) badge for client-side components.
Adds an S (blue) badge for server-side components.
Displays a tooltip when you hover over the file:
Client-Side Component
Server-Side Component
Automatic Detection:
Automatically identifies client-side and server-side files in src folders of your Nextjs project.
Real-Time Updates:
Decorations update dynamically whenever files are saved, created, or deleted.
Getting Started
Installation
Open Visual Studio Code.
Go to the Extensions view by clicking the Extensions icon in the Activity Bar or pressing Ctrl+Shift+X.
Search for Nextjs Component Identifier.
Click Install.
Usage
Open a Next.js project in VS Code.
Ensure your project has a next.config.js or next.config.mjs file.
The extension will automatically decorate files in the src folder:
Orange (C): Client-Side.
Blue (S): Server-Side.
Hovering over the file will display one of the following tooltips:
Client Side Component
Server Side Component
Commands
Command
Description
Scan for Client/Server Components
Manually trigger the file scan and decorations.
Screenshots
Client and Server Side File Decorations
Requirements
Next.js Projects:
Must have a next.config.js or next.config.mjs file.
Decorations are applied only in src folders.
Known Issues
Git Decorations:
If Git decorations are enabled, they might override the extension’s color changes but 'C'/'S' badge will still appear. Disable Git decorations in VS Code settings to see the colors as well:
"git.decorations.enabled": false
Release Notes
1.0.0
Initial release.
Automatic decoration for src folders in Next.js projects.
Dynamic updates for saved, added, or deleted files.
Contributing
If you encounter a bug or have suggestions for new features:
