上一篇我们建完 Next.js 专案了，并且能成功在自己的电脑上开发改 code 了！下一步就是要来把它上线到云端主机上，让全世界看到！

虽然我们什麽都还没改，什麽功能都还没加，但除非你的专案已经是赫赫有名的网站了，或是有上线时程的考量，非得要全部完成後才能上线，否则如果是新的小部落格的话，我建议可以把部署到主机上的流程先建立起来，开发起来会比较有成就感，马上能在线上看到自己的成果，也方便随时分享给其他人看，谘询改善的意见 （顺便炫耀一下）

你可以在任何能执行 Node.js 的主机上部署 Next.js 网站，而我们在这边会使用 Vercel 来部署。

Vercel 托管平台简介

Vercel 也是由开发 Next.js 的 Vercel 公司（同一个名字）提供的网站托管平台，支援许多现代网页框架的部署，包含 Next.js、React、Vue、Angular、Gatsby、Svelte 等，官网内有详细列表。而因为跟 Next.js 是同一个爹，当然最适合用来架设 Next.js 网站在上头。

在 Vercel 上部署 Next.js 网站，只要流量不要太大，基本上是完全免费的！也不需要绑定信用卡，部署过程也非常无痛！按几个按钮几秒钟就能完成了，非常佛心！

Vercel 更好用的地方是它可以跟 Github 连动，当你 push 新的改动到 Github repo 上时，会自动触发新的上版流程，即时更新之前已经部署完成的网页，不需要手动重做任何 build 动作，Vercel 帮你搞定，这个机制有个专有名词叫 Continuous Deployment (CD)，可以大幅提升开发者体验！所以我们会先从开 Github repo 和与 Vercel 串连开始做起。

建立 Github repo

如果你开发过程序，这流程你应该很熟了，我们快速带过！

进到 Github 官网，点右上角加号建立新 Repository，并输入你期望的专案名称後点完成按钮。因为我们上一篇文章在本机端已经有一些 code 了，我们要的是把本机的 code 推上来，不希望 repo 有预设的档案，因此预设 README.md 那些都不用打勾：

完成以後复制下面第二段程序码，并在本机端 Next.js 资料夹用终端机执行：

git remote add origin [email protected]:Kamigami55/oh-so-pro-blog.git
git branch -M main
git push -u origin main

执行完後在 Github 网页重新整理，有看到如下图，程序码有被上传就算完成这部分了！

将 Vercel 串连 Github，实现自动部署

接着进到 Vercel 网站建立新专案，记得使用 Github 帐号做登入

https://vercel.com/new

登入完後就会看到如下图画面，左边会列出你 Github 帐号里所有 repo，你可以在这里选择刚刚新建立的 Next.js blog repo，点击 Import 按钮

会进到下一步设定画面。首先要设定 Team，但如果没有要跟其他人协作的话，这边可以先点 Skip

下面可以进一步告诉 Vercel 你的专案是用什麽框架？以及要用什麽指令来 Deploy？这边设定也不用修改，用预设的 Next.js 设定就好，直接点下面 Deploy 按钮：

等大约一分钟 build 完後就会出现完成画面！！！

点按钮进到 Dashboard 就有各种进阶设定可以调整，像是环境变数之类的，目前先不需要调整

你可以点 Visit 按钮，就能看到你成功 Deploy 的新网站！！恭喜你完成 Deploy 了！！

Vercel 也分配给他了一个还不错的网址，你的网站现在全世界都可以看到了！并且当你改东西 push 到 Github 上时，网站也会自动更新到最新版！非常方便！接下来我们只要专注在功能开发就好！

下面附上我自己的专案网址和 Github repo，後续的改动都可以在这边看到最新程序码和画面：

https://oh-so-pro-blog.vercel.app/

https://github.com/Kamigami55/oh-so-pro-blog

下一篇文章让我们开始将 WordPress 与 Next.js 连接起来！我们会先从 WordPress 端的 GraphQL API 开始建立。