Skip to content

Document Vite to Next.js migration path for ui-kit consumers #152

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
policyengine wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Document Vite to Next.js migration path for ui-kit consumers #152

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
54 changes: 54 additions & 0 deletions skills/frontend/policyengine-ui-kit-consumer-skill/SKILL.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 `<html>` and `<body>`)
- 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 |
Expand Down