leetcode-patterns 架构深度解析Next.js 16 React 19 Tailwind v4 技术栈完整拆解指南【免费下载链接】leetcode-patternsA pattern-based approach to learn technical interview questions项目地址: https://gitcode.com/gh_mirrors/le/leetcode-patternsleetcode-patterns 是一个按解题模式分类力扣面试题的开源刷题网站基于 Next.js 16 React 19 Tailwind CSS v4 技术栈构建。本文带你完整拆解它的架构设计从静态导出策略、组件分层到本地优先Local-first的数据同步与离线 PWA 能力帮助新手快速看懂一个现代 React 项目的工程化全貌 技术栈全景一张表看懂选型层次技术版本作用框架Next.jsApp Router16.3.0页面、元数据、静态导出UI 库React React DOM19.2.3组件化渲染样式Tailwind CSSv4原子化 CSS 暗色主题表格TanStack Table Virtualv8 / v3千级题目表格的筛选、排序、虚拟滚动图标Lucide React-轻量 SVG 图标云服务Supabase-用户进度云端同步分析next/third-parties-内置 Google Analytics测试Vitest React Testing Libraryv4单元与组件测试工程TypeScript 5 ESLint 9 Husky-类型安全与提交前检查完整依赖清单见 package.json。项目目录分层五层职责清晰整个src/目录按职责拆分为 5 层是典型的 App Router 结构src/app/—— 路由层入口页 src/app/page.tsx、根布局 src/app/layout.tsx、全局样式 src/app/globals.csssrc/components/—— 组件层按功能再分 4 组layout/主题切换、用户菜单、panels/关于/提示侧栏、questions/题目表格与弹窗、roadmaps/路线图视图src/lib/—— 逻辑层本地存储、云端同步、提醒、分析埋点等纯函数模块src/data/questions.json—— 数据层全部题目以静态 JSON 随包分发src/types/question.ts—— 类型层题目等核心 TypeScript 类型这种页面瘦、逻辑进 lib、数据静态化的分层让每个模块都可以独立测试 Next.js 16 静态导出零服务器的部署方案打开 next.config.ts 只有 11 行但信息量很大output: export, // 构建为纯静态 HTML可直接托管 images: { unoptimized: true }, // 静态导出下关闭图片优化 basePath: process.env.NEXT_PUBLIC_BASE_PATH ?? , // 支持子路径部署为什么要静态导出题目数据本身是静态 JSON由定时任务预生成用户进度全部存在浏览器本地 Supabase服务端不需要处理任何请求。output: export让npm run build直接产出可托管的纯静态站点部署成本几乎为零。SEO 同样在根布局 src/app/layout.tsx 中集中管理metadata导出包含标题、描述、关键词如 blind 75、leetcode patterns、Open Graph 卡片与 Twitter 卡片配置是标准的 Next.js Metadata API 用法。React 19 视图切换三种刷题模式首页 src/app/page.tsx 只负责组装布局真正的视图大脑是 src/components/layout/ViewSwitcher.tsx它提供三种模式全部题目表格—— 由 src/components/questions/QuestionsTable.tsx 驱动基于 TanStack Table 实现筛选、排序、按模式分组新手路线图/3. 进阶路线图—— 由 src/components/roadmaps/RoadmapView.tsx 渲染路线图数据在 src/data/roadmaps.ts值得学习的细节当前视图通过useSyncExternalStore同时读取URL 参数和localStorage刷新后视图状态可恢复视图切换带 200ms 淡入淡出过渡用onTransitionEnd回退兜底体验顺滑切换动作通过Suspense包裹配合 src/lib/analytics.ts 做埋点Tailwind CSS v4三行代码接入新写法Tailwind v4 抛弃了tailwind.config.js改用 CSS 原生配置。全局样式 src/app/globals.css 展示了新范式import tailwindcss; custom-variant dark (:where(.dark, .dark *)); // 自定义暗色变体 theme inline { --font-sans: var(--font-geist-sans); }构建侧只需在 postcss.config.mjs 中注册tailwindcss/postcss插件无需独立配置目录。暗色模式由根布局head里的一小段内联脚本提前写入darkclass避免刷新时的主题闪烁是静态站点做主题切换的经典技巧 数据流设计本地优先 云端同步这是整个架构最有意思的部分遵循Local-first思路题目数据静态cron/update_questions.py 通过 LeetCode 官方 GraphQL 接口定期拉取题目元数据难度、公司标签、主题标签生成 src/data/questions.json 随站点一起发布用户进度本地src/lib/storage.ts 把已完成、收藏、笔记、刷题日期、复习提醒等 6 类状态存入 localStorage还内置了旧版 CRA 数据的迁移逻辑LEGACY_SLUGS云端同步src/lib/sync.ts 用1 秒防抖将本地状态 upsert 到 Supabase 的user_progress表远程数据为空时先推本地否则以远程为准覆盖本地并用lastUploadAt时间戳过滤自己触发的实时事件避免自己上传、自己收到的回环离线 PWA构建后生成 Service Workernpm run build的完整命令是next build node scripts/generate-sw-precache.mjs构建结束后scripts/generate-sw-precache.mjs 生成预缓存清单配合 public/sw.js 与 public/manifest.json让站点支持离线访问和添加到主屏幕。前端通过 src/components/layout/ServiceWorkerRegistrar.tsx 和 src/lib/register-sw.ts 完成注册。质量保障测试与钩子测试vitest.config.mts 配置 Vitest每个核心模块都配有同名测试文件如storage.test.ts、sync.test.ts、QuestionsTable.test.tsx环境使用 happy-dom/jsdom钩子Husky 的pre-push钩子由prepare脚本自动安装保证每次推送前自动跑npm test防止带病代码进入远端 ✅本地运行与架构速查npm install npm run dev # 开发模式访问 http://localhost:3000 npm test # 单次运行全部测试最后用一句话总结这套架构的设计哲学数据静态化、状态本地化、同步云化、部署纯静态。题目 JSON 预生成 localStorage 主存储 Supabase 增量同步 Service Worker 离线兜底四层配合让一个没有后端服务的站点依然拥有完整的用户数据能力。理解了这一条主线你就掌握了读懂 leetcode-patterns 全部源码的钥匙 ️【免费下载链接】leetcode-patternsA pattern-based approach to learn technical interview questions项目地址: https://gitcode.com/gh_mirrors/le/leetcode-patterns创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考