使用 Next.js 建站：GitHub 代码管理、Vercel CI/CD 部署及腾讯云域名关联实现国内访问
引言
在为公司开发官网时，传统国内建站方式通常涉及购买云服务器、采用 WordPress 或自研系统，流程复杂且耗时。相比之下，结合 Next.js、GitHub 和 Vercel 提供了一套高效、免费的解决方案：Next.js 提供现代化 Web 开发体验，GitHub 实现代码管理，Vercel 提供无缝 CI/CD 部署，而腾讯云域名配置则优化国内访问速度并满足合规需求。
本流程的优势在于：
- Next.js：支持服务器端渲染（SSR）、静态生成（SSG）和 API 路由，兼顾性能与 SEO。
- GitHub：免费代码托管，版本控制简单。
- Vercel：Next.js 官方部署平台，支持自动部署和全球 CDN。
- 腾讯云域名：支持 ICP 备案，加速国内访问。
本文总结了从零搭建 Next.js 官网、通过 GitHub 管理代码、使用 Vercel 实现 CI/CD，并关联腾讯云域名以优化国内访问的完整流程。内容基于官方文档和实践经验，适合有 React 基础的开发者，预计耗时 1-2 小时。以下步骤包含详细命令和界面描述，确保清晰易懂。
步骤 1: 创建 Next.js 项目
确保本地安装 Node.js（建议版本 18 或以上）。使用 create-next-app 快速创建项目。
- 初始化项目：
- 在终端运行：
npx create-next-app@latest my-next-app - 按提示选择：推荐使用 App Router，TypeScript（可选）、ESLint 和 Tailwind CSS。生成的项目包含仪表板模板，适合快速开发。
- 项目结构：
my-next-app/ ├── app/ ├── public/ ├── next.config.js ├── package.json └── README.md
- 在终端运行：
- 启动开发服务器：
- 进入目录：
cd my-next-app - 运行：
npm run dev - 打开
http://localhost:3000，查看 Next.js 默认页面。
- 进入目录：
图 1: Next.js 项目创建终端
初学者可参考 Next.js 官方文档的 React 基础课程，深入了解 App Router。
步骤 2: 代码托管到 GitHub
GitHub 提供可靠的代码版本控制和协作平台。我们将本地项目推送到 GitHub 仓库。
- 初始化本地 Git 仓库：
- 在项目根目录运行：
git init git add . git commit -m "Initial commit"
- 在项目根目录运行：
- 创建 GitHub 仓库：
- 登录 GitHub，点击右上角 “+” > “New repository”。
- 输入仓库名称（如
my-next-app），选择公有（便于 Vercel 集成）或私有，添加描述，可选添加 README 或.gitignore。 - 点击 “Create repository”。
- 推送代码：
- 添加远程仓库：
git remote add origin https://github.com/your-username/my-next-app.git - 推送：
git push -u origin main
- 添加远程仓库：
此步骤确保代码安全备份，并为 CI/CD 部署做准备。
步骤 3: 使用 Vercel 实现 CI/CD 部署
Vercel 是 Next.js 的首选部署平台，支持从 GitHub 自动构建和部署，简化 CI/CD 流程。
- 连接 GitHub 与 Vercel：
- 注册/登录 Vercel（免费账户即可）。
- 在 Vercel 仪表板点击 “New Project”。
- 选择 GitHub，授权访问，选择
my-next-app仓库，点击 “Import”。
- 配置并部署：
- 保留默认设置（框架自动识别为 Next.js）。
- 点击 “Deploy”，Vercel 将自动构建并部署项目。
- 部署完成后，获得类似
my-next-app.vercel.app的默认域名。
- 启用 CI/CD：
- 推送至
main分支触发生产部署，其他分支触发预览部署。 - 可在 Vercel 设置中调整生产分支（默认
main）。 - 私有仓库需确保提交者有 Vercel 项目权限。
- 推送至
图 3: Vercel 部署仪表板
（描述：Vercel 页面显示 “Deployments” 标签，列出构建日志和预览 URL，绿色状态表示部署成功。）
测试 CI/CD：修改本地代码，推送至 GitHub，Vercel 将自动重新部署。
步骤 4: 配置腾讯云域名以优化国内访问
为提升品牌形象和国内访问速度，我们通过 Vercel 添加子域名（如 blog.example.com），并结合腾讯云 DNS 解析。注意：中国用户需完成域名 ICP 备案（约 20 天），否则可能无法访问。备案可通过腾讯云控制台申请。
- 在 Vercel 配置子域名：
- 在 Vercel 项目仪表板，进入 “Settings” > “Domains”。
- 输入子域名（如
blog.example.com），点击 “Add”。 - Vercel 提供 CNAME 记录（如
cname.vercel-dns.com），并自动配置 SSL。
图 4: Vercel 域名配置界面
（描述：Vercel 设置页面显示 “Add Domain” 输入框和 DNS 记录提示，包含 CNAME 值。）
- 在腾讯云设置 DNS：
- 登录腾讯云控制台，进入 “域名管理” > “DNS 解析”。
- 选择已备案域名（如
example.com）。 - 添加记录：
- 类型：CNAME
- 主机记录：
blog - 记录值：
cname.vercel-dns.com（从 Vercel 复制） - TTL：600 秒
- 保存后，等待 DNS 传播（几分钟至数小时）。
- 验证：运行
dig blog.example.com，确认指向 Vercel IP。
图 5: 腾讯云 DNS 配置界面
（描述：腾讯云控制台显示 “添加记录” 按钮，填写 CNAME 类型、主机记录和值，蓝色主题。）
- 优化国内访问：
- 备案完成后，国内用户可直接访问子域名。
- Vercel 的全球 CDN 结合腾讯云域名解析可降低延迟。
- 若访问受限，检查备案状态或启用腾讯云 CDN 加速。
此配置兼顾合规性和性能：Vercel 负责部署，腾讯云 提供域名解析和备案支持。
结论
通过 Next.js、GitHub、Vercel 和腾讯云的组合，您可以快速构建一个高性能、易维护的企业官网。相比传统 WordPress 或自研建站方式，此流程简化了开发和部署，特别适合需要快速上线和国内优化的项目。遇到问题可参考 Next.js、Vercel 或腾讯云官方文档。
如需扩展功能（如环境变量、Edge Functions），请查阅 Vercel 文档。祝您的官网开发顺利！
