Next.js Route Intelligence

VS Code extension for fast Next.js inspection (App Router and Pages). Visualize routes, caching, Server Actions, API endpoints, and common anti-patterns to keep production quality high.

Categories

• Next.js
• Routing

What it does

• Interactive route map with rendering badges (SSG / SSR / ISR / RSC / Client)
• Server Actions scan with inline issue hints
• Cache and ISR analysis, runtime tracking, API Routes coverage
• Auto-detection of anti-patterns with fix suggestions
• Real-time updates on file changes
• Dedicated Next.js Inspector panel and activity bar icon

Installation

1. In VS Code open Extensions.
2. Search Next.js Route Intelligence and install.
3. Open a Next.js project — activation is automatic (detects next.config.js, app/, or pages/).

Usage

• NRI: Show Route Map — open the interactive route map
• NRI: Refresh Routes — force a rescan
• NRI: Analyze Current File — inspect the active file
• NRI: Show Server Actions — list detected Server Actions
• NRI: Inspect API Routes — inspect API endpoints

Route Map panel

• Route tree with files, rendering badges, and Server Action indicators
• Click to open the target file in the editor

Anti-patterns & diagnostics

• ❌ Errors (critical), ⚠️ Warnings, ℹ️ Recommendations
• Examples: both use client and use server in one file, Server Actions inside Client Components, heavy deps in Server Components, dynamic imports without ssr: false, static pages calling dynamic APIs

Server Actions

• Shows function name, file path, parameters, and issues; click to jump to line

API Routes

• Lists endpoints with path, HTTP methods, runtime (nodejs/edge), and flagged problems

Links

• GitHub profile: https://github.com/agentdmitro
• Repository: https://github.com/agentdmitro/Next-Inspector
• LinkedIn: https://www.linkedin.com/in/agentdmitro/

Next.js Route Intelligence — українською

Плагін VS Code для швидкої інспекції Next.js (App Router і Pages). Візуалізує маршрути, кеш, Server Actions, API endpoints і антипатерни, щоб тримати код у production‑формі.

Що вміє

• Інтерактивна карта маршрутів із бейджами рендерингу (SSG / SSR / ISR / RSC / Client)
• Сканування Server Actions з підсвічуванням проблем
• Аналіз кешу та ISR, відстеження runtime і API Routes
• Автоматичне виявлення антипатернів та пропозиції фіксів
• Оновлення в реальному часі при змінах файлів
• Окрема панель Next.js Inspector і іконка в сайдбарі

Встановлення

1. У VS Code відкрийте Extensions.
2. Знайдіть Next.js Route Intelligence та встановіть.
3. Відкрийте проект Next.js — плагін активується автоматично (виявляє next.config.js, app/ або pages/).

Використання

• NRI: Show Route Map — інтерактивна карта маршрутів
• NRI: Refresh Routes — примусове оновлення
• NRI: Analyze Current File — аналіз поточного файлу
• NRI: Show Server Actions — список Server Actions
• NRI: Inspect API Routes — інспекція API маршрутів

Панель Route Map

• Дерево маршрутів із файлами, бейджами рендерингу та індикаторами Server Actions
• Клік відкриває потрібний файл

Антипатерни та діагностика

• ❌ Помилки (критичні), ⚠️ Попередження, ℹ️ Рекомендації
• Приклади: use client і use server в одному файлі, Server Actions у Client Components, важкі залежності в Server Components, dynamic imports без ssr: false, статичні сторінки з динамічними API

Server Actions

• Показує назву, шлях до файлу, параметри й проблеми; клік переходить до рядка

API Routes

• Перелік ендпоінтів із маршрутами, HTTP методами та runtime (nodejs/edge), підсвічування проблем