Next.js 部署指南：Vercel 与 Netlify-JavaScript中文网-JavaScript教程资源分享门户

前言

Next.js 是 React.js 的一个扩展框架，它支持服务端渲染和静态网站生成。它的优势在于提高了 SEO 和页面加载性能，同时更好的路由体验和更快的页面转跳速度。

为了让我们的 Next.js 应用能正常访问，我们需要将它部署到互联网上。本文将会介绍 Next.js 应用的两种常见部署方式：Vercel 和 Netlify。我们会逐一讲解它们的优缺点以及如何使用它们来部署 Next.js 应用。

Vercel 的部署指南

简介

Vercel 是一个专门用来部署创意项目的云平台。它通过自动缩放应用规模来支持前端项目。

Vercel 不仅可以在网站里部署 Next.js 应用，还支持其他的前端技术，比如 React、Vue、Angular、Static HTML 和 CSS。它的 Auto DevOps 功能可以在每次 git push 时自动构建和部署。同时它还提供了一个名为 Live Preview 的功能，这个功能可以让你预览你的应用在实际环境下的运行效果。

步骤

下面来看一下在 Vercel 上部署 Next.js 应用的详细步骤。

如果你还没有 Vercel 帐号，请前往官方网站 https://vercel.com/ 注册一个。Vercel 目前提供了免费服务以及付费服务。免费服务可以供个人或小型企业使用。对于大型企业或需要特殊支持的用户，Vercel 还提供了付费服务。在这里，我们可以选择免费服务。

创建新项目

当你完成注册并登录 Vercel 后，点击 New Project，然后选择 Import Git Repository 选项，并选择你的 Next.js 应用所在的仓库和分支。

配置项目

接下来，你需要配置你的项目。你需要选择你的构建命令和构建输出目录，一般情况下默认就是 npm run build 和 .next 文件夹，如果你的配置不在这个范围内，请自行调整。

接着你需要设置你的环境变量。这里有一些自定义环境变量，如 API KEY 和 SECRET KEY。这些变量可以提供给应用内使用，比如用于 API 认证。

最后一步就是检查所有配置信息是否正确，然后点击 Deploy。之后你会在你的 Vercel 仪表板上看到你的项目已经开始构建。

查看你的应用详情

你可以在你的 Vercel 仪表板上看到你的应用的详情信息，以及在每一个构建过程中记录的日志。这些日志可以帮助你查找任何在应用启动过程中出现的问题。

你可以通过点击 Open 获得你应用的实际链接。部署完毕后，你的应用就可以在互联网上正常访问。

Netlify 的部署指南

简介

Netlify 是一款强大的前端部署服务，它支持很多种不同的应用类型，包括 SPA、JAMstack 和服务器渲染的应用。

Netlify 可以在每次 push 时自动构建你的应用，并将它部署到互联网上。你可以在你的 Netlify 项目管理页面上查看每一次构建和部署的记录和日志。并且通过 Netlify 的 CDN 来提供快速的全球分发。

步骤

接下来，我们来看一下在 Netlify 上部署 Next.js 应用的详细步骤。

如果你还没有 Netlify 帐号，请前往官方网站 https://www.netlify.com/ 注册一个。Netlify 目前提供了免费服务以及付费服务。免费服务可以供个人或小型企业使用。对于大型企业或需要特殊支持的用户，Netlify 还提供了付费服务。在这里，我们可以选择免费服务。

创建新项目

当你完成注册并登录 Netlify 后，点击 New site from Git，然后选择你的 Next.js 应用所在的仓库和分支。

配置项目

接着，你需要设置构建和部署的选项。你可以选择你的构建命令和构建输出目录，一般情况下默认就是 npm run build 和 .next 文件夹。当你的项目被配置好后，你需要在你的控制台上找到一个名为 Build & Deploy 的选项卡，在其中可以设置环境变量。

构建并发布项目

完成项目配置后，你可以在 Netlify 面板内查看你的项目构建与部署记录。你可以在这里选择发布、更新、回滚或是删除你的发布版本。

查看你的应用链接

在 Netlify 完成所有构建和部署步骤之后，你可以直接通过点击网站链接来访问你的 Next.js 应用了。

结论

无论你选择 Vercel 还是 Netlify 进行部署，都应该能够获得快速部署、自动构建和稳定性方面的优势。使用这些平台可以节省大量部署时间和费用，并且能够让你集中精力于你的应用开发上。祝你成功部署你的 Next.js 应用！

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67483be193696b0268ec148b