← All posts

Arcovia maps architecture health in React and Next.js

Arcovia analyzes React and Next.js projects, maps dependencies, explains its architecture score, and highlights refactoring priorities.

Arcovia maps architecture health in React and Next.js
Contents

In brief

Arcovia is an open-source architecture analysis tool for React and Next.js projects. It produces an interactive HTML report with a dependency graph, architecture hotspots, a health score, and recommendations for where a refactor might pay off first.

Its author built the initial version during OpenAI Build Week Hackathon. The important design choice is that the score comes from deterministic code analysis rather than an LLM, so a report can be reproduced and inspected instead of treated as a black-box verdict.

What happened

Frontend teams already have tools for local code issues: ESLint catches suspect patterns, formatters keep source consistent, and code-quality services report rule violations. Large applications still leave a broader question unanswered: which parts of the system are becoming dependency bottlenecks, and where is maintenance work starting to concentrate?

Arcovia parses a repository, builds a project model, derives a dependency graph, and evaluates architecture rules before rendering a report. The report combines an overall Architecture Health Score with category breakdowns and an explanation of the findings that affected it.

The current analyzer looks for signals including oversized modules and components, deeply nested JSX, duplicate imports, unused exports, orphaned modules, and nodes with unusually high fan-in or fan-out. None of those signals is automatically a defect; the value is in seeing them in project context and deciding which deserve attention.

Why it matters

Architecture rarely collapses in one pull request. A component quietly absorbs more responsibilities, a shared utility becomes the route through which everything communicates, or a temporary shortcut gets copied into several features. By the time the pattern becomes obvious in review, separating it can be costly.

An aggregate score is useful only when developers can interrogate it. A team needs more than “the project scored 62”: it needs to know which rules contributed, which files have the largest impact, and why particular dependency paths matter. Arcovia is intended to make that discussion concrete, not to replace architectural judgment with a number.

Keeping the analysis deterministic is especially useful for comparisons. The same revision should produce the same result, allowing teams to compare branches and releases. AI can still help explain findings or suggest refactoring options, but it should not be the sole authority behind the measurement.

In practice

Arcovia can be run from a project root with npx arcovia analyze .. Before making the report part of a regular engineering process, validate its results against a codebase the team already knows and decide which signals match its own conventions.

  1. Start with the dependency graph and inspect modules that concentrate an unusual number of relationships.
  2. Compare large components with their change history; a file changed for unrelated reasons is often a good split candidate.
  3. Treat the score as a review prompt, not a release gate. Use it to investigate structural changes after a substantial feature.
  4. Keep reports for important branches so that improvements and regressions can be traced to rules and dependencies rather than impressions.

The roadmap mentions GitHub Actions integration, report history, a VS Code extension, project comparisons, team dashboards, and AI-assisted architecture coaching. Those additions will still need real-world calibration: architecture rules and their weighting depend on the product and team.

Takeaway

Arcovia is more interesting for its division of responsibilities than for an “AI fixes architecture” claim. Code and dependencies are evaluated using explainable rules; AI assistance can make the report easier to interpret and speed up discussion of alternatives.

For React and Next.js teams, that positions the project as a layer between linting and an architecture review. If its scoring remains transparent, it can surface growing coupling early enough to make the next refactor a deliberate choice rather than an emergency.