Technical Architecture & Modern Frontend Practices
The project uses Next.js 16 as the core framework, leveraging App Router and Turbopack for performance. All pages (≈200) covering 16 cities, 16 venues, and 48 teams are statically generated via generateStaticParams from typed JSON data, ensuring fast loading and edge caching.
UI is built with React 19 + Tailwind CSS4: React Compiler handles automatic memoization, while Tailwind's utility-first approach simplifies styling. For internationalization, @formatjs/intl-localematcher + negotiator via middleware detects language from request headers, avoiding heavy i18n libraries.
Technical Stack Panorama
| 层级 |
技术选型 |
选择理由 |
| 框架 |
Next.js 16 |
App Router + Turbopack, support SSG & ISR |
| UI |
React 19 + Tailwind CSS 4 |
React Compiler auto-optimization, zero-config styling |
| 国际化 |
@formatjs/intl-localematcher |
Lightweight middleware solution |
| SEO |
schema-dts + Next.js Metadata API |
Typed, native, no third-party bloat |
| 数据 |
Typed JSON + Zod |
Build-time validation, zero runtime overhead |
| 分析 |
@next/third-parties/google |
Lazy-loaded GA4, preserves core performance |
| 地图 |
Leaflet |
Lightweight interactive maps |
| 托管 |
Vercel |
Edge caching, preview deployments |