How to Deploy Next.js to China?
Tags: nextjs, china, react, vercel
Published: 2021-02-24 04:15:44

---
canonical_url: https://www.21cloudbox.com/solutions/how-to-deploy-nextjs-project-in-production-server.html
---
# What is Next.js?

Next.js is a [React](https://launch-in-china.21yunbox.com/solutions/how-to-deploy-reactjs-project-in-production-server.html) framework for production environments. Next.js provides you with all the functions required for the production environment and the best development experience, including static (SSG) and server-side fusion rendering (SSR), support for TypeScript, intelligent packaging, routing prefetching and other functions without any configuration.


[21YunBox](https://www.21yunbox.com/) provides a quick and easy Next.js deployment method. You can deploy on the 21YunBox using a **static site** or **Node Server**.

The difference between the two is that when deploying in the **static site** mode, the process is that the project will be built (packaged), and then the final generated static resources (HTML, CSS, JS, images, etc.) will be deployed to all parts of the country CDN node. When deploying with a **Node Server**, the process is to first build the project (package), deploy static resources to CDN nodes across the country, and then start the service into a state of waiting to be accessed, when there is a service request for access When the time, the server will process.

# Methods to deploy Next.js in China
### Use **static site** operating environment to deploy in **SSG** mode

1. Register as [21YunBox member](https://www.21yunbox.com/u/signup/)
2. Fork [Next.js exampleSSG](https://gitee.com/eryiyunbox-examples/hello-nextjs-static)
3. Choose the following configuration for deployment

## Steps to Deploy Static Site

| Environment      | `Static Site`                             |
| ---------------- | :------------------------------------------: |
| Build Command    | **`yarn && yarn build && yarn next export`** |
| Release Directory | **`out`** |

You can also refer to the video below for a step by step example: [Step by Step Example](https://www.bilibili.com/video/BV1na4y1W7m3) how to deploy Next.js to the server (SSG/static page) operation video

### Use **Node Server** Operating Environment to Deploy in **SSR** Mode

| Environment       | `Node 12.19`        |
| ----------------- | :-------------: |
| Build Command     | **`yarn && yarn build`** |
| Release Directory | **`yarn next start --port 10000`** |

If you are not sure what to do, you can refer to:
[Step by Step Example](https://www.bilibili.com/video/BV1kK4y1f79z) how to deploy Next.js to the server (SSR/backend)


# Why Choose 21YunBox?

> 21YunBox is a Cloud Service Platform based out of Beijing, China. We specialize in modern web hosting and automation solutions. This enables you to set up websites instantly.  

> **Have questions about hosting and deploying in China? [Talk to an Expert today!](https://www.21cloudbox.com/enterprise/contact/)** 

To learn about the differences between 21YunBox and these foreign (outside of China) cloud service platforms, please refer to:

* [21YunBox vs Heroku](https://launch-in-china.21yunbox.com/solutions/how-to-speed-up-heroku-in-china.html)
* [21YunBox vs Netlify](https://launch-in-china.21yunbox.com/blog/solutions/alternatives-to-netlify-in-china.html)
* [21YunBox vs Vercel](https://launch-in-china.21yunbox.com/solutions/how-to-speed-up-vercel-in-china.html)
* [21YunBox vs Gatsby Cloud](https://launch-in-china.21yunbox.com/solutions/how-to-speed-up-gatsby-cloud-in-china.html)
* [21YunBox vs Github Pages](https://launch-in-china.21yunbox.com/solutions/how-to-speed-up-github-pages-in-china.html)
* [21YunBox vs Surge.sh](https://launch-in-china.21yunbox.com/solutions/how-to-speed-up-surgesh-in-china.html)
* [Compare in terms of function and price: 21YunBox vs Heroku, Netlify, Vercel](https://www.21yunbox.com/compare-others/)

<br>
*This article's content originated [here](https://launch-in-china.21yunbox.com/solutions/how-to-deploy-nextjs-project-in-production-server.html)*

*For additional detail and future modifications, refer the original post.*