Next.js Component Highlighter

Visually distinguish between Server Components and Client Components in Next.js with color-coded line highlighting.

Features

• 🟢 Green highlighting for Server Components (default)
• 🔵 Blue highlighting for Client Components (with "use client")
• 🟡 Yellow highlighting for Server Actions (with "use server")
• Smart detection of component boundaries
• Works with multiple components in a single file
• Non-intrusive visual feedback
• Handles edge cases: nested functions, arrow functions, class components, etc.

Usage

The extension automatically activates for .tsx, .jsx, .ts, and .js files in Next.js projects.

Toggle Extension

Press Cmd+Shift+P (Mac) or Ctrl+Shift+P (Windows/Linux) and type:

Next.js: Toggle Component Highlighting

Examples

Server Component (Green)

// No directive = Server Component by default
export default function HomePage() {
  return <div>Server Component</div>;
}

Client Component (Blue)

"use client";

export default function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

Server Action (Yellow)

"use server";

export async function submitForm(data: FormData) {
  // Server action code
}

Multiple Components in One File

"use client";

// Both will be highlighted blue
function ComponentA() {
  return <div>A</div>;
}

function ComponentB() {
  return <div>B</div>;
}

Installation

1. Clone this repository
2. Run npm install
3. Press F5 to open a new VS Code window with the extension loaded
4. Open a Next.js project and start coding!

Publishing

To publish to VS Code Marketplace:

npm install -g @vscode/vsce
vsce package
vsce publish

License

MIT