github地址，欢迎star。
预览地址，接口可能不太稳定，如没请求成功，多刷新几次就好。
起因
本来技术栈一直都是vue，react没有做过大型项目，正好无疑在B站看到有人搬运国外的nextjs的教程，对next.js突然就很感兴趣，决定用它来做一个大型的项目，而做这个项目有两个最初的想法：
- 和程序员相关的网站
- 最好有现成的接口，虽然也会
nest.js，但不想花时间写接口，单纯的想偷懒。
后面逛leetcode的时候，心血来潮的打开控制台看了一下接口，发现leetcode的网站全是用的graphql，可以直接获取到数据，于是决定复刻leetcode。
踩坑
next.js用的app router模式，所有组件都是在server端渲染，如果需要用到和react相关的，比如生命周期等，需要在组件文件顶部写use client,将其变为客户端组件。- 如果组件用到
window变量，引入组件的时候需要使用dynamic引入，要不然本地没关系，打包就会报错。 - 目录式结构还是比较香的，省去了很多配置，但前提是要掌握好规则，特别是路由这块，反正我不是很喜欢
react-router原生的写法。 - 很多同学纠结说我没有
ssr的需求，是不是不需要next.js?其实你完全可以不把它当做一个ssr框架，就把它当成一个封装好的脚手架，是真的好用，而且就算你全部用客户端组件，对项目也是没有任何影响。 - 项目中所有的数据状态都是用的
ahooks的useReactive，这个简直是香中香，我是完全抛弃了useState，坑太多，useReactive完全和vue一样的体验，所见即所得，太方便，省去了很多不必要的赋值陷阱。 - 状态管理用得是
zustand，目前来看应该是最好用的react的状态管理工具了，如果你之前是vue技术栈，那这个库基本上和vue、pinia区别不大，可以直接上手。 - 样式用的
next.js直接集成的tailwindcss，反正我现在是离不开它了，可以覆盖大部分样式。 - 本项目线上不支持用户相关类操作，因为需要
leetcode提供的token，如果想调用用户类相关接口，需要在leetcode网站登录成功之后，在控制台请求头中获取csrftoken和LEETCODE_SESSION. next.js作为一个全栈框架，可以不需要后端，直接写接口，然后调接口获取数据，这点还是很方便的，甚至可以直接链接数据库操作数据。- 项目中
markdown部分开始直接用的react-markdown这个插件，但不知道是不是我用的姿势不对，有些格式没有解析出来，知道的同学可以讲一下。
总结
- 学习一个新框架最好的老师就是官方文档，当然不排除有些项目的文档写的不好，但这种知名大公司的项目，文档还是很清晰，跟着文档做，肯定是没错的。
- 学习一个新框架，直接动手做项目，别做
demo级别的，什么todolist啊，意义不大，必须要经过长时间的实践和踩坑才能掌握精髓，这个项目大概花了十天时间，还是很值得的。 - 不要有畏难情绪，现在网上资料也很多，绝大部分问题都能解决。
next.js确实是一个好框架，值得学习
免责声明
本项目所有接口均来自leetcode官网，仅供个人学习，切勿用作商业用途，如产生一切纠纷，均与本人无关。
最后
大家有什么问题，都可以一起交流学习。
