跳到主要内容

Next

Next.js 是一个基于 React 的现代前端开发框架，由 Vercel 团队开发和维护，提供了开箱即用的功能，如服务器端渲染（SSR）、静态站点生成（SSG）、路由、API 路由等，帮助开发者快速构建高性能的 Web 应用。

本指南介绍如何通过多种方式在腾讯云托管上部署示例 Next.js 应用程序:

创建 Next.js​

Note: 如果已有 Next.js 应用，可以跳过此步骤。

创建 Next.js 应用，需要安装 Node.js 18.18 及以上版本。

在 Terminal 运行如下命令，使用官方 cli 创建 Next.js 应用。

建议在常用的文件夹中运行命令，以避免创建完成后找不到项目文件夹

npx create-next-app@latest

本地运行 Next.js​

使用 VS Code 等 IDE 打开 cli 创建的项目，运行 npm install 安装所有依赖项。

运行以下命令启动应用程序:

npm run dev

启动浏览器并导航至 http://localhost:3000 以查看该应用程序。

配置 Dockerfile​

使用云托管部署项目需要添加 docker 配置文件。

在项目根目录下创建一个名称为 Dockerfile 的新文件,内容如下:

# 使用 Node.js 镜像作为构建环境
FROM node:22-alpine AS builder

# 设置工作目录
WORKDIR /app

# 复制包管理文件以利用 Docker 缓存层
COPY package.json package-lock.json* ./

# 安装依赖（包括 devDependencies，因为需要构建）
RUN npm install

# 复制项目文件
COPY . .

# 构建应用
RUN npm run build

# 使用更小的基础镜像来运行应用
FROM node:22-alpine AS runner

# 设置工作目录
WORKDIR /app

# 从构建阶段复制构建输出和依赖，减小镜像体积
COPY --from=builder /app/.next ./.next
COPY --from=builder /app/node_modules ./node_modules
COPY --from=builder /app/package.json ./package.json
COPY --from=builder /app/public ./public

# 环境变量
ENV NODE_ENV=production

# 使用非 root 用户端口
EXPOSE 3000

# 启动命令
CMD ["npm", "start"]

通过上述更改，你的 Next.js 程序即可部署到腾讯云托管了!

部署到云托管​

云托管提供了多种部署方式来部署你的应用：

控制台部署​

打开腾讯云托管, 点击 通过本地代码部署 -> 填写服务名称 -> 部署方式选择 上传代码包 -> 代码包类型选择 文件夹 -> 选择项目目录进行上传 -> 端口填写 3000 -> 点击创建并等待创建完成即可。

通过 cli 部署​

如果您已经安装了 CloudBase CLI，可以在项目目录下使用以下命令将应用部署到 CloudBase 云托管：

tcb cloudrun deploy -p 3000

输入环境和服务名称后，CLI 会自动打包应用并部署到云托管。

除了手动部署外，你也可以一键安装上述应用：

一键从模版部署​

一键从 GitHub 部署​