彬子：从 Demo 到产品，用 Trae 从 0 到 1 Vibe Coding 一个 NextJS 项目的新手教学
输入“/”快速插入内容
彬子：从 Demo 到产品，用 Trae 从 0 到 1 Vibe Coding 一个 NextJS 项目的新手教学
彬子：从 Demo 到产品，用 Trae 从 0 到 1 Vibe Coding 一个 NextJS 项目的新手教学
用户8537用户8537
用户7290用户72902025年6月27日修改
🧑💻
作者：彬子
前言
最近 Vibe Coding 非常火，人人都能写代码。
借助 Trae 一类的 AI Coding 工具，只要会提问就能迅速的出一个想象中的 Demo，让很多编程新人非常有成就感。
这时候 AI 交给我们的项目大多是一个单 HTML 文件的网页。我们可以找一些静态网页托管的服务发布上去，就能给别人查看和使用了。
很多新手会卡在这无法再进一步，激情就会来的快去的快。今天我会带着大家突破这层壁障，向上的空间就会无限大。
Demo 阶段
我们仍从 Demo 阶段开始寻找灵感，毕竟 HTML 就足以可视化展示出我们想象中的画面。
以最近 WaytoAGI 将举办全球 AI 大会东京站的活动网站举例。AJ 脑海中有一个首页的画面，她通过 Trae 的 Builder 多轮对话生成一个 HTML 文件，发到群里我打开一看很哇塞。尤其是渐变配色的背景，又科技又迷幻。
如果只是作为一个活动宣传页，继续优化细节发布上线就可以了。
产品阶段
我们可能需要这个大会活动站点未来承载更多功能，比如关联的用户注册，邮件发送，号牌查看，身份验证等等。
这时候，单个 HTML 文件就有很大的扩展和维护的局限性。需要引入更优的前端框架来更好的构建线上产品。
这里我用 NextJS 的框架来举例，一方面 NextJS 的生态很丰富，想到和看到的网站功能基本上都有库支持了。另一方面部署也是新手头疼的事情，借助 Vercel 之类的免费服务，可以无痛上线。
那我们开始吧～
前端项目模板准备
直接冲上来就让 Trae 参考 HTML 的内容来开发一个 NextJS 项目也不是不行，但缺乏稳定性，复杂度一下拔得太高，反复和 AI 拉扯会极速消耗热情。
我们需要先有一个打底的前端项目模板。
如果还没有，就可以先和 Trae 讨论整出一个通用的前端模板，以后开发类似站点就可以直接拿来用。
以 WaytoAGI 全球 AI 大会东京站需求来说，除了好看的落地页，这个模板需要支持多语言。所以先来搞定一个支持多语言的通用模板。
1.
先创建一个空的项目文件夹 wta-tokyo，用 Trae 打开后，添加一个 project rules。约定技术规范对后续开发的稳定性很重要。
project_rules.md
Next.js Application
## Project
- Next.js TypeScript application using App Router.
- Component development with React.
- Use Tailwind CSS for styling design.
- Use Shadcn UI components.
- Use React Context for state management.
- Use next-intl for internationalization.
## Rules
- Implement type safety using TypeScript.
- Follow React best practices and hooks.
- Achieve responsive design using Tailwind CSS and Shadcn UI.
- Maintain a consistent internationalization structure.
- Maintain the modularity and reusability of components.
- Use correct type definitions for components and data.