This topic describes how to deploy a Next.js application to Function Compute. Function Compute provides a method different from traditional deployment methods. You can deploy a traditional Next.js application to Function Compute and use the application for production without performing operations such as purchasing a server. The deployed Next.js application can use the auto scaling, pay-as-you-go, and O&M-free features of Function Compute.

Prerequisites

The following operations are complete:
Notice

The content about how to use Funcraft to migrate an application from a traditional framework is no longer maintained. We recommend that you use Serverless Devs to migrate relevant frameworks to Function Compute.

For more information about how to migrate Function Compute-related resources from Funcraft to Serverless Devs, see Migrate resources from Funcraft to Serverless Devs.

For more information about how to use Serverless Devs to migrate an application from a web framework, see Use Serverless Devs to migrate web frameworks.

We apologize for any inconvenience caused.

Background information

Next.js is a React framework with server-side rendering. The framework is integrated with webpack, Babel, and Express. You can build server-side rendered (SSR) React applications by using only Next.js, React, and ReactDOM, and do not need to be concerned about routing. Next.js is highly integrated. This facilitates code splitting, redirection, hot updates, server-side rendering, and frontend rendering.

Procedure

  1. Create a Next.js project in the specified directory.
    1. Run the following command:
      npm init next-app                    
      Note If a Next.js project already exists, skip this step.
    2. Customize the project name during command output and press the ENTER key. In this example, the project name is nextjs.
      Sample command output:
      npx: installed 1 in 4.593s
      √ What is your project named? ... nextjs
      Creating a new Next.js app in C:\Users\test\Desktop\ggg\nextjs.
      
      Using npm.
      
      Installing dependencies:
      - react
      - react-dom
      - next
      
      npm notice created a lockfile as package-lock.json. You should commit this file.
      npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@~2.3.1 (node_modules\chokidar\node_modules\fsevents):
      npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
      
      + next@10.2.2
      + react-dom@17.0.2
      + react@17.0.2
      added 269 packages from 225 contributors and audited 270 packages in 83.034s
      
      45 packages are looking for funding
        run `npm fund` for details
      
      found 0 vulnerabilities
      
      
      Success! Created nextjs at C:\Users\test\Desktop\ggg\nextjs
      Inside that directory, you can run several commands:
      
        npm run dev
          Starts the development server.
      
        npm run build
          Builds the app for production.
      
        npm start
          Runs the built app in production mode.
      
      We suggest that you begin by typing:
      
        cd nextjs
        npm run dev
  2. Run the following command to open the created sample project or an existing project:
    cd nextjs
  3. Run the on-premises project.
    npm run dev           
    Sample command output:
    > nextjs@0.1.0 dev C:\Users\test\Desktop\ggg\nextjs
    > next dev
    
    ready - started server on 0.0.0.0:3000, url: http://localhost:3000
    info  - Using webpack 5. Reason: no next.config.js https://nextjs.org/docs/messages/webpack5
    event - compiled successfully
    Enter http://localhost:3000 in the expected output in your browser. The following result is returned:pre-view
  4. Run the following command to compile the Next.js project:
    npm run build            
    Expected output:
    > nextjs@0.1.0 build C:\Users\test\Desktop\ggg\nextjs
    > next build
    
    info  - Using webpack 5. Reason: no next.config.js https://nextjs.org/docs/messages/webpack5
    info  - Checking validity of types
    info  - Creating an optimized production build
    info  - Compiled successfully
    info  - Collecting page data
    info  - Generating static pages (3/3)
    info  - Finalizing page optimization
    
    Page                                Size     First Load JS
    ┌ ○ /                               5.86 KB        68.9 KB
    ├   └ css/115bd9a6a9ada811c579.css  665 B
    ├   /_app                           0 B              63 KB
    ├ ○ /404                            3.06 KB        66.1 KB
    └ λ /api/hello                      0 B              63 KB
    + First Load JS shared by all       63 KB
      ├ chunks/framework.64eb71.js      42 KB
      ├ chunks/main.899697.js           19.4 KB
      ├ chunks/pages/_app.968165.js     555 B
      ├ chunks/webpack.189c53.js        994 B
      └ css/fb7e07ce64500530d3fc.css    194 B
    
    λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)
    ○  (Static)  automatically rendered as static HTML (uses no initial props)
    ●  (SSG)     automatically generated as static HTML + JSON (uses getStaticProps)
       (ISR)     incremental static regeneration (uses revalidate in getStaticProps)
  5. Run the following command to deploy the application to Function Compute:
    fun deploy -y

    After the application is deployed, you can check logs to find the temporary domain name that is generated by Function Compute. You can use the temporary domain name to access the deployed application.

    Note The temporary domain name is used only for demonstration and development purposes. It is valid for a limited period of time. You must use a domain name that has obtained an Internet Content Provider (ICP) filing from Alibaba Cloud for production. For more information, see Configure a custom domain name.