即刻App年轻人的同好社区
下载
@我的Notion next.js
哥飞: 可以帮你赚钱的 Next.js 教程和开源项目推荐 大家好，我是哥飞。 哥飞之前在《不用开发，如何 10 分钟上线一个 AI 产品 https://mp.weixin.qq.com/s/N0Puxv0X2D6eC5q_Ps8uLQ》和《不用开发，如何只用一个域名就可以一键部署上线一个AI产品 https://mp.weixin.qq.com/s/cQKc0gAYVyPV7qnnBCsk3A》两篇文章中，都介绍了 Vercel 平台。 出海赚钱最低成本方式，就是把代码部署到 Vercel 上，这样就不用购买服务器了，只需要买个域名就可以开始做网站赚钱，靠《养网站防老：网站可以做成一生的事业 https://mp.weixin.qq.com/s/URcdE3VaoYoAx0cOcll8_g》。 而最容易获取长期且免费稳定的流量的方式就是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【教程+项目】 （图四） 项目作者：@BigYe程普 项目地址：https://nextjs.weijunext.com/ 项目代码：https://github.com/weijunext/nextjs-learn-demos 配套教程：https://weijunext.com/tag/NextJS （图五） 看看上面的目录就知道，这套代码+教程真不错。 5. Next.js 带登录支付【实战项目】 （图六） 项目作者：@BigYe程普 开源代码：https://github.com/weijunext/smart-excel-ai/ 中文介绍：https://github.com/weijunext/smart-excel-ai/blob/main/README-zh.md 演示网站：https://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 ）整理
1 00
