Deploy Your Next.js Project to EdgeOne Pages in 5 Minutes: A Complete Guide

Do you know that EdgeOne Pages deployment provides Next.js full-stack support. The following Next.js features are currently supported:

To deploy your Next.js full-stack project with EdgeOne Pages, we offer three deployment options.

Three Ways to Get Started

Path A: Deploy the EdgeOne Pages Next.js Template

Deploying from EdgeOne Pages templates is the fastest way to build and deploy a Next.js project from scratch.

You can click "Create Project" in the Console and select "Start from template". Here you can choose the basic template of Next.js or various theme templates based on Next.js according to your needs.

Pages clones the template to your new private repository and builds it. Once the build completes, you can clone the code from the repository for development.

Path B: Import Next.js Project from Git Repository

EdgeOne Pages offers first-time users clear step-by-step guidance to help them complete Git repository authentication and deployment.

First, visit EdgeOne Pages Console in your browser. 

Next, select your online repository and follow the guided steps to complete authentication:

After Git authentication, select your code repository to start the deployment. You can optionally configure environment variables at this stage.

Once the build and deployment are complete, you can review and modify the build settings in the "Project Settings" panel.

Path C: Direct-Upload Workflow with EdgeOne CLI

You can also deploy without relying on Git repositories. This means you can deploy and update your project directly from your IDE, quickly and easily.

EdgeOne provides a feature-rich CLI that allows you to interact with your account, and you can deploy directly through the EdgeOne CLI The specific steps are as follows:

1. Creating a Next.js Project

First, create your Next.js project and navigate into the project directory. For detailed instructions, see the Next.js documentation.

npx create-next-app@latest

cd <project>

2. Initial Setup

If you don’t already have it, please install EdgeOne CLI globally:

npm install -g edgeone

If this is your first time using EdgeOne CLI in the project, please run "edgeone pages init" first. 

edgeone pages init          # choose “Global” region

After execution, you will be prompted to log in and asked whether to create "Edge Functions" and "Node Functions". These are the edge functions and centralized Node functions supported in EdgeOne Pages full-stack. You can implement your backend functionality here. For more information, please refer to the relevant tutorials.

If this is not your first time using the CLI in the project, you can log in directly.

edgeone login          # choose “Global” region

3. Build & Deploy

We've integrated support for most popular frameworks. Executing "edgeone pages deploy -n <name>" will automatically handle the build and deployment process. 

For initial deployment, run the link command. When prompted, enter <projectName>. EdgeOne Pages will automatically deploy your current project.

edgeone pages link

Alternatively, you can link to an existing project using "link <projectName>", then deploy with the deploy command. EdgeOne Pages will update your live project.

edgeone pages link <projectName>

edgeone pages deploy 

For EdgeOne CLI detailed instructions, please refer to the tutorial.

Local Development and Debugging

No matter how you create your project, you can use EdgeOne CLI to quickly and conveniently debug backend services in your Next.js project (including edge-functions and node-functions). 

The CLI integrates debugging functionality for locally debugging backend services and edge functions. Run "edgeone pages dev" and the CLI will map both frontend and backend services to port 8088, making it easy to debug your project.

With the CLI-provided development environment, developers can debug both centralized Node services and edge services directly via "localhost:8088/<function-path>".

Conclusion

Regardless of which deployment method you use above, you now have a Next.js application running on EdgeOne Pages—globally distributed, auto-HTTPS-enabled, and ready to scale from zero to millions of hits without touching a server. 

From here, iterate fearlessly: branch previews keep experiments safe, instant rollbacks undo mistakes in seconds, personalized magic anywhere you need it. Push, preview, promote—then go grab a coffee while the system does the heavy lifting.

Related Documentation

• Next.js Documentation
• EdgeOne CLI User Guide
• Node-functions and Edge-functions Tutorial
• Next.js Full-Stack Template Repository