将Next.js部署到生产环境的最简单方法是使用Next.js的创建者提供的Vercel平台。Vercel是用于静态站点,混合应用程序和无服务器功能的云平台。
如果尚未这样做,则将Next.js应用程序推送到您选择的Git提供程序:GitHub,GitLab或BitBucket。您的存储库可以是私有的也可以是公共的。
然后,请按照下列步骤操作:
恭喜你!您刚刚部署了Next.js应用程序!如有疑问,请参阅Vercel文档。
如果您使用的是自定义服务器,我们强烈建议您从其迁移(例如,使用动态路由)。如果您无法迁移,请考虑其他托管选项。
让我们讨论一下我们建议使用的工作流程。Vercel的支持就是我们所说的DPS工作流程:d evelop,P审查,小号臀部:
main
)。Vercel将自动创建生产部署。通过使用DPS工作流程,除了进行代码审查之外,您还可以进行部署预览。每个部署都会创建一个可以共享或用于集成测试的唯一URL。
Vercel由Next.js的创建者制作,并具有对Next.js的一流支持。
例如,开箱即用完全支持混合页面方法。
部署Next.js应用程序时,您希望查看最新版本而无需重新加载。
路由时,Next.js会在后台自动加载应用程序的最新版本。对于客户端导航,next/link
将暂时用作普通<a>
标签。
如果预先已预取了新页面(带有旧版本)next/link
,则Next.js将使用旧版本。然后,在刷新整个页面或进行多个客户端转换之后,Next.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 服务程序,该服务程序将同时服务于静态生成的页面和服务器端渲染的页面。
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
。
如果你想将 Next.js 应用程序导出为静态 HTML,请按照 文档 中的说明进行操作。