分享一套 vibecoding 出海 SaaS 项目模板
免费 CDN:Cloudflare(最流行,免费额度大)、jsDelivr(开源 CDN)、unpkg(npm CDN)。图床:Cloudflare R2(10GB 免费)、Vercel Blob、Supabase Storage。出海项目用 Cloudflare 一站式解决。 免费图片资源:Un...
免费 CDN:Cloudflare(最流行,免费额度大)、jsDelivr(开源 CDN)、unpkg(npm CDN)。图床:Cloudflare R2(10GB 免费)、Vercel Blob、Supabase Storage。出海项目用 Cloudflare 一站式解决。 免费图片资源:Un...
AI 编程工具扩展:Cursor 扩展(Better Cursor Rules、Cursor Brag)、VS Code 扩展(Codeium、Tabnine、Supermaven)。推荐 Better Cursor Rules,社区维护的 .cursorrules 集合,按项目类型选择。 Pri...
Next.js SEO 配置模板分享:包含 generateMetadata 函数(title/description/OG/Twitter Card)、sitemap.xml 路由处理器、robots.txt、JSON-LD 结构化数据(WebPage/Article/FAQPage)、hrefl...
Next.js 性能监控:① Vercel Analytics(官方)② Speed Insights ③ Web Vitals ④ Sentry Performance ⑤ Datadog RUM。免费方案用 Vercel Analytics + Web Vitals,生产环境加 Sentry。...
SEO 工具大全:关键词研究用 Ahrefs/SEMrush/Ubersuggest,排名监控用 Google Search Console/AccuRanker,技术 SEO 用 Screaming Frog/Sitebulb,内容优化用 Surfer SEO/Clearscope,免费替代用 G...
Prisma Schema 设计模板:包含 User/Post/Comment/Tag 的标准模型,含索引、关系、级联删除、软删除字段、时间戳。按这个模板扩展,避免漏掉索引和关系定义。 SEO 结构化数据模板:WebPage(基础页面)、Article(文章)、FAQPage(问答)、Produc...
Tailwind 组件灵感:① Tailwind UI(官方,部分付费)② HyperUI(免费开源)③ Preline UI(免费)④ Flowrift ⑤ Meraki UI ⑥ TailwindComponents(社区)。先看灵感再自己写,比直接复制学到的更多。 Next.js SEO 配...
SaaS Boilerplate 横评:① ShipFast(Next.js + Stripe,$299)② Next SaaS Starter(开源)③ SaaS Starter Kit ④ Turbo SaaS ⑤ Makerkit。按预算和技术栈选择,付费的省时间,开源的省钱。 Shadcn...
整理了 10 个我每天都在用的 Next.js 开发工具:① next-learn 官方教程 ② shadcn/ui 组件库 ③ prettier-plugin-tailwindcss ④ next-bundle-analyzer ⑤ react-devtools ⑥ prisma-studio ⑦...
AI 编程工具快捷键:Cursor(Cmd+K 生成、Cmd+L 聊天、Cmd+I Composer)、Copilot(Tab 接受、Cmd+I Chat)、Windsurf(Cmd+I Cascade)、VS Code 通用(Cmd+P 文件、Cmd+Shift+P 命令)。打印出来贴桌上。 S...
Next.js 错误处理模板:包含 error.tsx(路由组错误边界)、global-error.tsx(根错误)、not-found.tsx(404)、loading.tsx(加载状态)。错误消息走 i18n,catch 块用 logger.error,用户看到友好提示。 免费设计资源:Fig...
AI 编程工具扩展:Cursor 扩展(Better Cursor Rules、Cursor Brag)、VS Code 扩展(Codeium、Tabnine、Supermaven)。推荐 Better Cursor Rules,社区维护的 .cursorrules 集合,按项目类型选择。 Pri...
Next.js 测试模板:Vitest 配置(jsdom 环境、setup 文件)、组件测试模板、Server Action 测试模板、Playwright E2E 模板。测试覆盖率目标:核心逻辑 80%+,UI 交互 60%+。 SEO 内容写作模板:① 标题公式(关键词+价值主张+品牌)② d...
Prompt 工程学习资源:① OpenAI Prompt Engineering Guide(官方)② Anthropic Prompt Engineering ③ Learn Prompting(开源教程)④ Prompt Engineering Guide(DAIR.AI)⑤ DeepLear...
SEO 结构化数据模板:WebPage(基础页面)、Article(文章)、FAQPage(问答)、Product(产品)、BreadcrumbList(面包屑)、Organization(组织)。每个模板含必填字段和 JSON-LD script 标签写法。 免费设计资源:Figma 社区(UI...
Next.js 中间件模板:包含认证重定向、API 限流、i18n 路由处理的标准模板。middleware 只做认证和安全防护,禁止业务逻辑重定向。matcher 排除 /api、/_next、静态文件。 出海建站资源包:域名注册用 Namecheap/Porkbun、DNS 用 Cloudfl...
Next.js 性能监控:① Vercel Analytics(官方)② Speed Insights ③ Web Vitals ④ Sentry Performance ⑤ Datadog RUM。免费方案用 Vercel Analytics + Web Vitals,生产环境加 Sentry。...
出海域名选择:① .com 最通用 ② .ai 适合 AI 产品(贵但流行)③ .io 适合技术产品 ④ .dev 适合开发者工具 ⑤ .co 短且便宜。注册商推荐 Porkbun(便宜)、Namecheap(服务好)、Cloudflare(成本价)。 Next.js 全栈脚手架推荐:① crea...
AI 编程学习路径:① 先学 HTML/CSS/JS 基础 ② 学 React + Next.js ③ 学 TypeScript ④ 学数据库 + Prisma ⑤ 学 Auth.js 认证 ⑥ 学 Tailwind CSS ⑦ 用 Cursor/Copilot 辅助 ⑧ 学 Prompt 工程 ⑨...
Shadcn UI 定制主题:用 Shadcn CLI 生成主题,修改 CSS 变量(--primary、--background 等)。推荐工具:shadcn/registry(社区主题)、Shadcn Theme Generator、Realtime Colors。Tailwind v4 用 @...