Migrate experiment app from Next.js to TanStack Start

[kcarnold]

Summary

Migrates the experiment application from Next.js 15 (App Router) to TanStack Start, a full-stack framework built on Vite and TanStack Router. This change modernizes the build tooling and routing infrastructure while maintaining all existing functionality.

Key Changes

Framework Migration

• Replaced Next.js with TanStack Start (Vite + TanStack Router)
• Converted all API routes from Next.js route.ts handlers to TanStack Router file routes
• Migrated pages from Next.js file-based routing to TanStack Router route definitions
• Removed Next.js-specific configuration (next.config.ts, layout.tsx)

API Routes

• app/api/chat/route.ts → app/api/chat.ts (TanStack Router file route)
• app/api/writing-support/route.ts → app/api/writing-support.ts (TanStack Router file route)
• app/api/log/route.ts → app/api/log.ts (TanStack Router file route)
• Updated all handlers to use TanStack Router's createFileRoute API with server.handlers.POST

Pages & Routing

• app/page.tsx → app/index.tsx (TanStack Router convention)
• app/study.tsx converted to TanStack Router file route with createFileRoute('/study')
• Created app/__root.tsx as root layout using TanStack Router's createRootRoute
• Removed 'use client' directives (no longer needed with TanStack Start)
• Replaced useSearchParams() from Next.js with custom useSearchParams() hook that reads from TanStack Router state

Build Configuration

• Replaced next.config.ts with vite.config.ts
• Updated tsconfig.json to remove Next.js-specific plugins and settings
• Removed postcss.config.mjs (Tailwind CSS now configured via Vite plugin)
• Updated package.json scripts: next dev → vite dev, next build → vite build
• Added "type": "module" to package.json for ES modules

Dependencies

• Removed: next, eslint-config-next, @tailwindcss/postcss, babel-plugin-react-compiler
• Added: @tanstack/react-router, @tanstack/react-start, @tailwindcss/vite, vite, @vitejs/plugin-react
• Updated ESLint config to use typescript-eslint and eslint-plugin-react-hooks instead of Next.js presets

Docker & Deployment

• Updated Dockerfile to use TanStack Start build output (.output instead of .next/standalone)
• Changed runtime user from nextjs to appuser
• Updated environment variable from NEXT_PUBLIC_GIT_COMMIT to VITE_GIT_COMMIT

Component Updates

• Removed 'use client' directives from all components (TanStack Start handles this automatically)
• Updated imports in study components to use custom useSearchParams() hook instead of Next.js version

Notable Implementation Details

• Created lib/useSearchParams.ts as a compatibility layer to provide URLSearchParams interface using TanStack Router's state
• Created router.tsx to instantiate the TanStack Router with the generated route tree
• All API handlers now use TanStack Router's createFileRoute with server-side handlers
• Maintained all existing functionality and study logic without behavioral changes

https://claude.ai/code/session_011KRUvKDJnfX84QEViftUZ9