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

大家好，我是哥飞。

哥飞在之前两篇文章中，都介绍了 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 – 托管