Real-time crypto dashboard + BIP39 wallet checker, migrated from Vite + React SPA to Next.js 15 App Router with full SSR/SSG support.
- Next.js 15 — App Router, Server Components, Route Handlers
- React 18 — Client Components only where needed
- Tailwind CSS — preserved design tokens from original
- Framer Motion — animations (client-side)
- TanStack Query — client-side cache
- CoinGecko API — fetched server-side via
/api/crypto-prices
| Feature | Vite SPA | Next.js 15 |
|---|---|---|
| Google indexing | ❌ Empty HTML | ✅ Full SSR HTML |
| Crypto prices visible to bots | ❌ | ✅ ISR every 90s |
| API key exposure | ✅ Server-only | |
| Supabase Edge Function needed | ✅ Required | ❌ Removed (use /api/crypto-prices) |
| SEO metadata | Manual <head> |
✅ metadata API |
| Sitemap | Static file | ✅ Dynamic /sitemap.xml |
| Robots.txt | Static file | ✅ Dynamic /robots.txt |
| Image optimization | ❌ | ✅ next/image |
npm install
npm run devOpen http://localhost:3000.
Copy .env.local.example → .env.local:
# Optional: CoinGecko API key (server-side only, never exposed to browser)
COINGECKO_API_KEY=
# Optional: Supabase (for future lounge chat)
NEXT_PUBLIC_SUPABASE_URL=
NEXT_PUBLIC_SUPABASE_ANON_KEY=npx vercel- Set
output: "export"innext.config.ts npm run build→ deployout/folder
app/
├── layout.tsx # Root layout + SEO metadata + JSON-LD
├── page.tsx # Home — SERVER component, fetches initial prices
├── not-found.tsx # 404 page
├── sitemap.ts # Dynamic sitemap
├── robots.ts # Dynamic robots.txt
└── api/
└── crypto-prices/
└── route.ts # Replaces Supabase Edge Function
components/
├── Providers.tsx # QueryClient + Tooltip (CLIENT)
├── CryptoTicker.tsx # Ticker — CLIENT, hydrates from SSR data
├── HeroSection.tsx # CLIENT (framer-motion)
├── Bip39Embed.tsx # CLIENT (iframe + framer-motion)
├── AdBanner.tsx # CLIENT (AdSense)
├── DemoBanners.tsx # CLIENT (AdSense)
└── CryptoDonation.tsx # CLIENT (clipboard API + next/image)
lib/
├── types.ts # Shared TypeScript types
├── utils.ts # cn() helper
└── coinMeta.ts # Coin icons, colors, IDs