可以帮你赚钱的 Next.js 教程和开源项目推荐
原创 我是哥飞 2024-01-09 08:00:08
收录于话题
大家好，我是哥飞。
哥飞之前在《不用开发，如何 10 分钟上线一个 AI 产品》和《不用开发，如何只用一个域名就可以一键部署上线一个AI产品》两篇文章中，都介绍了 Vercel 平台。
出海赚钱最低成本方式，就是把代码部署到 Vercel 上，这样就不用购买服务器了，只需要买个域名就可以开始做网站赚钱，靠《养网站防老：网站可以做成一生的事业》。
而最容易获取长期且免费稳定的流量的方式就是SEO了，Vercel 官方支持的 Next.js 框架是一个 SEO 友好的前后端 js 框架，很值得大家学习。
所以哥飞找了几个优秀的 Next.js 教程，并且还有可以直接拿来就能够使用的自带登录和支付的开源 Next.js 项目源码，全都分享给大家。
特别是第5个项目，集成了 Google 和 Github 登录，还集成了 Lemon Squeezy 支付，是哥飞最推荐的项目。
1. Learn Next.js 中文教程【图文教程】
教程地址：https://qufei1993.github.io/nextjs-learn-cn/
示例代码：https://github.com/qufei1993/nextjs-learn-example
这是 Learn Next.js 教程的中文翻译版本，看目录，整个教程内容还是不错的。
2. Next.js 14 完整教程2024【视频教程】
教程地址：https://www.bilibili.com/video/BV1n64y1n7xE/
配套源码：https://github.com/safak/next14-tutorial
这是 Youtube 上很火的一个 Next.js 教程，被人搬运到了B站，方便大家观看。虽然是英文的，但是跟着操作，基本没多大问题。
3. 基于 Next.js 实现 Github 热榜【实操项目】
演示地址：https://rising-repo.vercel.app/
开源代码：https://github.com/yanggggjie/rising-repo
这是开发者 yanggggjie 开源的一套代码，基于 Next.js 实现了一个 Github 热榜网站，包含了数据抓取、数据处理、数据显示等，是一个不错的可以拿来学习的项目。
4. Next.js Demo【教程+项目】
项目地址：https://nextjs.weijunext.com/
项目代码：https://github.com/weijunext/nextjs-learn-demos
配套教程：https://weijunext.com/tag/NextJS
看看上面的目录就知道，这套代码+教程真不错。
5. Next.js 带登录支付【实战项目】
开源代码：请加哥飞微信 qiayue 领取
功能演示：请加哥飞微信 qiayue 领取
这个项目可太牛了，基于 Next.js 和 Vercel AI SDK 实现了调用 ChatGPT 生成 Excel 公式功能。
不仅仅集成了 Google 登录和 Github 登录，还支持 Lemon Squeezy 支付。
也就是说，这就是一个完完整整的可以拿来就用的项目，你还可以基于这个项目的代码去开发你自己的AI工具站。
这个开源项目的技术栈如下：
Next.js – 前端/后端
TailwindCSS – 样式
Postgres和Prisma - 数据库和存储
Next-auth - 认证
ChatGPT - 生成Excel公式
Upstash - Redis
Lemon Squeezy - 支付
Google Analytics - 访问分析
Docker - 开发存储
Vercel - 托管
欢迎大家加哥飞微信 qiayue 领取这个项目的代码和演示网站哈。
另外，哥飞的付费社群“哥飞的朋友们”二群已经490人了，只剩最后10个位置了，想要入群的请抓紧哦。