开源 Next.js 博客模板横向对比
SEO 结构化数据模板:WebPage(基础页面)、Article(文章)、FAQPage(问答)、Product(产品)、BreadcrumbList(面包屑)、Organization(组织)。每个模板含必填字段和 JSON-LD script 标签写法。 Tailwind 组件灵感:① Ta...
SEO 结构化数据模板:WebPage(基础页面)、Article(文章)、FAQPage(问答)、Product(产品)、BreadcrumbList(面包屑)、Organization(组织)。每个模板含必填字段和 JSON-LD script 标签写法。 Tailwind 组件灵感:① Ta...
AI 编程学习路径:① 先学 HTML/CSS/JS 基础 ② 学 React + Next.js ③ 学 TypeScript ④ 学数据库 + Prisma ⑤ 学 Auth.js 认证 ⑥ 学 Tailwind CSS ⑦ 用 Cursor/Copilot 辅助 ⑧ 学 Prompt 工程 ⑨...
AI 编程 Prompt 速查手册:代码生成(描述需求+技术栈+约束)、Bug 修复(贴报错+代码+期望)、重构(贴代码+目标)、测试(贴代码+覆盖场景)、文档(贴代码+文档类型)。每个场景一个标准 Prompt 模板。 Prompt 工程学习资源:① OpenAI Prompt Engineer...
AI 编程 Prompt 模板库推荐:① awesome-cursorrules(GitHub 上的 .cursorrules 集合)② promptbase(Prompt 市场)③ langchain prompts ④ openai cookbook ⑤ Anthropic prompt lib...
出海域名选择:① .com 最通用 ② .ai 适合 AI 产品(贵但流行)③ .io 适合技术产品 ④ .dev 适合开发者工具 ⑤ .co 短且便宜。注册商推荐 Porkbun(便宜)、Namecheap(服务好)、Cloudflare(成本价)。 UI 组件库 2024 版推荐:Shadcn...
出海产品配色方案:① 蓝色系(信任感,SaaS 常用)② 绿色系(增长,金融科技)③ 紫色系(创新,AI 产品)④ 橙色系(活力,消费应用)⑤ 黑白灰(极简,设计工具)。推荐去 Realtime Colors 和 Happy Hues 找现成配色。 Next.js 部署平台:Vercel(官方,最...
Cursor .cursorrules 模板按技术栈分类:Next.js 通用版、Next.js + Prisma 版、Next.js + Tailwind v4 版、Next.js + Auth.js 版、React Native 版、Python FastAPI 版。每个模板包含技术栈声明、编码...
Auth.js 认证模板:包含 credentials provider(邮箱密码)、Google OAuth、GitHub OAuth、JWT callback、session callback、middleware 认证。开箱即用的认证方案,复制到项目即可。 AI 编程 Prompt 模板库推...
Prisma Schema 设计模板:包含 User/Post/Comment/Tag 的标准模型,含索引、关系、级联删除、软删除字段、时间戳。按这个模板扩展,避免漏掉索引和关系定义。 免费 SSL 证书:Let's Encrypt(最流行,90 天续期)、Cloudflare(CDN + SSL...
Tailwind 组件灵感:① Tailwind UI(官方,部分付费)② HyperUI(免费开源)③ Preline UI(免费)④ Flowrift ⑤ Meraki UI ⑥ TailwindComponents(社区)。先看灵感再自己写,比直接复制学到的更多。 Next.js 错误处理模...
Next.js 图片优化:用 next/image 自动优化格式和尺寸。配置 remotePatterns 允许外部图片域名。LCP 图片加 priority。用 placeholder='blur' 模糊占位。避免 width/height 比例错误导致 CLS。 SEO 结构化数据模板:Web...
Vercel 优化清单:① 函数冷启动优化 ② Edge Runtime ③ ISR 缓存 ④ 图片优化 ⑤ 字体优化 ⑥ 代码分割 ⑦ 第三方脚本优化 ⑧ build 配置 ⑨ 环境变量管理 ⑩ 域名和 HTTPS。每项都有对应的 Vercel 功能支持。 Vibecoding 工作流模板:①...
SEO 结构化数据模板:WebPage(基础页面)、Article(文章)、FAQPage(问答)、Product(产品)、BreadcrumbList(面包屑)、Organization(组织)。每个模板含必填字段和 JSON-LD script 标签写法。 国际化翻译文件模板:分享一套 zh....
补充一点:如果团队里有人对这块不熟,建议先做个 15 分钟的内部分享再推进,共识成本远低于返工成本。 最近在实际项目里反复验证了这套做法,今天抽空整理出来。先说结论:{kw}这件事,方法论比工具选择更重要,工具只是放大器。
Next.js 代码规范模板:ESLint 配置(next/core-web-vitals + jsx-a11y + import)、Prettier 配置、TypeScript 严格模式、命名规范、文件组织结构。团队统一规范,减少 Code Review 争论。 分享一套我打磨了三个月的 vib...
国际化翻译文件模板:分享一套 zh.json + en.json 模板,包含 auth/forum/dashboard/errors/common 五个命名空间,ICU 插值格式,最多 2 层嵌套。符合 next-intl 规范,直接复制修改。 Cursor .cursorrules 模板按技术栈...
SEO 工具大全:关键词研究用 Ahrefs/SEMrush/Ubersuggest,排名监控用 Google Search Console/AccuRanker,技术 SEO 用 Screaming Frog/Sitebulb,内容优化用 Surfer SEO/Clearscope,免费替代用 G...
开源 Admin Dashboard 模板:① shadcn-admin ② next-admin ③ adminjs ④ refine ⑤ turbo-admin。按需求选择:简单后台用 shadcn-admin,复杂 CRUD 用 refine,需要 ORM 集成用 adminjs。 SaaS...
免费中英文字体推荐:中文用 Noto Sans SC(Google Fonts)、霞鹜文楷(开源楷体)、思源黑体;英文用 Inter(最流行)、Geist(Vercel 出品)、JetBrains Mono(代码)。用 next/font 加载,自动优化和子集化。 Next.js 部署平台:Ver...
Next.js 代码规范模板:ESLint 配置(next/core-web-vitals + jsx-a11y + import)、Prettier 配置、TypeScript 严格模式、命名规范、文件组织结构。团队统一规范,减少 Code Review 争论。 出海产品配色方案:① 蓝色系(信...