Tailwind v4 迁移指南和工具
Tailwind v4 迁移:① @tailwind 改为 @import 'tailwindcss' ② tailwind.config.ts 改为 CSS 内联 @theme ③ content 配置变化 ④ 插件语法变化 ⑤ 部分类名调整。用官方迁移工具 npx @tailwindcss/up...
Tailwind v4 迁移:① @tailwind 改为 @import 'tailwindcss' ② tailwind.config.ts 改为 CSS 内联 @theme ③ content 配置变化 ④ 插件语法变化 ⑤ 部分类名调整。用官方迁移工具 npx @tailwindcss/up...
开源论坛/社区项目:① Discourse(Ruby,成熟)② Flarum(PHP,轻量)③ Answer(Go,问答型)④ this project(Next.js 全栈)。按技术栈和需求选择,自建推荐 Next.js 栈便于维护。 AI 编程 Prompt 速查手册:代码生成(描述需求+技术...
AI 编程 Prompt 模板库推荐:① awesome-cursorrules(GitHub 上的 .cursorrules 集合)② promptbase(Prompt 市场)③ langchain prompts ④ openai cookbook ⑤ Anthropic prompt lib...
Next.js 博客模板对比:① next-portfolio-blog(简洁)② velite(内容集合)③ contentlayer(已停更)④ next-blog-theme(Vercel 官方)⑤ hashnode(托管型)。按内容管理方式选择:MDX 文件 vs CMS vs Headle...
SaaS Boilerplate 横评:① ShipFast(Next.js + Stripe,$299)② Next SaaS Starter(开源)③ SaaS Starter Kit ④ Turbo SaaS ⑤ Makerkit。按预算和技术栈选择,付费的省时间,开源的省钱。 整理了 10...
图标库推荐:Lucide React(Shadcn 默认,2000+ 图标)、Heroicons(Tailwind 出品)、Phosphor Icons(多风格)、Tabler Icons(3500+)、Iconify(统一接口 100+ 图标集)、React Icons(聚合库)。推荐 Lucid...
Next.js 图片优化:用 next/image 自动优化格式和尺寸。配置 remotePatterns 允许外部图片域名。LCP 图片加 priority。用 placeholder='blur' 模糊占位。避免 width/height 比例错误导致 CLS。 整理了 10 个我每天都在用的...
Next.js 全栈脚手架推荐:① create-next-app(官方)② next-boat ③ t3-stack ④ skateshop ⑤ next-saas-starter。按技术栈组合选择:T3 Stack(tRPC+Prisma+Tailwind)、Next-auth+Prisma 组...
Server Action 代码模板:包含 Zod 校验、权限检查、事务处理、错误处理、revalidatePath、i18n 错误消息的标准模板。复制后替换业务逻辑即可,确保符合 Server Action 规范。 免费 CDN:Cloudflare(最流行,免费额度大)、jsDelivr(开源...
Vercel 优化清单:① 函数冷启动优化 ② Edge Runtime ③ ISR 缓存 ④ 图片优化 ⑤ 字体优化 ⑥ 代码分割 ⑦ 第三方脚本优化 ⑧ build 配置 ⑨ 环境变量管理 ⑩ 域名和 HTTPS。每项都有对应的 Vercel 功能支持。 SaaS Boilerplate 横评...
AI 编程 Prompt 速查手册:代码生成(描述需求+技术栈+约束)、Bug 修复(贴报错+代码+期望)、重构(贴代码+目标)、测试(贴代码+覆盖场景)、文档(贴代码+文档类型)。每个场景一个标准 Prompt 模板。 SaaS Boilerplate 横评:① ShipFast(Next.js...
免费图片资源:Unsplash(高质量摄影)、Pexels(免费照片视频)、Pixabay(综合)、Open Peeps(手绘人物)、Undraw(插画,可改色)、Hero Patterns(几何图案)。都是 CC0 或免费商用,出海项目必备。 Next.js 图片优化:用 next/image...
Vibecoding 学习社区:Reddit r/nextjs、r/webdev、Hacker News、Indie Hackers、V2EX、掘金、Next.js Discord。英文社区信息更新快,中文社区讨论深入。多看别人分享的项目和经验。 UI 组件库 2024 版推荐:Shadcn UI...
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 命令)。打印出来贴桌上。 V...
免费中英文字体推荐:中文用 Noto Sans SC(Google Fonts)、霞鹜文楷(开源楷体)、思源黑体;英文用 Inter(最流行)、Geist(Vercel 出品)、JetBrains Mono(代码)。用 next/font 加载,自动优化和子集化。 Prisma 迁移最佳实践:①...
Next.js 代码规范模板:ESLint 配置(next/core-web-vitals + jsx-a11y + import)、Prettier 配置、TypeScript 严格模式、命名规范、文件组织结构。团队统一规范,减少 Code Review 争论。 Next.js 测试模板:Vit...
Vibecoding 实战案例:记录了我用 Cursor 从一个 idea 到上线产品的全过程。① 用 AI 生成 landing page ② 搭建认证系统 ③ 实现核心功能 ④ 接入支付 ⑤ 部署上线。总共 3 天,AI 生成约 70% 代码,人工审查和调整 30%。 SEO 结构化数据模板:...
AI 编程工具对比表(2024 最新):Cursor($20/月,多文件编辑最强)、Copilot($10/月,生态最全)、Windsurf($15/月,速度最快)、Cline(开源免费,需自备 API)、Trae(国产,中文最好)。按预算和场景选择。 SEO 结构化数据模板:WebPage(基础...
出海域名选择:① .com 最通用 ② .ai 适合 AI 产品(贵但流行)③ .io 适合技术产品 ④ .dev 适合开发者工具 ⑤ .co 短且便宜。注册商推荐 Porkbun(便宜)、Namecheap(服务好)、Cloudflare(成本价)。 出海产品配色方案:① 蓝色系(信任感,Saa...
图标库推荐:Lucide React(Shadcn 默认,2000+ 图标)、Heroicons(Tailwind 出品)、Phosphor Icons(多风格)、Tabler Icons(3500+)、Iconify(统一接口 100+ 图标集)、React Icons(聚合库)。推荐 Lucid...