Skip to content

Latest commit

 

History

History
32 lines (27 loc) · 3.6 KB

README.md

File metadata and controls

32 lines (27 loc) · 3.6 KB

github地址,欢迎star。
预览地址,接口可能不太稳定,如没请求成功,多刷新几次就好。

起因

本来技术栈一直都是vuereact没有做过大型项目,正好无疑在B站看到有人搬运国外的nextjs的教程,对next.js突然就很感兴趣,决定用它来做一个大型的项目,而做这个项目有两个最初的想法:

  1. 和程序员相关的网站
  2. 最好有现成的接口,虽然也会nest.js,但不想花时间写接口,单纯的想偷懒。

后面逛leetcode的时候,心血来潮的打开控制台看了一下接口,发现leetcode的网站全是用的graphql,可以直接获取到数据,于是决定复刻leetcode

踩坑

  1. next.js用的app router模式,所有组件都是在server端渲染,如果需要用到和react相关的,比如生命周期等,需要在组件文件顶部写use client,将其变为客户端组件。
  2. 如果组件用到window变量,引入组件的时候需要使用dynamic引入,要不然本地没关系,打包就会报错。
  3. 目录式结构还是比较香的,省去了很多配置,但前提是要掌握好规则,特别是路由这块,反正我不是很喜欢react-router原生的写法。
  4. 很多同学纠结说我没有ssr的需求,是不是不需要next.js?其实你完全可以不把它当做一个ssr框架,就把它当成一个封装好的脚手架,是真的好用,而且就算你全部用客户端组件,对项目也是没有任何影响。
  5. 项目中所有的数据状态都是用的ahooksuseReactive,这个简直是香中香,我是完全抛弃了useState,坑太多,useReactive完全和vue一样的体验,所见即所得,太方便,省去了很多不必要的赋值陷阱。
  6. 状态管理用得是zustand,目前来看应该是最好用的react的状态管理工具了,如果你之前是vue技术栈,那这个库基本上和vuepinia区别不大,可以直接上手。
  7. 样式用的next.js直接集成的tailwindcss,反正我现在是离不开它了,可以覆盖大部分样式。
  8. 本项目线上不支持用户相关类操作,因为需要leetcode提供的token,如果想调用用户类相关接口,需要在leetcode网站登录成功之后,在控制台请求头中获取csrftokenLEETCODE_SESSION.
  9. next.js作为一个全栈框架,可以不需要后端,直接写接口,然后调接口获取数据,这点还是很方便的,甚至可以直接链接数据库操作数据。
  10. 项目中markdown部分开始直接用的react-markdown这个插件,但不知道是不是我用的姿势不对,有些格式没有解析出来,知道的同学可以讲一下。

总结

  1. 学习一个新框架最好的老师就是官方文档,当然不排除有些项目的文档写的不好,但这种知名大公司的项目,文档还是很清晰,跟着文档做,肯定是没错的。
  2. 学习一个新框架,直接动手做项目,别做demo级别的,什么todolist啊,意义不大,必须要经过长时间的实践和踩坑才能掌握精髓,这个项目大概花了十天时间,还是很值得的。
  3. 不要有畏难情绪,现在网上资料也很多,绝大部分问题都能解决。
  4. next.js确实是一个好框架,值得学习

免责生命

本项目所有接口均来自leetcode官网,仅供个人学习,切勿用作商业用途,如产生一切纠纷,均与本人无关。

最后

大家有什么问题,都可以一起交流学习。