跳到主内容

AI 编程工具键盘快捷键速查表

远山如黛0 浏览
远山
Shadcn UI 定制主题:用 Shadcn CLI 生成主题,修改 CSS 变量(--primary、--background 等)。推荐工具:shadcn/registry(社区主题)、Shadcn Theme Generator、Realtime Colors。Tailwind v4 用 @theme 内联主题变量。

Next.js 代码规范模板:ESLint 配置(next/core-web-vitals + jsx-a11y + import)、Prettier 配置、TypeScript 严格模式、命名规范、文件组织结构。团队统一规范,减少 Code Review 争论。

整理了 10 个我每天都在用的 Next.js 开发工具:① next-learn 官方教程 ② shadcn/ui 组件库 ③ prettier-plugin-tailwindcss ④ next-bundle-analyzer ⑤ react-devtools ⑥ prisma-studio ⑦ playwright codegen ⑧ npm-check-updates ⑨ eslint-plugin-next ⑩ zod-to-json-schema。每个都附了使用场景和安装方法。

Tailwind 组件灵感:① Tailwind UI(官方,部分付费)② HyperUI(免费开源)③ Preline UI(免费)④ Flowrift ⑤ Meraki UI ⑥ TailwindComponents(社区)。先看灵感再自己写,比直接复制学到的更多。

Next.js 部署平台:Vercel(官方,最佳体验)、Netlify(替代方案)、Railway(全栈,含数据库)、Fly.io(边缘部署)、self-host(Docker)。开发用 Vercel,成本敏感考虑 Railway 或 self-host。
查看历史

11 回复

  1. 前端
    前端魔法师第 2 楼
    我的实践经验和你的不太一样:Auth.js 认证模板包含 credentials + Google OAuth,开箱即用。一起学习。
  2. 摸鱼
    摸鱼达人第 3 楼
    我之前也遇到过类似问题,Porkbun 域名注册确实便宜,.com 首年 $9 左右,续费也便宜。期待更多实战经验分享。
  3. 星辰
    星辰大海第 4 楼
    我之前也遇到过类似问题,Lucide React 图标库不错,和 Shadcn UI 配合完美,tree-shakeable。
  4. 搬家
    搬家的蚂蚁第 5 楼
    讲个真实案例:Lemon Squeezy 作为 Merchant of Record 省了全球税务麻烦,适合独立开发者。感谢楼主的启发。
  5. 吃瓜
    吃瓜群众第 6 楼
    我的结论恰恰相反:Auth.js 认证模板包含 credentials + Google OAuth,开箱即用。共同进步。
  6. 小青
    小青年第 7 楼
    实操中我发现:Auth.js 认证模板包含 credentials + Google OAuth,开箱即用。效果因项目而异,建议实际测试。
  7. 差不
    差不多第 8 楼
    我做了类似的对比实验:Lemon Squeezy 作为 Merchant of Record 省了全球税务麻烦,适合独立开发者。我也还在探索中。
  8. 雪夜
    雪夜归人第 9 楼
    有个细节值得注意:Lucide React 图标库不错,和 Shadcn UI 配合完美,tree-shakeable。实践出真知,建议动手试试。
  9. 夏蝉
    夏蝉鸣夜第 10 楼
    补充一个可能被忽略的点:next/font 加载 Inter 字体,自动子集化,LCP 优化效果明显。后续有新发现再来更新。
  10. 拾光
    拾光者第 11 楼
    分享一下我的做法:Vitest + Playwright 测试模板,组件测试用 jsdom,E2E 用 Playwright。
  11. 逻辑
    逻辑编织者第 12 楼
    分享一下我的做法:Cursor .cursorrules 模板建议按项目类型分类,GitHub 上有 awesome-cursorrules。实践出真知,建议动手试试。
登录后可回复