可以帮你赚钱的 Next.js 教程和开源项目推荐

大家好，我是哥飞。

哥飞之前在《不用开发，如何 10 分钟上线一个 AI 产品 mp.weixin.qq.com》和《不用开发，如何只用一个域名就可以一键部署上线一个AI产品 mp.weixin.qq.com》两篇文章中，都介绍了 Vercel 平台。

出海赚钱最低成本方式，就是把代码部署到 Vercel 上，这样就不用购买服务器了，只需要买个域名就可以开始做网站赚钱，靠《养网站防老：网站可以做成一生的事业 mp.weixin.qq.com》。

而最容易获取长期且免费稳定的流量的方式就是SEO了，Vercel 官方支持的 Next.js 框架是一个 SEO 友好的前后端 js 框架，很值得大家学习。

所以哥飞找了几个优秀的 Next.js 教程，并且还有可以直接拿来就能够使用的自带登录和支付的开源 Next.js 项目源码，全都分享给大家。

特别是第5个项目，集成了 Google 和 Github 登录，还集成了 Lemon Squeezy 支付，是哥飞最推荐的项目。

1. Learn Next.js 中文教程【图文教程】
（图一）
教程地址：qufei1993.github.io
示例代码：github.com

这是 Learn Next.js 教程的中文翻译版本，看目录，整个教程内容还是不错的。

2. Next.js 14 完整教程2024【视频教程】
（图二）
教程地址：www.bilibili.com
配套源码：github.com

这是 Youtube 上很火的一个 Next.js 教程，被人搬运到了B站，方便大家观看。虽然是英文的，但是跟着操作，基本没多大问题。

3. 基于 Next.js 实现 Github 热榜【实操项目】
（图三）
演示地址：rising-repo.vercel.app
开源代码：github.com

这是开发者 yanggggjie 开源的一套代码，基于 Next.js 实现了一个 Github 热榜网站，包含了数据抓取、数据处理、数据显示等，是一个不错的可以拿来学习的项目。

4. Next.js Demo【教程+项目】
（图四）
项目作者：@BigYe程普
项目地址：nextjs.weijunext.com
项目代码：github.com
配套教程：weijunext.com
（图五）
看看上面的目录就知道，这套代码+教程真不错。

5. Next.js 带登录支付【实战项目】
（图六）
项目作者：@BigYe程普
开源代码：github.com
中文介绍：github.comblob/main/README-zh.md
演示网站：www.smartexcel.cc

这个项目可太牛了，基于 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 ）整理