feat: migrate from React Router to Next.js App Router with proper RSC routes

[KevinWu098]

Summary

Complete migration from the React Router "SSR shell around SPA" pattern to idiomatic Next.js App Router with proper route segments and React Server Components.

Architecture Changes

Before: Single catch-all [[...slug]]/page.tsx → dynamic(() => import('../../App'), { ssr: false }) → React Router createBrowserRouter handling all navigation client-side.

After: Proper Next.js App Router segments with RSC pages, shared layouts, and next/navigation for all routing.

Route Structure

URL	Before	After
/	[[...slug]] → React Router / → Home	app/(home)/page.tsx RSC + HomeShell client layout
/added	[[...slug]] → React Router /:tab → Home	app/(home)/added/page.tsx RSC + shared layout
/map	[[...slug]] → React Router /:tab → Home	app/(home)/map/page.tsx RSC + shared layout
/feedback	React Router → window.location.replace()	next.config.mjs redirect (server-side, no JS)
/auth	[[...slug]] → React Router → AuthPage	app/auth/page.tsx with client component
/auth/native	Same as above	app/auth/native/page.tsx
/unsubscribe/:userId	[[...slug]] → React Router	app/unsubscribe/[userId]/page.tsx with RSC params
/outage	Separate React Router tree	app/outage/page.tsx with proxy.ts guard
/* (unknown)	React Router Navigate to /	Next.js not-found.tsx

Key Improvements

• react-router-dom completely removed — zero client router overhead
• Per-route metadata — each page exports its own Metadata for proper SEO
• Per-route SEO content — targeted sr-only content per route instead of one blob
• Proper error handling — error.tsx with reset() capability replaces errorElement
• Server-side redirects — /feedback redirect handled at edge (no client JS)
• Shared layout persistence — tab switching within (home) group doesn't remount the app
• External links use <a> — no more Link component for external URLs (RateMyProfessors, bug reports)
• Title template — child pages can override the title with %s | AntAlmanac pattern
• Sitemap updated — includes /added and /map routes

Provider Architecture

RootLayout (RSC)
└── Providers ('use client')
    ├── AppRouterCacheProvider (MUI Emotion)
    ├── AppThemeProvider (MUI theme)
    ├── AppPostHogProvider (analytics)
    └── AppQueryProvider (React Query)
        └── (home)/layout (RSC)
            └── HomeShell ('use client')
                ├── TourProvider (onboarding)
                ├── LocalizationProvider (date pickers)
                ├── Header + Tabs + Content
                └── Dialogs/Snackbars

Tab System

The tab system now uses usePathname() from next/navigation instead of useParams() from React Router. Tab clicks use next/link for navigation, and the ScheduleManagement component derives the active tab from the URL pathname. Since the HomeShell lives in the layout, it persists across tab navigation — no state loss.

Files Changed

• Deleted: App.tsx, App.css, routes/ directory, [[...slug]]/ directory
• Created: app/(home)/, app/auth/, app/unsubscribe/, app/outage/, app/error.tsx, app/not-found.tsx, app/providers.tsx
• Modified: All components that imported from react-router-dom (14 files)

Test Plan

• ✅ TypeScript compilation passes (no new errors; pre-existing errors from missing generated data unchanged)
• ✅ oxlint --deny-warnings passes across all 244 source files
• ✅ Next.js build compiles successfully (pre-existing TS strictness in scripts/ is the only blocker to full next build)
• ✅ All non-data-dependent tests pass (locations, custom-events, schedule-id-race-condition)
• ⚠️ Tests depending on generated term data (calendarize-helpers, parse-days-string, download-ics, patch-notes, schedule) require pnpm get-data to run — this is pre-existing and unrelated to this PR

Issues

Future Followup

• TRPC + React Query integration: The vanilla createTRPCProxyClient can be upgraded to @trpc/react-query for hook-based data fetching with caching, now that the React Query provider is properly positioned
• RSC data loading: TRPC procedures that fetch public data (grades, enrollment history) could be called from RSCs using a server-side TRPC caller
• Route-level code splitting: Now that routes are proper Next.js segments, each page auto-gets its own chunk
• Streaming/Suspense: The map (lazy-loaded) and search results could leverage React Suspense boundaries with streaming for better perceived performance