从零开始部署Next.js博客到Vercel：一次完整的技术实践

在今天的实践中，我们完成了一次完整的Next.js博客项目部署到Vercel的过程。本文将详细记录整个过程，分享其中遇到的问题和解决方案。

项目背景

我们的目标是创建一个现代化的Next.js博客应用，并将其部署到Vercel平台。项目要求包括：

• 使用Next.js 14和App Router
• 支持Markdown内容管理
• 响应式设计
• 静态生成(SSG)优化SEO

开发过程

1. 项目初始化

我们从头开始创建了一个Next.js项目，配置了基本的应用结构：

• app/page.js - 首页
• app/blog/page.js - 博客列表页
• app/posts/[slug]/page.js - 单篇文章页
• content/posts/ - 存放Markdown文章
• lib/posts.js - 文章处理逻辑

2. 技术选型

• 框架: Next.js 14 with App Router
• 样式: Tailwind CSS
• 内容处理: gray-matter, remark/rehype
• 部署平台: Vercel

遇到的问题及解决方案

问题1：Git大文件限制

在推送代码到GitHub时，我们遇到了著名的”large file”错误。这是因为node_modules目录中的一些二进制文件超过了GitHub的100MB限制。

解决方案：

• 更新.gitignore文件，确保排除node_modules、.next、dist等目录
• 删除已追踪的大文件：git rm -r --cached node_modules
• 重新提交代码

问题2：Vercel部署失败

初期部署时也遇到了类似问题，原因是某些构建产物被意外包含。

解决方案：

• 创建全新的干净仓库
• 确保只有源代码和必要配置文件被提交
• 使用最小化的package.json依赖

最终架构

我们的最终项目结构如下：

├── app/
│   ├── layout.js
│   ├── page.js
│   ├── blog/
│   │   └── page.js
│   └── posts/
│       └── [slug]/
│           └── page.js
├── content/
│   └── posts/
├── lib/
│   └── posts.js
├── components/
├── public/
├── package.json
├── next.config.js
└── vercel.json

部署成果

项目成功部署到Vercel，获得了以下URL：

• 生产环境: https://new-vercel-blog.vercel.app
• 项目别名: https://new-vercel-blog-knlo6y3mi-cloudzuns-projects.vercel.app

性能表现

• 首页首次加载JS大小: 96.1 kB
• 静态页面预渲染优化
• 服务端渲染动态内容
• CDN加速全球访问

经验总结

1. Git管理的重要性

• 始终维护良好的.gitignore文件
• 避免将依赖包和构建产物提交到版本控制
• 使用干净的仓库进行部署

2. 依赖管理最佳实践

• 生产环境仅安装必需的依赖
• 使用package-lock.json确保依赖一致性
• 定期审查和更新依赖包

3. Vercel部署优势

• 自动检测Next.js项目并优化配置
• 零配置部署
• 自动化CI/CD流程
• 全球CDN加速

未来改进方向

• 添加搜索功能
• 实现评论系统
• 优化SEO配置
• 添加暗色模式

结语

通过这次完整的开发和部署实践，我们不仅成功搭建了一个功能完善的Next.js博客，更重要的是积累了处理常见部署问题的经验。从Git大文件限制到Vercel部署优化，每一个挑战都是宝贵的学习机会。

Vercel作为现代前端应用的部署平台，确实提供了优秀的开箱即用体验。对于Next.js项目来说，它是一个非常理想的选择。