Next.js Client/Server Indicator

This Visual Studio Code extension provides visual indicators for Next.js projects, showing whether a file is a client-side or server-side component, and detecting routes for Next.js 13+ app directory structure.

Screenshot

Demo Video

Check out our demo video to see the extension in action:

Features

• Status bar indicator showing "Client" or "Server" for Next.js components.
• File badges ('C' for Client, 'S' for Server) on file icons.
• Route detection for Next.js 13+ app directory structure.
• Works with TypeScript and JavaScript files.
• Automatically updates as you switch between files.

How it works

The extension analyzes the content of your current file:

• If it contains 'use client' or "use client", it's marked as a Client component.
• Otherwise, it's considered a Server component.
• For files within the app directory, the extension detects and displays the corresponding route.
• File icons are decorated with 'C' or 'S' badges to indicate component type.

Requirements

• Visual Studio Code v1.60.0 or higher
• Next.js project (optimized for Next.js 13+ with app directory structure)

Extension Settings

This extension contributes the following settings:

• nextjs-client-server-indicator.showBadges: Enable/disable 'C' and 'S' badges on file icons (default: true).
• nextjs-client-server-indicator.showStatusBar: Enable/disable 'Client' or 'Server' indicator in the status bar (default: true).
• nextjs-client-server-indicator.clientColor: Set the color for Client components in the status bar (default: "").
• nextjs-client-server-indicator.serverColor: Set the color for Server components in the status bar (default: "").

Note: After changing these settings, you will be prompted to reload the VS Code window for the changes to take full effect.

Release Notes

See the CHANGELOG.md file for detailed release notes.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

This project is licensed under a custom license that allows free personal use but requires contacting the author for commercial use. See the LICENSE.txt file for details.

For commercial use inquiries, please contact the author (Chris Lally) to obtain a commercial license.