我开发了一个出海全栈SaaS工具，还写了一套全栈开发教程

大家好，我是程普，即刻App、微信公众号「BigYe程普」，推特「weijunext」。

前段时间，我发布了第一个出海产品 PH Copilot，是一个基于 Plasmo 开发的 Chrome 插件和 Next.js 开发的落地页与服务端的产品。

因为我之前围绕 Next.js 生态圈做了一些开源项目，使用过 next-auth、Lemonsqueezy、prisma 等技术栈，这一次就想尝试了一些没用过的技术栈，因为只有这样我接下来才有文章可写。

等开发完成后，我发现这一路学到的知识和踩过的坑，不是几篇零散的博客文章可以讲好的，所以我决定写一份系统性的教程，把 PH Copilot 的开发过程和使用的技术方案完整记录下来。于是就写了这套 「Chrome插件全栈开发实战」 教程。

这套教程包含 Chrome 插件开发和 Next.js 全栈开发的知识，教你最适合新人独立开发者的出海技术栈组合，帮助你半个月内容成为出海全栈工程师。

教程地址：https://xiaobot.net/p/ship-ph-copilot?refer=30e2865d-a056-4752-a4d7-b5ce6716c71e

专栏配套源码，购买专栏即额外获得一份 Chrome 插件源码和一份 Next.js SaaS 全栈源码。

技术栈组合

教程和源码包含的主要技术知识：

• Plasmo 开发 Chrome 插件
• Next.js 全栈开发 Web 端与服务端
• AI 对话功能开发
• Firebase 授权和数据库应用（免费）
• Paddle 支付功能集成

对于国内独立开发者而言，这个技术栈组合最具性价比：

• 低起步成本：在起步阶段不需要担心服务端资源的消耗和部署的成本
• 全栈掌控：作为独立开发者，我们可以完全掌控产品的每个环节，从前端到后端，再到AI集成
• 专注核心业务：这些工具和服务帮我们处理了大部分底层细节，让我们能更专注于核心业务逻辑和用户体验的优化。

这套技术栈组合非常适合用来快速构建、验证和扩展 SaaS 产品。

我想说说这套源码和教程的价值

当时开发插件的目的之一就是想写出海全栈产品开发教程，所以在写教程的时候，我对每一个功能进行 code review 和代码优化，然后编写开发教程，整个过程花费了3周。

教程从实践角度出发，从0开始构建项目、搭建Chrome插件模板、开发功能模块，每一个步骤都单独讲解，可以帮助你渐进式学习。

源码包含 Chrome 插件端和 Next.js 端两份代码，其中 Next.js 端包含落地页和服务端功能，所有核心功能做了模块化设计，你不仅可以获得源码，还能潜移默化学会专业的代码设计方式。

适用人群

本专栏不是0基础入门教程，不提供基础的环境安装和开发工具使用指导，所以不适合 React/Next.js 技术0基础的朋友。

本专栏适合以下人群学习：

• 有 React 或 Next.js 基础，想要找项目实战的开发者
• 想要学习 Chrome 插件和 Next.js 全栈技术的开发者
• 想要学习 SaaS 产品设计和开发的开发者

FAQs

1. 代码和教程遇到不懂的怎么办？

微信提供全程答疑服务，教到你学会。

2. 需要学习多久？

如果你每天业余时间都可以用来学习，跟着教程的步骤，你可以在2周内学会全栈出海产品的开发。

3. 购买后多久可以获得源码？

为了防止恶意购买并退款，会在购买后48小时左右获得源码访问权限。

4. 我要如何在购买前判断这套教程对我是否有用？

从文章开头的目录思维导图你可以了解到教程包含的技术栈和知识点；我还整理了代码结构，你可以透过代码结构知道源码模块化设计的程度有多高：

// 插件端代码结构（仅展示src部分）
 
ph-copilot-dev-guide
├─ src
│  ├─ background
│  │  ├─ firebase
│  │  │  ├─ authService.ts
│  │  │  ├─ config.ts
│  │  │  ├─ index.ts
│  │  │  ├─ tokenManager.ts
│  │  │  └─ userService.ts
│  │  ├─ aiResponseHandler.ts
│  │  ├─ index.ts
│  │  ├─ messageHandler.ts
│  │  ├─ sendMessageToSource.ts
│  │  ├─ storageManager.ts
│  │  └─ updateChecker.ts
│  ├─ components
│  │  ├─ LanguageSwitcher
│  │  │  ├─ LanguageContext.tsx
│  │  │  ├─ index.tsx
│  │  │  ├─ translations.ts
│  │  │  └─ useTranslation.ts
│  │  └─ ui
│  │     ├─ avatar.tsx
│  │     ├─ button.tsx
│  │     ├─ card.tsx
│  │     ├─ popover.tsx
│  │     ├─ select.tsx
│  │     ├─ toggle.tsx
│  │     └─ tooltip.tsx
│  ├─ contents
│  │  ├─ components
│  │  │  ├─ ContentCommentGenerator.tsx
│  │  │  ├─ ContentOverviewGenerator.tsx
│  │  │  └─ CopilotTools.tsx
│  │  ├─ hooks
│  │  │  ├─ useDOMObserver.ts
│  │  │  └─ useUrlChangeListener.ts
│  │  ├─ styles
│  │  │  └─ content.css
│  │  ├─ utils
│  │  │  └─ constants.ts
│  │  └─ index.tsx
│  ├─ lib
│  │  ├─ constant.ts
│  │  ├─ prefixByEnv.ts
│  │  ├─ useProductDetails.ts
│  │  └─ utils.ts
│  ├─ popup
│  │  ├─ components
│  │  ├─ hooks
│  │  ├─ styles
│  │  ├─ utils
│  │  └─ index.tsx
│  ├─ sidepanel
│  │  ├─ components
│  │  │  ├─ CommentCard.tsx
│  │  │  ├─ Header.tsx
│  │  │  ├─ OverviewCard.tsx
│  │  │  └─ UserInfoCard.tsx
│  │  ├─ hooks
│  │  ├─ styles
│  │  ├─ utils
│  │  └─ index.tsx
│  ├─ store
│  │  ├─ firebaseAuthStorage.ts
│  │  ├─ useCommentLength.ts
│  │  ├─ useLanguageStorage.ts
│  │  └─ useUserData.ts
│  ├─ types
│  │  ├─ product.ts
│  │  └─ user.ts
│  └─ style.css
 

懂的人都知道这里面门道有多深。（这是一个梗，勿喷）

学习地址

点击链接或微信扫码即可购买：

教程地址：https://xiaobot.net/p/ship-ph-copilot?refer=30e2865d-a056-4752-a4d7-b5ce6716c71e

关于我

我是一名全栈工程师，Next.js 开源手艺人，AI降临派。

今年致力于 Next.js 和 Node.js 领域的开源项目开发和知识分享。

欢迎在以下平台关注我：

• Twitter(中文): @weijunext
• Twitter(En): @wayne_dev
• Github: Github
• Blog: J实验室
• 掘金: 程普
• 知乎: 程普
• 即刻: BigYe程普
• 微信公众号: 「BigYe程普」
• 微信交流群: 全栈交流群