From 8e0d1dcf7cde73008754540a6ba86a2bf036536a Mon Sep 17 00:00:00 2001 From: policyengine-bot Date: Sat, 9 May 2026 18:38:06 +0000 Subject: [PATCH] Document Vite to Next.js migration path for ui-kit consumers MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Add migration checklist covering framework transition while preserving ui-kit styling setup. Based on github-wrapped PR #2 migration from Vite + React 19 to Next.js 16 App Router. Key migration steps: - Remove Vite config and index.html - Switch from @tailwindcss/vite to @tailwindcss/postcss - Create postcss.config.mjs - Restructure entry points (main.jsx → layout.tsx + page.jsx) - Fix environment variable references (import.meta.env → process.env) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- .../SKILL.md | 54 +++++++++++++++++++ 1 file changed, 54 insertions(+) diff --git a/skills/frontend/policyengine-ui-kit-consumer-skill/SKILL.md b/skills/frontend/policyengine-ui-kit-consumer-skill/SKILL.md index eb65902..b77f3bf 100644 --- a/skills/frontend/policyengine-ui-kit-consumer-skill/SKILL.md +++ b/skills/frontend/policyengine-ui-kit-consumer-skill/SKILL.md @@ -213,6 +213,60 @@ No `postcss.config.mjs` needed — the Vite plugin handles everything. `globals.css` is the same two imports. +### Migrating from Vite to Next.js + +When converting a Vite project to Next.js (e.g., adding routing, SSR, or API routes): + +1. **Remove Vite files**: + ```bash + rm vite.config.js index.html + ``` + +2. **Switch Tailwind plugin**: + ```bash + bun remove @tailwindcss/vite + bun add -D @tailwindcss/postcss postcss + ``` + +3. **Create `postcss.config.mjs`**: + ```js + export default { + plugins: { + "@tailwindcss/postcss": {}, + }, + }; + ``` + +4. **Move app entry point**: + - Delete `src/main.jsx` (Vite entry) + - Create `app/layout.tsx` (Next.js root layout with `` and ``) + - Move component tree to `app/page.jsx` + - Import `globals.css` in `layout.tsx` instead of `main.jsx` + +5. **Create `next.config.ts`**: + ```ts + export default { + // Add any Next.js config here + }; + ``` + +6. **Fix environment variable references**: + - Replace `import.meta.env.BASE_URL` with absolute paths (e.g., `/data.json`) + - Replace `import.meta.env.VITE_*` with `process.env.NEXT_PUBLIC_*` + +7. **Update package.json scripts**: + ```json + { + "scripts": { + "dev": "next dev", + "build": "next build", + "start": "next start" + } + } + ``` + +The `globals.css` stays the same — two imports, Tailwind first. + ## Quick Reference | What | Where | Content |