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

Before you begin, make sure that the following operations are complete:

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, which facilitates code splitting, redirection, hot updates, server-side rendering, and frontend rendering.

Procedure

  1. Create a Next.js application in the directory that you require. If you have created a Next.js application, skip this step.
    1. Run the following command:
      npm init next-app                    
    2. Customize the application name during command output and press Enter. In this example, nextjs is used.
      Expected 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 application or an existing application:
    cd nextjs
  3. Run the following command to run the on-premises application:
    npm run dev           
    Expected 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 application:
    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 the logs to find the temporary domain name that Function Compute generated. You can use this 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. To use an application in a production environment, you must bind the application to a domain name that has obtained an Internet Content Provider (ICP) filing from Alibaba Cloud. For more information, see Bind a custom domain name.