Next

Next.js is a modern front-end development framework based on React, developed and maintained by the Vercel team, providing out-of-the-box features such as server-side rendering (SSR), static site generation (SSG), routing, API routes, etc., helping developers quickly build high-performance Web applications.

This guide describes how to deploy the sample Next.js application on CloudBase through multiple approaches:

Creating Next.js

Note: If you already have a Next.js app, you can skip this step.

To create a Next.js application, you need to install Node.js version 18.18 or above.

Run the following command in the Terminal to create a Next.js application using the official cli.

It is recommended to run the command in a commonly used folder to prevent being unable to locate the project folder after creation.

npx create-next-app@latest

Running Next.js Locally

Open the project created by the cli in an IDE such as VS Code, and run npm install to install all dependencies.

Run the following command to start the application:

npm run dev

Start the browser and navigate to http://localhost:3000 to view the application.

Configuring Dockerfile

To deploy a project using CloudBase, you need to add a Dockerfile configuration file.

Create a new file named Dockerfile in the project root directory with the following content:

# Using Node.js Image as Build Environment
FROM node:22-alpine AS builder

# Set Working Directory
WORKDIR /app

# Copying package management files to leverage Docker cache layers
COPY package.json package-lock.json* ./

# Install dependencies (including devDependencies, as they are required for the build)
RUN npm install

# Copy project files
COPY . .

# Building the Application
RUN npm run build

# Use A Smaller Base Image To Run The Application
FROM node:22-alpine AS runner

# Set Working Directory
WORKDIR /app

# Copy build output and dependencies from the build stage to reduce image size
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

# Environment Variables
ENV NODE_ENV=production

# Use Non-Root User Ports
EXPOSE 3000

# Execute the startup command.
CMD ["npm", "start"]

With the above changes, your Next.js application can be deployed to Tencent Cloud Hosting!

Deployment to Cloud Hosting

Cloud Hosting provides multiple deployment methods to deploy your application:

Deploy via Console

Open Tencent Cloud Hosting, click Deploy via local code -> enter the service name -> select Upload code package for the deployment method -> choose Folder for the code package type -> select the project directory for upload -> enter 3000 for the port -> click Create and wait for the creation to complete.

Deploying via cli

If you have installed CloudBase CLI, you can use the following command in the project directory to deploy the application to CloudBase Cloud Hosting:

tcb cloudrun deploy -p 3000

After entering the environment and service names, the CLI will automatically package the application and deploy it to Cloud Hosting.

Besides manual deployment, you can also install the aforementioned applications with one click:

One-Click Deployment from Template

One-Click Deployment from GitHub