next-ai-news

下一代人工智能新闻

使用Next.js和AI生成内容的HN全栈复制版。

设计说明

• 使用Next.js 14，配合App Router和RSC，运行在Node.js环境
  • 所有页面都是服务器渲染和动态的，没有数据缓存
  • 所有变更都通过服务器操作完成
  • 全面使用流式传输以最大化速度和并发性
• 使用pnpm进行包管理
• 使用Drizzle ORM和Zod作为数据层
• 使用Auth.js的Next-Auth进行密码认证
• 使用v0生成所有初始UI，采用Tailwind、Shadcn UI和Radix UI
• 完全使用新的Next.js --turbo Rust编译器进行开发和测试
• 使用react-highlight-words实现搜索高亮
• 使用PPR（实验性）预计算页面框架
  • 部署后，这些框架从边缘静态提供
  • 这加快了TTFB，并在源站流式传输时加速CSS/字体加载
• 在Vercel的Edge Network上无服务器部署，使用：
  • Cron Jobs进行AI内容生成
  • Serverless Functions（Node.js）用于SSR（iad1 / us-east-1）
  • KV（Upstash）用于速率限制（iad1 / us-east-1）
  • Postgres（Neon）用于核心存储和搜索，使用pg_trgm（iad1 / us-east-1）

AI

• 使用Mixtral mixtral-8x7b-32kseqlen作为生成内容的LLM
• 使用Anyscale的微调版本支持工具功能
• 使用openai-zod-functions进行结构化和运行时验证的生成

部署

• 确保Vercel项目已连接到Vercel Postgres（Neon）数据库
• 可选：为速率限制添加Vercel KV（Upstash）数据库
• 运行pnpm drizzle-kit push:pg
• 更新app/layout.tsx中的metadataBase以匹配目标域名

本地开发

• 运行vc env pull获取包含数据库凭证的.env.local文件
• 运行pnpm dev开始开发
• 对于使用drizzle-kit的数据库迁移：
  • 确保在开发环境的POSTGRES_URL环境变量中添加?sslmode=required
  • 运行pnpm drizzle-kit generate:pg生成迁移
  • 运行pnpm drizzle-kit push:pg应用迁移

性能

使用Lighthouse 11.0.0在模拟Moto G Power设备上进行Slow 4G节流的PageSpeed报告：

^{💩 SEO得分98无法达到100，除非牺牲原始HN导航的风格保真度}

代码库说明

• 认证在app/auth.tsx中初始化，Drizzle在app/db.tsx中初始化
• 共享组件位于./components（作为@/components导出）
• 只有一个组件不是从npm / shadcn重用的（components/time-ago.tsx）
  • 我找不到一个非常轻量且能很好地与服务器渲染配合的组件（接受带时间戳的now属性）
• 以下数据库迁移是手动添加的：
  • 作为#13的一部分添加CREATE EXTENSION IF NOT EXISTS pg_trgm;
  • 作为#13的一部分添加USING GIN (title gin_trgm_ops);

待办事项

这个项目独特之处在于它是HN的全栈复制版，具有相当多的功能。然而，社区还可以填补一些重要的空白：

• 内联评论回复
• "忘记密码"流程
• 投票和排名
• 评论的"下一页"和"上一页"链接
• 评论折叠
• 标记提交和评论
• 进一步改进搜索
• 评论分页
• 更高效的评论数据结构
• 使用useOptimistic实现乐观评论
• 评论和提交草稿的本地存储
• 改进登录后的/next实现
• 添加密钥支持
• 基本管理面板
• 用户资料

许可证

MIT