🕵️‍♂️ Next Component Analyzer

Stop guessing if your Next.js components should be Server or Client — let the analyzer do the work.

Ever added "use client" somewhere just because “it might need state” and then wondered a week later, “Wait… does this even need to be a client component?” Yeah… we’ve all been there.

Enter Next Component Analyzer: your CLI sidekick for:

• Scanning your entire Next.js repo 🔍
• Detecting React hooks, browser APIs, and JSX event handlers 🪝
• Suggesting whether a component should be Server or Client
• Highlighting unnecessary "use client" directives 💥

🚀 Features

• AST-based analysis — no more false positives from naive string matching
• Component detection — ignores utils, helpers, configs, and other boring stuff
• Classification into four meaningful categories:

| Category | What it means | |----------|----------------| | Client Component (correct) | Has client features and "use client" | | Suggested: Client Component | Has client features but missing "use client" | | Suggested: Server Component | No client features, no "use client" | | Could be Server Component (unnecessary client) | "use client" is present, but no client features |

• Detects: React hooks, Next navigation hooks, browser APIs, JSX events

⚡ Installation

# Run without installing
npx next-component-analyzer

# Or install globally
npm install -g next-component-analyzer
next-component-analyzer

Programmatic Usage

next-component-analyzer can also be used programmatically in scripts, CI pipelines, or other developer tools.

import { analyzeProject } from "next-component-analyzer"

async function run() {
  const results = await analyzeProject()

  console.log(results)
}

run()

Example Output

[
  {
    "filePath": "app/page.tsx",
    "classification": "server",
    "detected": ["fetch"]
  },
  {
    "filePath": "components/button.tsx",
    "classification": "client",
    "detected": ["useState", "useEffect"]
  }
]

Use Cases

The programmatic API allows you to:

• Integrate analysis into CI pipelines
• Build custom reports or dashboards
• Run automated architecture checks
• Create editor or IDE integrations

Internally, the CLI now uses the same programmatic API, ensuring consistent results across both usage methods.

🧑‍💻 Author

Built with mild obsession and an unreasonable number of AST nodes by cinfinit.

I like building developer tools that solve the tiny annoyances we all pretend don't exist — like staring at a Next.js component wondering “Does this actually need "use client"?”

If this tool saved you from one unnecessary client component, my work here is done.

If it saved you from ten, we can both agree "use client" was getting a little out of hand..

• GitHub: https://github.com/cinfinit
• Twitter/X: https://x.com/cinfinitedev

P.S. If the analyzer roasts your component architecture… that's between you and your React hooks.

Changelog

[0.1.2] - 2026-03-13

Programmatic API Support

next-component-analyzer now exposes a programmatic API, allowing the analyzer to be used directly in scripts, CI pipelines, and other tooling instead of only through the CLI.

✨ Added

New function to run the analyzer programmatically.

Results can now be consumed as structured data instead of only CLI output.

Enables integrations with CI tools, custom dashboards, and developer workflows.