GitHub 热门项目：NextFaster

GitHub 项目：NextFaster 仓库地址：https://github.com/ethanniser/NextFaster 星级：4843 | 作者： ethanniser 项目描述：使用 Next.js 的高性能电子商务模板 =================================================== 自述文件内容： ## 下一个更快 使用 Next.js 和 AI 生成内容的高性能电子商务模板，由 [@ethanniser](https://x.com/ethanniser)、[@RhysSullivan](https://x.com/RhysSullivan) 和 [@armans-code](https://x.com/ksw_arman) ### 设计笔记 **查看详细的 [twitter 帖子](https://x.com/ethanniser/status/1848442738204643330)** - 使用 [Next.js 15](https://nextjs.org/) - 所有突变均通过[服务器操作](https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations)完成 - [Partial Prerendering](https://vercel.com/blog/partial-prerendering-with-next-js-creating-a-new-default-rendering-model) 用于预先计算页面的 shell - 部署后，这些是从边缘静态提供的 - 然后将动态数据（例如购物车信息）传输到 - 在 [Neon Postgres](https://neon.tech) 之上使用 [Drizzle ORM](https://orm.drizzle.team/docs/overview) - 存储在 [Vercel Blob](https://vercel.com/docs/storage/vercel-blob) 上的图像 - 使用 [v0](https://v0.dev) 生成所有初始 UI，查看一些让我们印象特别深刻的线程： - [v0 在没有库的情况下实现了令人印象深刻的搜索下拉菜单](https://v0.dev/chat/lFfc68X3fir?b=b_1o4tkiC9EEm&p=0) - [重新创建“订单”页面](https://v0.dev/chat/RTBa8dXhx03?b=b_4RguNNUEhLh) - [重新创建“登录”页面](https://v0.dev/chat/tijwMFByNX9?b=b_XnRtduKn2oe) ####人工智能 - 使用 [OpenAI](https://openai.com) 的 `gpt-4o-mini` 及其批处理 API 和 Vercel AI SDK 来生成产品类别、名称和描述 - [GetImg.ai](https://getimg.ai) 用于通过 `stable-diffusion-v1-5` 模型生成产品图像 ### 部署 - 确保 Vercel 项目已连接到 Vercel Postgres (Neon) 数据库和 Vercel Blob 存储 - 运行“pnpm db:push”将架构应用到您的数据库 ### 本地开发 - 运行“vc link”将您的项目链接到 Vercel。 - 运行“vc env pull”以获取包含您的数据库凭据的“.env.local”文件。 - 运行 `pnpm install` && `pnpm dev` 开始开发。 - data/data.zip 包含一个约 300 MB 的 data.sql 文件，其中包含完整架构和 1,000,000 多个产品（_注意，数据超出了 Vercel 上 Neon 免费层允许的大小限制_ [查看更多](https://vercel.com/docs/storage/vercel-postgres/usage-and-pricing#pricing)）。要使用此数据为 Vercel Postgres 播种： - 将 data.zip 解压缩到 data.sql。 - 运行`psql“YOUR_CONNECTION_STRING”-f data/data.sql`。 - 在数据库中创建默认角色。 -运行`psql“YOUR_CONNECTION_STRING”` - 现在运行默认创建角色；并创建角色cloud_admin； - 对于使用 `drizzle-kit` 进行数据库迁移： - 确保将“?sslmode=required”添加到开发人员的“POSTGRES_URL”环境中 - 运行“pnpm db:push”将架构应用到您的数据库 ### 性能 [PageSpeed 报告](https://pagespeed.web.dev/analysis/https-next-faster-vercel-app/7iywdkce2k?form_factor=desktop)