Next.js教程：网站部署

将Next.js部署到生产环境的最简单方法是使用Next.js的创建者提供的Vercel平台。Vercel是用于静态站点，混合应用程序和无服务器功能的云平台。

入门

如果尚未这样做，则将Next.js应用程序推送到您选择的Git提供程序：GitHub，GitLab或BitBucket。您的存储库可以是私有的也可以是公共的。

然后，请按照下列步骤操作：

注册Vercel（无需信用卡）。
注册后，您将到达“导入项目”页面。在“来自Git存储库”下，选择您使用的Git提供程序并设置集成。（说明：GitHub / GitLab / BitBucket）。
设置完成后，单击“从…导入项目”，然后导入Next.js应用程序。它会自动检测到您的应用程序正在使用Next.js，并为您设置构建配置。无需更改任何内容-一切都应该正常！
导入后，它将部署您的Next.js应用并为您提供部署URL。点击“访问”以查看您的应用程序正在生产中。

恭喜你！您刚刚部署了Next.js应用程序！如有疑问，请参阅Vercel文档。

如果您使用的是自定义服务器，我们强烈建议您从其迁移（例如，使用动态路由）。如果您无法迁移，请考虑其他托管选项。

DPS：开发，预览，运送

让我们讨论一下我们建议使用的工作流程。Vercel的支持就是我们所说的DPS工作流程：d evelop，P审查，小号臀部：

开发：在Next.js中编写代码。保持开发服务器运行，并利用React快速刷新。
预览：每次将更改推送到GitHub / GitLab / BitBucket上的分支时，Vercel都会自动创建一个具有唯一URL的新部署。打开拉取请求时，可以在GitHub上查看它们，也可以在Vercel项目页面上的“预览部署”下查看它们。在此处了解更多信息。
运送：准备运送时，将拉取请求合并到您的默认分支（例如main）。Vercel将自动创建生产部署。

通过使用DPS工作流程，除了进行代码审查之外，您还可以进行部署预览。每个部署都会创建一个可以共享或用于集成测试的唯一URL。

针对Next.js进行了优化

Vercel由Next.js的创建者制作，并具有对Next.js的一流支持。

例如，开箱即用完全支持混合页面方法。

每个页面都可以使用“静态生成”或“服务器端渲染”。
使用“静态生成”和资产（JS，CSS，图像，字体等）的页面将自动从Vercel的Edge Network提供服务，该速度非常快。
使用服务器端渲染和API路由的页面将自动变为隔离的无服务器功能。这允许页面渲染和API请求无限扩展。

自定义域，环境变量，自动HTTPS等

自定义域：在Vercel上部署后，您可以为Next.js应用程序分配一个自定义域。在这里看看我们的文档。
环境变量：您也可以在Vercel上设置环境变量。在这里看看我们的文档。然后，您可以在Next.js应用程序中使用这些环境变量。
自动HTTPS：默认情况下，HTTPS是启用的（包括自定义域），不需要额外的配置。我们会自动续订SSL证书。
更多： 阅读我们的文档以了解有关Vercel平台的更多信息。

自动更新

部署Next.js应用程序时，您希望查看最新版本而无需重新加载。

路由时，Next.js会在后台自动加载应用程序的最新版本。对于客户端导航，next/link将暂时用作普通<a>标签。

如果预先已预取了新页面（带有旧版本）next/link，则Next.js将使用旧版本。然后，在刷新整个页面或进行多个客户端转换之后，Next.js将显示最新版本。

其他托管方式

Node.js 服务器

Next.js 可以部署到任何支持 Node.js 的托管提供商处。如果你使用的是自定义服务器方式，则应采用这种方式。

确保你的 package.json 文件中设置了 "build" 和 "start" 脚本：

{
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  }
}

执行 next build 命令将在 .next 文件夹中构建出用于生产环境的应用程序。构建之后，执行 next start 命令启动一个支持混合页面（hybrid pages）的 Node.js 服务程序，该服务程序将同时服务于静态生成的页面和服务器端渲染的页面。

Docker镜像

Next.js可以部署到任何支持Docker容器的托管提供商。在部署到Kubernetes或HashiCorp Nomad之类的容器编排器时，或者在任何云提供商的单个节点内运行时，都可以使用此方法。

这里是一个多级Dockerfile使用node:alpine，您可以使用：

# Install dependencies only when needed
FROM node:alpine AS deps
# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
RUN apk add --no-cache libc6-compat
WORKDIR /app
COPY package.json yarn.lock ./
RUN yarn install --frozen-lockfile

# Rebuild the source code only when needed
FROM node:alpine AS builder
WORKDIR /app
COPY . .
COPY --from=deps /app/node_modules ./node_modules
RUN yarn build

# Production image, copy all the files and run next
FROM node:alpine AS runner
WORKDIR /app

ENV NODE_ENV production

# You only need to copy next.config.js if you are NOT using the default configuration
# COPY --from=builder /app/next.config.js ./
COPY --from=builder /app/public ./public
COPY --from=builder /app/.next ./.next
COPY --from=builder /app/node_modules ./node_modules

RUN addgroup -g 1001 -S nodejs
RUN adduser -S nextjs -u 1001
RUN chown -R nextjs:nodejs /app/.next
USER nextjs

EXPOSE 3000

# Next.js collects completely anonymous telemetry data about general usage.
# Learn more here: https://nextjs.org/telemetry
# Uncomment the following line in case you want to disable telemetry.
# RUN npx next telemetry disable

CMD ["node_modules/.bin/next", "start"]

确保将此Dockerfile放置在项目的根文件夹中。

您可以使用构建容器docker build . -t my-next-js-app并使用运行它docker run -p 3000:3000 my-next-js-app。

导出静态 HTML

如果你想将 Next.js 应用程序导出为静态 HTML，请按照文档中的说明进行操作。

作者：terry，如若转载，请注明出处：https://www.web176.com/nextjs/2451.html