与AI协作开发个人网站：从构思到部署的完整实践

 

项目背景

2025年12月，我决定重新打造个人技术网站，主要目标是：

1. 求职准备：作为初级软件工程师展示技术能力
2. 行业定位：突出工业自动化领域经验
3. 技术展示：通过技术文章证明实力
4. 快速迭代：利用AI助手提高开发效率

这次开发经历让我深刻体会到AI在软件开发中的巨大潜力，也发现了一些值得注意的问题和最佳实践。

 

技术栈选择

在AI助手的建议下，我选择了以下技术栈：

 

前端框架

• Next.js 16.0.7：React生态下的全栈框架
• TypeScript：类型安全，提高代码质量
• App Router：Next.js新架构，更好的性能

 

样式方案

• Tailwind CSS：实用优先的CSS框架
• 深色模式：自动适配系统主题

 

内容管理

• Markdown文件：简单易维护的内容格式
• Front Matter：元数据管理（日期、分类、标签）

 

部署策略

• 静态导出：生成纯静态文件，部署灵活
• Vercel：自动构建和部署
• GitHub：版本控制和协作

 

协作流程与经验

 

1. 需求分析与规划

 

AI协助的方面：

• 分析项目需求和技术可行性
• 推荐合适的技术栈
• 设计项目结构和文件组织

我的实践：

• 明确网站定位和目标用户
• 确定内容类型和展示方式
• 制定开发时间线

经验总结：AI在需求分析阶段非常有用，能快速提供多种技术方案对比。但最终决策要结合自己的实际情况。

 

2. 代码生成与优化

 

AI协助的方面：

• 生成页面组件和布局代码
• 编写TypeScript类型定义
• 创建工具函数和辅助方法
• 优化代码结构和性能

我的实践：

• 审阅和理解AI生成的代码
• 根据实际需求调整代码逻辑
• 添加必要的错误处理和边界情况

经验总结：

• AI生成的代码质量很高，结构清晰
• 但需要仔细审查，特别是业务逻辑部分
• TypeScript类型定义能有效减少运行时错误

 

3. 问题诊断与解决

 

开发过程中遇到的主要问题：

 

问题1：Next.js 16 兼容性

 

现象：静态生成时参数传递报错

// 错误代码
export async function generateStaticParams() {
  const posts = getAllPosts();
  return posts.map((post) => ({
    slug: post.slug,  // 参数类型不匹配
  }));
}

解决方案：

// 正确代码
import { use } from 'react';

export async function generateStaticParams() {
  const posts = getAllPosts();
  return posts.map((post) => ({
    slug: post.slug,
  }));
}

export default function ArticlePage({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = use(params);
  // ...
}

经验：Next.js 16对参数处理方式有变化，需要使用use()函数解包Promise。AI能快速定位问题并提供解决方案。

 

问题2：静态导出配置

 

现象：构建失败，提示需要配置静态导出

解决方案：

// next.config.ts
const nextConfig: NextConfig = {
  output: 'export',        // 启用静态导出
  trailingSlash: true,     // 添加尾斜杠
  images: {
    unoptimized: true      // 图片不优化
  }
};

经验：静态导出模式有特殊要求，需要提前规划。AI能提供完整的配置示例。

 

问题3：API路由限制

现象：静态导出不支持API路由，需要移除

解决方案：

• 移除app/api目录
• 将动态数据改为静态生成
• 使用generateStaticParams预生成所有页面

经验：静态站点架构需要在设计阶段就确定，后期修改成本较高。

 

Vercel 部署流程

 

1. 连接GitHub仓库
2. 自动检测Next.js项目
3. 自动运行构建命令
4. 部署out/目录

 

配置要点：

• 无需手动配置构建命令
• Vercel自动识别静态导出
• 推送代码即自动部署

这次项目证明，AI协作开发是未来的趋势。关键是要找到人机协作的最佳平衡点，既利用AI提高效率，又保持人类的创造力和判断力。

对于想要尝试AI协作开发的朋友，我的建议是：

1. 从小项目开始，逐步积累经验
2. 保持学习心态，理解技术原理
3. 重视代码审查，确保质量
4. 积极拥抱变化，适应新工具

AI是强大的工具，但真正的价值在于人类如何使用它。通过合理的协作方式，我们可以创造出更加优秀的作品。