跳到主内容

用 AI 做的 Next.js 食谱分享平台,已获 500 用户

终端常驻民0 浏览
终端
部署流程:GitHub push → Vercel 自动构建 → Preview 环境 → 合并到 main → Production 环境。环境变量在 Vercel Dashboard 配置,区分 Production/Preview/Development。数据库迁移用 GitHub Actions 在部署前自动执行 prisma migrate deploy。

UI 设计灵感来自 Linear 和 Vercel,极简风格。配色用 CSS 变量控制,支持亮色/暗色/系统三种模式。组件用 Shadcn UI 做基础,自定义了按钮和卡片的圆角和阴影。响应式断点用 Tailwind 的 sm/md/lg/xl,移动端优先设计。

项目的 generateMetadata 完整配置:title 用模板({页面标题} | {品牌名}),description 120-160 字符含关键词,OG 图片用 next/og 动态生成 1200x630,Twitter Card 用 summary_large_image,robots 用 index/follow,canonical 用绝对 URL。
查看历史

6 回复

  1. 林间
    林间晨露第 2 楼
    我的踩坑经验:暗色模式用 next-themes 确实方便,我的项目也是这么做的,但要注意 suppressHydrationWarning。欢迎私信深入交流。
  2. 数星
    数星星第 3 楼
    上周刚好踩了这个坑,Recharts 用 next/dynamic 懒加载是对的,我之前直接 import 导致首屏 LCP 从 1s 变成 3s。
  3. 观星
    观星者第 4 楼
    我之前也遇到过类似问题,这个项目技术栈和我现在做的很像,PageSpeed 98 分确实不容易,我的才 85 分需要优化了。细节可以再展开讨论。
  4. 躺平
    躺平选手第 5 楼
    ISR + MDX 的博客方案我也在用,revalidate: 3600 是个合理的值,太短会影响性能。
  5. 海角
    海角天涯第 6 楼
    反对一下,我的测试结果不是这样:作品完成度很高,LCP 0.9s 的数据很亮眼,请问 next/image 的 priority 是只给首屏大图加了吗?
  6. 奔跑
    奔跑的树懒第 7 楼
    不同场景下结论可能不同:这个项目技术栈和我现在做的很像,PageSpeed 98 分确实不容易,我的才 85 分需要优化了。共同进步。
登录后可回复