- 🌟基于最流行的技术栈:
- shadcn: 是去年star增长数最多的技术栈, 因为其友好的样式以及基于 tailwindcss 的样式二次开发
- Nextauth: 方便集成第三方登录、密码登录等常见登录功能
- 🌐i18n支持: 基于next-intl, 友好的支持国际化, 服务端/客户端均给出示例, 可以方便的进行多流量设置
- 🚀oauth支持: 基于Nextauth 的登录模板, 目前实现了基于 google 和 github 的oauth 登录,详细配置见 这里
- 集成Lemon Squeezy
- NextAuth
- 登录
- 注册
克隆该项目后, 参考.env.example创建.env文件, 并参考下面的配置文档 配置开发环境的环境变量
npm i
npm run devImportant
开发环境和线上环境的配置是不一样的,需要注意
可以方便的一键部署到 vercel 看效果
因为UI采取shadcn, 所以颜色配色方案可以参考 shadcn
- 打开 github oauth apps 页面
- 点击 new Oauth App, 创建应用
- Application name: 写和本次应用相关的name, 无强制要求
- Homepage url：开发的时候写本次URL, 部署到线上需要写线上域名
- Authorization callback url: 开发的时候写本地回调url http://localhost:3000/api/auth/callback/github，部署线上应用需要写线上版本的url: https://hostname/api/auth/callback/github
和github基本同理,注意有几点不同
- callback url的不同
- google oauth url不同: 参考https://developers.google.com/identity/protocols/oauth2/javascript-implicit-flow?hl=zh-cn
- shadcn 官方库: shadcn/ui
- google 官方基础 web 课程（html/css): web.dev
- react 官方文档 (有基础的直接看文档) : React
- nextjs 官方网站，有丰富的参考文档：Next.js by Vercel - The React Framework (nextjs.org)
- nextjs 官方课程，以项目为导向学习 nextjs：Learn Next.js | Next.js by Vercel - The React Framework (nextjs.org)
- tailwindcss 样式库：安装 - TailwindCSS中文文档 | TailwindCSS中文网
- 设计相关