从零到一：我用Next.js复刻LeetCode的技术实践与思考

一、项目背景与动机

在编程教育领域，算法练习平台如LeetCode已成为开发者提升技能的核心工具。然而，开源替代方案较少，且多数项目缺乏现代化技术栈支持。基于此，我决定使用Next.js（基于React的服务器端渲染框架）复刻一个简化版LeetCode，目标包括：

1. 技术验证：探索Next.js在复杂Web应用中的性能表现；
2. 功能拆解：剖析算法平台的核心模块（题目管理、代码执行、测试用例等）；
3. 开源贡献：为社区提供可扩展的参考实现。

二、技术选型与架构设计

1. 为什么选择Next.js？

• 服务端渲染（SSR）：提升首屏加载速度，优化SEO；
• API路由：内置Node.js后端，无需额外服务；
• 静态生成（SSG）：适合题目库等静态内容；
• TypeScript支持：增强代码可维护性。

2. 系统架构

• 前端层：Next.js + TailwindCSS（UI组件库）；
• 后端层：Next.js API路由 + 第三方代码执行服务（如LeetCode的沙箱环境）；
• 数据层：MongoDB（题目库） + Redis（缓存测试用例结果）。

三、核心功能实现

1. 题目管理系统

• 数据模型：

  interface Problem {
    id: string;
    title: string;
    description: string;
    difficulty: 'easy' | 'medium' | 'hard';
    examples: Array<{ input: string; output: string }>;
    templates: { [lang: string]: string }; // 代码模板
  }

• 实现细节：
  • 使用Next.js的getStaticPaths和getStaticProps预渲染题目列表页；
  • 通过MongoDB聚合查询实现按难度筛选。

2. 代码编辑与执行

• 编辑器集成：
  • 使用react-simple-code-editor实现基础编辑功能；
  • 支持语法高亮（Prism.js）和自动缩进。
• 代码执行：
  • 调用第三方API（如Judger0）执行用户代码；
  • 通过WebSocket实时返回执行结果（避免轮询）。

3. 测试用例与结果验证

• 测试用例设计：

  interface TestCase {
    input: string;
    expectedOutput: string;
    timeout?: number;
  }

• 结果对比：
  • 将用户输出与预期结果进行字符串匹配；
  • 支持模糊匹配（如忽略空格、换行符）。

四、性能优化策略

1. 代码分割与懒加载

• 使用Next.js的动态导入（next/dynamic）按需加载编辑器组件；
• 题目详情页采用next/image优化图片加载。

2. 缓存机制

• Redis缓存高频题目（如Top 100）；
• 客户端使用Service Worker缓存静态资源。

3. 错误处理

• 统一API错误格式：

  interface ApiError {
    code: number;
    message: string;
    stack?: string;
  }

• 前端全局错误边界（Error Boundary）捕获渲染错误。

五、部署与扩展性

1. 部署方案

• Vercel：一键部署Next.js应用，自动处理CI/CD；
• 自定义域名与HTTPS配置。

2. 扩展方向

• 多语言支持：通过i18n路由实现国际化；
• 社区功能：添加评论、讨论区（集成Firebase）；
• 企业版：支持私有题目库和权限管理。

六、挑战与解决方案

1. 代码执行安全

• 问题：直接执行用户代码可能导致服务器崩溃；
• 方案：
  • 使用Docker容器隔离执行环境；
  • 限制资源（CPU、内存）和时间（超时终止）。

2. 实时反馈延迟

• 问题：代码执行结果返回较慢；
• 方案：
  • 优化测试用例（减少I/O操作）；
  • 前端添加加载状态和进度条。

七、开源与社区贡献

项目已开源至GitHub，提供：

• 完整代码（MIT许可证）；
• 部署文档（Docker + Vercel）；
• 贡献指南（如何添加新题目或语言支持）。

八、总结与启示

通过复刻LeetCode，我深入理解了：

1. 全栈开发：Next.js如何统一前后端逻辑；
2. 性能权衡：SSR与CSR的适用场景；
3. 第三方服务集成：如何安全地调用外部API。

对开发者的建议：

• 从核心功能（如题目展示）开始，逐步扩展；
• 使用TypeScript减少运行时错误；
• 优先解决安全与性能问题。

该项目不仅是一个技术实践，更是一个可复用的学习模板。未来计划添加更多算法类别（如图算法、动态规划）和可视化执行过程功能。