创建并部署 Next.js 应用指南

开发 Next.js 应用只是起始阶段，接下来的关键步骤是部署。此过程旨在使您的应用可被全网用户访问。有效的部署策略对于确保应用的性能、可扩缩性和可靠性至关重要。本指南将引导您完成 Next.js 应用的成功部署。

12:22

在 Cloud Run 上运行 Next.js 应用

什么是 Next.js 框架？

Next.js 是在 React 之上扩展的框架，通过新增功能，让构建并自动优化可用于生产用途的网站更加容易。

简单来说，Next.js 是一款可帮助您使用 React 构建现代应用的框架。它提供服务端能力，并内置图像优化与优化组件，在保持较小传输体积的同时带来更快的体验。

React（默认）与 Next.js 的区别

两者或许看起来相似，且都运行 JavaScript，但其定位与功能存在显著差异。

特征	React（默认）	Next.js
SEO 友好度	难度较大	对 SEO 友好
初始加载性能	较慢	更快
数据提取	需要手动实现	内置对 getServerSideProps 和 getStaticProps 的支持
转送	使用路由库（例如 React Router）	基于文件系统的路由
复杂性	更简单	开箱即用程度更高

特征

React（默认）

Next.js

SEO 友好度

难度较大

对 SEO 友好

初始加载性能

较慢

更快

数据提取

需要手动实现

内置对 getServerSideProps 和 getStaticProps 的支持

转送

使用路由库（例如 React Router）

基于文件系统的路由

复杂性

更简单

开箱即用程度更高

如何创建 Next.js 应用

对于许多 React 应用，这些步骤大致相同，但我们建议使用 Next.js 框架。在高性能与高级需求场景下，此框架会管理多种组件，帮助更高效地扩展应用并优化 React 站点的 SEO。

第 1 步：启动项目

您需要使用终端生成模板，以包含全部细节与代码要求。

使用终端：

npx create-next-app@latest

继续之前，您还需要进行一些配置。

第 2 步：定义或修改这些项目文件

您需要了解必要条件、所需信息（服务器或客户端）以及这些信息的获取位置。这些即为本次构建应包含的内容。

“这是为了提高性能和速度。”

第 3 步：确保新数据已就绪

同理，这有助于确认所需服务器端和/或客户端组件已就绪。

第 4 步：将计算交还给服务器端

现在更新代码，并优化布局。

您可能需要了解相关信息，请参阅此文档。

第 5 步：立即向用户展示新代码

完成这些更改后，设置即告完成。开始渲染。

创建 Next.js 应用时的关键考虑事项

为了获得最佳 SEO 效果，网站速度至关重要。仅靠 JavaScript 可能会降低渲染效率，并对搜索表现产生不利影响。不过，使用 Next.js 可以缓解这一问题。因此，应优先保证快速加载体验与高效的数据管理。要实现可靠的安全性与高质量产品，需谨慎使用测试数据，并遵守隐私与访问控制要求。

客户端路由

大多数 React 应用都会使用 react-router-dom 等库来处理导航。由于这一过程发生在浏览器端，托管服务器也必须相应配置以支持它。通常需将所有页面请求重定向到根 index.html，由 React Router 接管并渲染正确组件。

环境变量

您的应用很可能在开发与生产环境采用不同配置，例如 API 密钥或数据库端点。使用环境变量（例如通过 .env 文件）管理这些信息至关重要，可避免在源代码中暴露敏感信息。

后端 API 通信

React 前端负责界面呈现，但通常从后端 API 获取动态数据。部署时，须确保 React 应用使用生产 API 的正确网址；若该 API 托管在不同域名下，还需配置以处理跨源资源共享 (CORS)。

如何在 Cloud Run 上部署 Next.js 应用

当您希望采用基于容器的工作流（可最大化一致性与可移植性）时，Cloud Run 是部署 React 应用的理想选择。请参阅快速入门指南，开始在 Cloud Run 上构建并部署 Next.js (React) 应用。

第 1 步：确认应用就绪

为确保迁移顺利进行。请确保数据与传输设置的相关细节均已落实。

第 2 步：执行 next build；创建 Docker 容器映像

按照这些步骤，确保各阶段都包含项目所需的全部细节。

# 仅在需要时安装依赖项

FROM node:16-alpine AS deps

# 查看 https://github.com/nodejs/docker-node/tree/b4117f933ba60658f2812f36b8

117330a1dc25ab#alpine

RUN apk add --no-cache libc6-compat

WORKDIR /app

COPY package.json package-lock.json ./

RUN npm ci

# 如果使用 turbo，也请取消注释此部分：

# COPY turbo.json ./

# COPY .gitignore ./

# 添加环境变量

ENV NEXT_TELEMETRY_DISABLED 1

# 重建钩子用于检查应包含与不应包含的内容

RUN npm run build

###############

#### 第 2 阶段：生产环境映像 ###

###############

FROM node:16-alpine AS runner

WORKDIR /app

# 构建时可用的 NEXT_PUBLIC_... 环境变量。

ENV NODE_ENV production

# 仅当您使用自定义配置文件时，才需要复制 next.config.js

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

COPY --from=builder /app/package.json ./package.json

# 详情请参阅：https://cloud.google.com/run/docs

/configuring/traffic

ENV PORT 8080

EXPOSE 8080

CMD ["npm", "start"]

# 仅在需要时安装依赖项

FROM node:16-alpine AS deps

# 查看 https://github.com/nodejs/docker-node/tree/b4117f933ba60658f2812f36b8

117330a1dc25ab#alpine

RUN apk add --no-cache libc6-compat

WORKDIR /app

COPY package.json package-lock.json ./

RUN npm ci

# 如果使用 turbo，也请取消注释此部分：

# COPY turbo.json ./

# COPY .gitignore ./

# 添加环境变量

ENV NEXT_TELEMETRY_DISABLED 1

# 重建钩子用于检查应包含与不应包含的内容

RUN npm run build

###############

#### 第 2 阶段：生产环境映像 ###

###############

FROM node:16-alpine AS runner

WORKDIR /app

# 构建时可用的 NEXT_PUBLIC_... 环境变量。

ENV NODE_ENV production

# 仅当您使用自定义配置文件时，才需要复制 next.config.js

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

COPY --from=builder /app/package.json ./package.json

# 详情请参阅：https://cloud.google.com/run/docs

/configuring/traffic

ENV PORT 8080

EXPOSE 8080

CMD ["npm", "start"]

现在开始部署。使用 Cloud Build 等平台，并关联/对接配置文件。

第 3 步：让云为您所用，并据此完成最终发布

现在，可将 Cloud Run 作为最终承载方式；同时评估其是否适用、配置是否正确。请务必参考主要工具与示例代码，确保系统顺畅运行。

如何在 Firebase 上部署 Next.js 应用

Firebase 也是出色的部署平台，请记住以下简单步骤。准备好在 Firebase 上集成 Next.js 了吗？请参阅完整文档。

第 1 步：准备好面向公网的服务器设置

按该映像或文档的要求进行配置（需要 SSL），以确保安全运行。

第 2 步：设置并安装 (CMD)

接下来说明如何安装并使用 CLI 与 Firebase。

npm install -g firebase-tools

第 3 步：连接并配置项目

按照“Firebase Init - Hosting”进行操作。

确保网址已被正确重写，并在命令行中填写无误。

选择“No”选项；这样在全部内容部署时更不易出错。

利用 Google Cloud 解决业务难题

新客户可获得 $300 赠金，用于抵扣 Google Cloud 的费用。

测试最佳实践

您需要进行本地测试，这要求在本地 (localhost) 运行代码。

完成 CLI 身份验证后，将其推送到此代码库：

gcloud auth configure-docker

现在开始上传：

docker tag [IMAGE_NAME] gcr.io/[PROJECT-ID]/[IMAGE_NAME]
Gcloud container images and push it in

如需查看 Cloud Run 的通用开发技巧完整列表，请参阅此文档。

更进一步

获享 $300 赠金以及 20 多种提供“始终免费”用量的产品，开始在 Google Cloud 上构建项目。

不知从何入手，需要一点帮助？
联系业务代表
与值得信赖的合作伙伴携手
寻找合作伙伴
继续浏览
查看所有产品

创建并部署 Next.js 应用指南

什么是 Next.js 框架？

React（默认）与 Next.js 的区别

如何创建 Next.js 应用

第 1 步：启动项目

第 2 步：定义或修改这些项目文件

第 3 步：确保新数据已就绪

第 4 步：将计算交还给服务器端

第 5 步：立即向用户展示新代码

创建 Next.js 应用时的关键考虑事项

客户端路由

环境变量

后端 API 通信

如何在 Cloud Run 上部署 Next.js 应用

第 1 步：确认应用就绪

第 2 步：执行 next build；创建 Docker 容器映像

第 3 步：让云为您所用，并据此完成最终发布

如何在 Firebase 上部署 Next.js 应用

第 1 步：准备好面向公网的服务器设置

第 2 步：设置并安装 (CMD)

第 3 步：连接并配置项目

利用 Google Cloud 解决业务难题

测试最佳实践

相关产品和解决方案

更进一步

不知从何入手，需要一点帮助？

与值得信赖的合作伙伴携手

继续浏览