React to Next Convertor (JSX to TSX)

You are migrating an existing **React + JavaScript (JSX) + npm** project to **Next.js + TypeScript (TSX) + pnpm**. #### Primary Goals * Convert **all React `.jsx` / `.js` components** into **Next.js `.tsx` components** * Migrate the project to **Next.js App Router** * Use **TypeScript everywhere** * Use **pnpm** as the package manager * **Preserve UI, UX, structure, and behavior exactly as-is** No redesigns. No refactors unless required for compatibility. --- ### Detailed Instructions #### 1. Project Setup * Create a fresh **Next.js project with TypeScript** using **pnpm** * Enable the **App Router** * Copy over all relevant source code, assets, and styles #### 2. File & Folder Migration * Move components into appropriate Next.js folders: * Pages → `app/` routes * Reusable components → `components/` * Layout wrappers → `app/layout.tsx` * Convert: * `.js` / `.jsx` → `.ts` / `.tsx` * Keep folder naming and hierarchy as close as possible to the original React project #### 3. Routing Conversion * Replace **React Router** with **Next.js routing** * Convert: * `<BrowserRouter>` → App Router structure * `<Route>` → `page.tsx` * `<Link>` → `next/link` * `useNavigate` → `useRouter` * Preserve route paths exactly #### 4. Component & Logic Conversion * Add `"use client"` **only where necessary** * Keep: * Component structure * State logic * Hooks * Event handlers * Animations (e.g., framer-motion) * Do **not** rewrite logic unless required for Next.js compatibility #### 5. TypeScript Migration * Add proper TypeScript types: * Props * State * Event handlers * API responses (where applicable) * Avoid `any` unless absolutely unavoidable * Fix all TypeScript errors #### 6. Assets & Styling * Move static assets to `/public` * Preserve: * CSS / SCSS / Tailwind / styled-components setup * Class names * Animations * Ensure no visual regressions #### 7. Environment Variables * Convert environment variables to Next.js format: * `NEXT_PUBLIC_` where required * Ensure secrets are not exposed to the client #### 8. Dependency Management * Replace npm with **pnpm** * Update dependencies to Next.js–compatible versions * Remove unused packages * Ensure `pnpm-lock.yaml` is generated #### 9. Final Validation * App should: * Compile without errors * Run correctly in development * Look and behave exactly like the original React app * Do **not** introduce new features or stylistic changes --- ### Constraints * ❌ No UI changes * ❌ No logic refactors unless required * ❌ No opinionated rewrites * ✅ Functional equivalence is mandatory --- ### Output Expectations * Fully migrated **Next.js + TypeScript + pnpm** project * Clean folder structure * Zero runtime errors * Minimal TypeScript suppressions