#29 No-code 之旅 — 部署至 Vercel

哇 倒数一天！最近都在准备把专案推上去 production 了，大家可以看看 Next.js 整理的推上 production 之前的注意事项。我们今天来走一遍怎麽把 Next.js 专案部署到 Vercel 吧～

Deploy Preview Ship

Deploy. Preview. Ship. 是 Vercel 首页的 Tagline，注重於 developer experience (DX) 和效能，我个人真的很推 Vercel！至今支援超过 30 个框架，可以跟 GitHub, GitLab, Bitbucket 绑定做 CI/CD，每个 Git 的 branch 和 PR 会有专属的 preview URL，最後所有变化会马上 go live，而且也会帮忙处理 cache 问题。今天这篇不会特别介绍 Vercel，可是会走一遍部署流程～

启程

开始吧！我们可以选择连结到 GitHub, GitLab, 或 Bitbucket，还是选现有的 template。

我自己是使用 Github，所以选了 Github 之後，会跳出视窗问授权，记得按允许喔～

选我们想要部署的专案！来到了设定页，问我们要不要建立一个 team，我在这里选 Skip，因为只有我一个人ＸＤ (注意： Team 需要付费喔～)

现在来设定专案的相关资料，像我因为这专案是用 Next.js 所以不用改 preset，Build and Output Settings 也都用预设的 (大家可以一个人需求去修改喔！)。最後是 Environment Variables，如果有一些比较机密的资讯，不想放在 code 里，那可以放 environment variables 喔 (Vercel 会加密)！像我们之前设定 Notion 的 token，可以放这里～ 最後，按 Deploy！

现在就等吧～ 正在部署中... 啊！太快了！我来不及截图 confetti ＱＱ 不过部署完之後，我们可以回到 dashboard。

我们网站已经是 Ready 状态了，大家可以看看每一页的内容， Overview 就是包含其他页的总结，Deployments 会列出我们的部署纪录与状态，Analytics 我目前不能点 (因为超过一个之後需要付费ＸＤ)，最後是 Settings 包含各种设定。我们去看一下设定吧。

大家可以看每一个设定的内容，可是我想要编辑网站的网址，所以我去 Domains，然後按 Edit，会看到以下的画面。Vercel 还提供免费的网域 xyz.vercel.app，看大家想要怎麽设定喔！不过有可能已经被别人抢走ＸＤ

最後，因为 Vercel 会自动做 preview deploy (非 production)，如果决定这个 deployment 是好的而且想要直接推去 production，或是想要把之前的 deployment 推回去 production 上面。那可以去 Deployments 然後选某个 deployment，再按 ⋯ 会出现下面的 menu，选 Promote to Production and voila ～

小结

希望大家部署顺利，没有遇到任何问题！当然不想用 Vercel 也可以选其他的服务喔！不过如果是用 Next.js 开发的话，使用 Vercel 真的超方便的，而且也支援 Next.js 的所有功能～

大家想要看看之前的网站可以看这里，或是直接到首页～ 有任何问题可以问我，或是也可以讨论未来要开发的 No-code 专案喔。

祝大家上班上课愉快！

晚安 <3

看更多

• Vercel
• Vercel + Next.js
• Next.js Deployment