3.3 综合项目实战(极简版)

现在不再继续讲新知识,只做一件事: 把你手上的 Next.js 项目变成一个可以分享给朋友的个人小站。

目标尽量简单:

只做 1 个首页
再加 1-2 个简单子页面(例如「关于我」、「项目列表」)
能上线，能在手机和电脑上打开
不用管性能、SEO、主题切换这些高级功能

项目目标: 一个「能用就行」的个人页

页面大致长这样:

顶部一个标题:「我是 XXX」
中间 2-3 段话: 你在做什么 / 想学什么 / 想做什么项目
底部 1-2 个按钮: 链接到你的社交账号或邮箱

你可以把它当成:

向朋友解释「我在学 AI 编程」的说明书
后面做项目时的统一入口(把项目链接挂在这里)

三步法: 做 → 改 → 上线

第 1 步: 让 AI 生成基础页面

在你已经跑起来的 Next.js 项目里,复制当前 app/page.tsx,发给 AI,说:


请帮我把这个首页改成一个极简的个人介绍页,要求:
- 居中布局,适配电脑和手机
- 顶部是大标题"我是 XXX"
- 中间有三段话: 我是谁 / 我为什么学 AI 编程 / 我接下来想做什么项目
- 底部有两个按钮: 一个跳转到 /projects, 一个是 mailto 邮箱链接
- 用简单的 Tailwind CSS 样式,白底黑字就行
请直接给我完整的 page.tsx 代码。

把返回的代码粘回去,保存,在浏览器确认样式符合预期。

不满意? 继续跟 AI 说:


把标题字号调大一点
按钮颜色改成蓝色
文字之间的间距加大

第 2 步: 补一个简单的项目页

让 AI 帮你在 app/projects/page.tsx 里加一个最简单的列表:


请为我的 Next.js 项目创建一个 `app/projects/page.tsx` 文件,
展示 3 个项目:
- "第一个网页" (描述: 用 AI 生成的静态页面)
- "个人主页" (描述: 现在这个站)
- "未来想做的产品" (描述: 先留一个空位)

用简单的列表或卡片展示,重点是简单清晰、适配手机。
不需要复杂的样式,能看清楚就行。

根据你的实际项目情况,把文字改成真实内容。

第 3 步: 部署到 Vercel

如果你还没有部署过,可以直接照抄下面的流程:

步骤 A: 推送到 GitHub

如果还没推送,问 AI:


我的 Next.js 项目在本地,现在想推送到 GitHub。
请教我完整步骤,包括:
1. 如何在 GitHub 创建仓库
2. 本地执行哪些 git 命令
3. 如何确认推送成功

步骤 B: Vercel 部署

访问 https://vercel.com,用 GitHub 登录
点击「New Project」→ 选择你的仓库 → 一路 Next
等几分钟,拿到形如 https://xxx.vercel.app 的网址
打开网址测试

部署报错? 复制整个错误日志给 AI,说:


这是我在 Vercel 部署 Next.js 项目时的完整错误日志,
请按"问题原因 → 我应该具体改什么 → 改完如何重新部署"的格式教我。

正在检查访问权限...

学习进度0%

0/60 篇已完成