Migrate from Vite to Next.js 16 App Router#2
Merged
Merged
Conversation
- Replace Vite + React 19 with Next.js 16 / React 19 / Tailwind 4 stack - Move src/main.jsx + src/App.jsx into App Router app/layout.tsx and app/page.jsx - Add @policyengine/ui-kit ^0.9.0 with Tailwind v4 globals - Convert index.html metadata into root layout - Replace import.meta.env.BASE_URL with absolute path for github-data.json - Remove GitHub Pages deploy workflow (Next.js needs Vercel-style deployment) - Switch refresh-data cron to oven-sh/setup-bun action - Add PR workflow with bun frozen-lockfile build/lint Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
- Change jsx compiler option from 'react-jsx' to 'preserve' for Next.js - Fix stats grid from 5 columns to 6 to match actual stat count 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
There was a problem hiding this comment.
Solid migration from Vite to Next.js 16! The core functionality is well-preserved and the migration follows Next.js App Router best practices.
What I reviewed
- Next.js App Router setup (layout.tsx, page.jsx in src/app/)
- TypeScript configuration
- Tailwind v4 integration with @policyengine/ui-kit
- GitHub Actions workflows (PR checks with bun, refresh-data cron)
- Data fetching pattern (client-side fetch from /github-data.json)
Issues found and fixed
I pushed two fixes to the PR branch:
- TypeScript JSX config: Changed
jsxcompiler option from"react-jsx"to"preserve"- Next.js requires this setting as it handles JSX transformation itself - Stats grid layout: Fixed CSS grid from 5 columns to 6 to match the actual number of stats displayed (Commits, PRs Filed, PRs Merged, Reviews, Issues, Repos)
What looks good
- Clean Next.js App Router structure with proper metadata API usage
- Correct client component boundary (
'use client'in page.jsx) - Proper path change from
import.meta.env.BASE_URLto absolute/github-data.json - GitHub Actions workflows correctly updated for bun
- Package.json scripts properly configured for Next.js
- ESLint config using Next.js core-web-vitals preset
- Tailwind v4 PostCSS setup is correct
- Git ignore updated for Next.js (.next, out, next-env.d.ts)
Note on deployment
As mentioned in the PR description, this removes the GitHub Pages deploy workflow. You'll need to deploy to a Next.js-compatible platform (Vercel, etc.) since Next.js requires Node.js runtime for SSR/API routes.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
@policyengine/ui-kit^0.9.0; loadtheme.cssthrough globalssrc/main.jsx+src/App.jsxintoapp/layout.tsx+app/page.jsximport.meta.env.BASE_URLwith absolute path (/github-data.json)bun.lockchecked in; CI runsbun install --frozen-lockfilethenbun run build/bun run lintTest plan
bun installbun run buildbun run lint(only legacy unused-var and<img>warnings, no errors)🤖 Generated with Claude Code