Next.js

Server vs Client Components

• Server Components (default): data fetching, static content, SEO
• Client Components ("use client"): interactivity, hooks, browser APIs

// Server Component (default) - no directive needed
export default async function ThreatsPage() {
  return <ThreatList />;
}

// Client Component - needs directive
"use client";
export function ThreatList() {
  const [filter, setFilter] = useState("");
  return /* ... */;
}

Rule: Use Server Components by default. Only add "use client" when you need interactivity (event handlers, hooks, browser APIs).

Route Structure

src/app/
├── page.tsx              # / → redirects to /dashboard
├── layout.tsx            # Root layout (AppLayout + providers)
├── dashboard/
│   └── page.tsx          # /dashboard (stats, charts, alerts)
├── threats/
│   ├── page.tsx          # /threats (filterable list + detail panel)
│   └── [id]/
│       └── page.tsx      # /threats/:id (full-page detail)
├── capture/
│   └── page.tsx          # /capture (interface, controls, protocols)
├── analysis/
│   └── page.tsx          # /analysis (correlation, layers, signatures)
└── settings/
    └── page.tsx          # /settings (4 config panels)

Page Components

Dashboard (/dashboard)

• 4 StatsCard components (packets, threats, data volume, uptime)
• TrafficChart: Recharts area chart with 60-point rolling history
• ThreatDistribution: Horizontal bars by severity with counts
• LayerStatus: Detection layer status badges (running/idle/error)
• QuickActions: Start/stop capture, export, refresh buttons

Threats (/threats)

• Severity filter tabs (All / Critical / High / Medium / Low) with count badges
• ThreatsList: Scrollable card list (left panel, 3 cols)
• ThreatDetails: Detail view on selection (right panel, 2 cols)
• Each ThreatCard shows severity badge, detection layer, timestamp, IPs, protocol

Capture (/capture)

• CaptureControls: Status indicator, interface name, elapsed timer, start/stop
• InterfaceSelector: Clickable list of network interfaces (eth0, wlan0, lo, docker0)
• PacketStats: 3-column counters (packets, bytes, dropped)
• ProtocolDistribution: Horizontal bars per protocol (TCP, UDP, DNS, HTTP, TLS, ICMP)

Analysis (/analysis)

• CorrelationGraph: 24-hour Recharts area chart (threats, anomalies, correlations)
• LayersOverview: 5 detection layers with event counts and accuracy %
• SignaturesList: Scrollable list of active signatures with hit counts
• BehavioralStats: Progress bars (anomaly score, entropy, baseline deviation, risk)

Settings (/settings)

• 2x2 grid of configuration cards
• General: auto-start, notifications, dark mode (toggles)
• Capture: max packet size, promiscuous mode, buffer size
• Detection: sensitivity level, auto-block, enabled layers
• Storage: retention days, max storage, export format

File Conventions

Export Rules

• Named exports for all components; no export default except page.tsx and layout.tsx
• No barrel files: no index.ts re-exporting

// Good
export function ThreatCard() { /* ... */ }

// Bad
export default function ThreatCard() { /* ... */ }

Turbopack

Development uses Turbopack (Next.js bundler) for fast HMR:

bun run dev  # Starts next dev --turbopack

No extra configuration needed. Turbopack is the default in Next.js 16.