@cuekit-cli/nextjs

Next.js project analyzer for Cuekit CLI. Analyzes Next.js projects using both App Router and Pages Router to detect routes, components, and interactive elements.

Overview

This package provides specialized analysis for Next.js projects, supporting both the App Router (app/ directory) and Pages Router (pages/ directory) patterns. It automatically detects route files and maps them to URL paths while providing detailed component analysis.

Features

• App Router Support: Analyzes file-based routing in the app/ directory
• Pages Router Support: Analyzes traditional routing in the pages/ directory
• Dynamic Routes: Handles parameterized routes ([id], [...slug])
• Route Groups: Supports route grouping with parentheses (group)
• Nested Layouts: Analyzes layout files and nested routing structures
• Component Analysis: Extracts component descriptions and features
• Interactive Elements: Identifies UI elements and their properties

Installation

npm install @cuekit-cli/nextjs

Configuration

To upload analysis results to the Cuekit dashboard, create a configuration file in your project's root directory.

The CLI searches for one of the following files:

• cuekit.config.json
• cuekit.config.js
• cuekit.config.mjs
• cuekit.config.ts

Required Fields

• apiKey (string): Your Cuekit API key
• appId (string): The App ID for your project

Example Configuration

{
  "apiKey": "your-cuekit-api-key-here",
  "appId": "your-app-id-here"
}

Usage

Basic Analysis

npx cuekit-cli scan .

Output Options

# JSON output
npx cuekit-cli scan . --json

# Save to markdown file
npx cuekit-cli scan . --out routes.md

# Use AI for component summarization
npx cuekit-cli scan . --ai

Examples

# Analyze a Next.js project
npx cuekit-cli scan ./my-nextjs-app

# Generate JSON output for API integration
npx cuekit-cli scan ./my-nextjs-app --json

# Create documentation file
npx cuekit-cli scan ./my-nextjs-app --out routes.md

# With AI-powered component descriptions
npx cuekit-cli scan ./my-nextjs-app --ai

Supported Patterns

App Router (app/ directory)

• app/page.tsx → /
• app/about/page.tsx → /about
• app/blog/[slug]/page.tsx → /blog/[slug]
• app/(dashboard)/settings/page.tsx → /settings (route group)

Pages Router (pages/ directory)

• pages/index.tsx → /
• pages/about.tsx → /about
• pages/blog/[slug].tsx → /blog/[slug]

Output Format

The analyzer provides structured output including:

• Route names and paths
• Component file locations
• Navigator types (Web for Next.js)
• Component descriptions
• Interactive elements
• Feature analysis

Development

# Build the package
npm run build

# Development mode with watch
npm run dev

# Type checking
npm run check-types

License

MIT License - see LICENSE file for details.