Skip to content

Add Vite to Next.js migration skill for legacy apps#146

Open
policyengine[bot] wants to merge 1 commit into
mainfrom
bot/learnings-cbo-baseline-tracker
Open

Add Vite to Next.js migration skill for legacy apps#146
policyengine[bot] wants to merge 1 commit into
mainfrom
bot/learnings-cbo-baseline-tracker

Conversation

@policyengine

@policyengine policyengine Bot commented May 9, 2026

Copy link
Copy Markdown
Contributor

Summary

Captures learnings from the cbo-baseline-tracker Vite → Next.js 16 App Router migration (PR PolicyEngine/cbo-baseline-tracker#4).

New skill: policyengine-vite-to-nextjs-migration-skill

What this adds

Migration guide for legacy PolicyEngine apps (using Mantine, Plotly, or other UI frameworks) that need to move from Vite to Next.js without a full rewrite.

Key patterns documented:

  • Framework-only migration strategy (preserve existing UI layer)
  • index.htmlapp/layout.tsx (Metadata API, JSON-LD, GA4 via next/script)
  • main.tsx + App.tsxapp/page.tsx + providers.tsx
  • Client Component marking ('use client' for hooks, browser APIs, charting libraries)
  • Environment variable migration (VITE_*NEXT_PUBLIC_*)
  • Public asset path changes (/public/*/*)
  • Common gotchas (dynamic imports, window undefined, default exports)

Why this is distinct from existing skills

  • policyengine-frontend-builder-spec — Enforces Next.js + Tailwind + ui-kit for new apps
  • policyengine-vite-to-nextjs-migration (this PR) — Guides migrating existing apps that use different UI frameworks, preserving their component code

The CBO baseline tracker uses Mantine + Plotly and is a static analysis tool (not actively developed). A full rewrite to ui-kit would be high-risk/low-value. This migration path consolidates it onto the PolicyEngine Next.js/Vercel stack while minimizing code changes.

Future value

Will help future migrations of similar legacy apps:

  • Other Mantine-based tools
  • Apps using Plotly, Chart.js, or other charting libraries incompatible with SSR
  • Repos that need Vercel deployment but can't justify a full UI rewrite

🤖 Generated with Claude Code

Captures learnings from cbo-baseline-tracker migration (PR #4):
- Framework-only migration strategy (preserve UI layer)
- index.html → app/layout.tsx (Metadata API, JSON-LD, GA4)
- main.tsx + App.tsx → app/page.tsx + providers.tsx
- Client Component marking ('use client' for hooks, browser APIs)
- Environment variable migration (VITE_* → NEXT_PUBLIC_*)
- Public asset path changes (/public/* → /*)
- Common gotchas (dynamic imports, window undefined, default exports)

Distinct from policyengine-frontend-builder-spec (new apps) — this
skill is for migrating existing Mantine/Plotly/other-framework apps
to Next.js without forcing a full rewrite to ui-kit.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant