Migrate from Vite to Next.js 16 App Router

.github/workflows/ci.yml

@@ -7,26 +7,32 @@ on:
     branches: [main]
 
 jobs:
-  test-frontend:
+  build:
+    name: Build
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v6
-
+      - uses: actions/checkout@v4
       - uses: oven-sh/setup-bun@v2
-        with:
-          bun-version: latest
-
-      - name: Install dependencies
-        run: bun install
+      - run: bun install --frozen-lockfile
+      - run: bun run build
 
-      - name: Run tests
-        run: bun run test
-
-      - name: Lint
-        run: bun run lint
+  test:
+    name: Tests
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: oven-sh/setup-bun@v2
+      - run: bun install --frozen-lockfile
+      - run: bun run test
 
-      - name: Build
-        run: bun run build
+  lint:
+    name: Lint
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: oven-sh/setup-bun@v2
+      - run: bun install --frozen-lockfile
+      - run: bun run lint
 
   test-python:
     runs-on: ubuntu-latest

.gitignore

@@ -6,10 +6,11 @@ yarn-debug.log*
 yarn-error.log*
 pnpm-debug.log*
 lerna-debug.log*
+bun-debug.log*
 
 node_modules
-dist
-dist-ssr
+.next
+out
 *.local
 
 # Editor directories and files
@@ -37,3 +38,10 @@ htmlcov/
 .pytest_cache/
 uv.lock
 .vercel
+
+# Next.js / TypeScript
+*.tsbuildinfo
+next-env.d.ts
+
+# We use bun
+package-lock.json

eslint.config.mjs

@@ -0,0 +1,26 @@
+import nextCoreWebVitals from 'eslint-config-next/core-web-vitals';
+
+export default [
+  ...nextCoreWebVitals,
+  {
+    rules: {
+      'no-unused-vars': ['warn', { argsIgnorePattern: '^_', varsIgnorePattern: '^_' }],
+    },
+  },
+  {
+    files: ['src/app/layout.tsx'],
+    rules: {
+      '@next/next/no-page-custom-font': 'off',
+    },
+  },
+  {
+    ignores: [
+      '.next/**',
+      'out/**',
+      'build/**',
+      'coverage/**',
+      'next-env.d.ts',
+      'public/**',
+    ],
+  },
+];

next.config.ts

@@ -0,0 +1,12 @@
+import type { NextConfig } from 'next';
+
+const nextConfig: NextConfig = {
+  // Mantine ships CJS interop; transpile through Next's pipeline to avoid
+  // ESM/CJS mismatch errors during build.
+  transpilePackages: ['@mantine/core', '@mantine/hooks'],
+  turbopack: {
+    root: process.cwd(),
+  },
+};
+
+export default nextConfig;

package.json

@@ -4,34 +4,44 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite",
-    "build": "vite build",
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
     "lint": "eslint .",
-    "preview": "vite preview",
     "test": "vitest run",
     "test:watch": "vitest"
   },
   "dependencies": {
     "@mantine/core": "^8.3.13",
     "@mantine/hooks": "^8.3.13",
+    "@policyengine/ui-kit": "^0.9.0",
     "@tabler/icons-react": "^3.36.1",
+    "next": "^16.2.6",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "recharts": "^3.7.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.39.1",
+    "@tailwindcss/postcss": "^4.2.4",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/node": "^24.10.1",
     "@types/react": "^19.2.5",
     "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^5.1.1",
+    "@vitejs/plugin-react": "^5.1.2",
     "eslint": "^9.39.1",
+    "eslint-config-next": "^16.2.6",
     "eslint-plugin-react-hooks": "^7.0.1",
-    "eslint-plugin-react-refresh": "^0.4.24",
     "globals": "^16.5.0",
     "jsdom": "^27.4.0",
-    "vite": "^7.2.4",
+    "postcss": "^8.5.6",
+    "postcss-preset-mantine": "^1.18.0",
+    "postcss-simple-vars": "^7.0.1",
+    "tailwindcss": "^4.2.4",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.46.4",
     "vitest": "^4.0.18"
   }
 }

postcss.config.mjs

@@ -0,0 +1,19 @@
+// Mantine v8 needs postcss-preset-mantine and postcss-simple-vars to compile
+// its CSS. Tailwind v4 is layered on top via @tailwindcss/postcss.
+const config = {
+  plugins: {
+    'postcss-preset-mantine': {},
+    'postcss-simple-vars': {
+      variables: {
+        'mantine-breakpoint-xs': '36em',
+        'mantine-breakpoint-sm': '48em',
+        'mantine-breakpoint-md': '62em',
+        'mantine-breakpoint-lg': '75em',
+        'mantine-breakpoint-xl': '88em',
+      },
+    },
+    '@tailwindcss/postcss': {},
+  },
+};
+
+export default config;

src/index.css → src/app/globals.css

@@ -1,10 +1,14 @@
+@import "tailwindcss";
+@import "@policyengine/ui-kit/theme.css";
+@import "@mantine/core/styles.css";
+
 * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
 }
 
-html, body, #root {
+html, body {
   width: 100%;
   height: 100%;
   margin: 0;

src/app/layout.tsx

@@ -0,0 +1,32 @@
+import type { Metadata, Viewport } from 'next';
+import { ColorSchemeScript, mantineHtmlProps } from '@mantine/core';
+import './globals.css';
+
+const TITLE = 'PolicyEngine Ads Dashboard';
+const DESCRIPTION =
+  'Daily transparency dashboard for PolicyEngine\'s Google Ads Grant — campaigns, keywords, and geography.';
+
+export const metadata: Metadata = {
+  title: TITLE,
+  description: DESCRIPTION,
+  authors: [{ name: 'PolicyEngine' }],
+};
+
+export const viewport: Viewport = {
+  themeColor: '#319795',
+  width: 'device-width',
+  initialScale: 1,
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{ children: React.ReactNode }>) {
+  return (
+    <html lang="en" {...mantineHtmlProps}>
+      <head>
+        <ColorSchemeScript />
+      </head>
+      <body>{children}</body>
+    </html>
+  );
+}

src/App.jsx → src/app/page.jsx

@@ -1,6 +1,7 @@
-import '@mantine/core/styles.css';
+'use client';
+
 import { useState } from 'react';
-import { MantineProvider, Container, Tabs, Text, Center, Loader, Alert, Box, Group, Title, Badge } from '@mantine/core';
+import { MantineProvider, Container, Tabs, Text, Center, Loader, Alert, Box, Group, Title } from '@mantine/core';
 import {
   IconChartBar,
   IconList,
@@ -9,15 +10,15 @@ import {
   IconAlertCircle,
   IconAd,
 } from '@tabler/icons-react';
-import { theme } from './theme';
-import Header from './components/Header';
-import SummaryCards from './components/SummaryCards';
-import TimeSeriesChart from './components/TimeSeriesChart';
-import CampaignTable from './components/CampaignTable';
-import KeywordTable from './components/KeywordTable';
-import GeographyChart from './components/GeographyChart';
-import AdsTable from './components/AdsTable';
-import useAdsData from './hooks/useAdsData';
+import { theme } from '@/theme';
+import Header from '@/components/Header';
+import SummaryCards from '@/components/SummaryCards';
+import TimeSeriesChart from '@/components/TimeSeriesChart';
+import CampaignTable from '@/components/CampaignTable';
+import KeywordTable from '@/components/KeywordTable';
+import GeographyChart from '@/components/GeographyChart';
+import AdsTable from '@/components/AdsTable';
+import useAdsData from '@/hooks/useAdsData';
 
 function LoadingState() {
   return (

src/components/SortableTable.jsx

@@ -1,4 +1,3 @@
-/* eslint-disable react-refresh/only-export-components */
 import { useState } from 'react';
 import { Table, Text, UnstyledButton } from '@mantine/core';
 import { IconChevronUp, IconChevronDown, IconSelector } from '@tabler/icons-react';

src/hooks/useAdsData.js

@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react';
 
-const DATA_URL = import.meta.env.BASE_URL + 'data/google-ads.json';
+const DATA_URL = '/data/google-ads.json';
 
 export default function useAdsData() {
   const [data, setData] = useState(null);