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:

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.
    s init devsapp/start-next -d start-next
    The -d parameter specifies the project name. In this example, the project name is start-next.
    Note Skip this step if the item exists.
    Sample command output:
     Serverless Awesome: https://github.com/Serverless-Devs/package-awesome
    
     devsapp!start-next@0.0.11.zip file decompression completed
     Do you want to install dependencies? No
     please select credential alias default
    
         _   _           _     _
        | \ | |         | |   (_)
        |  \| | _____  _| |_   _ ___
        | . ` |/ _ \ \/ / __| | / __|
        | |\  |  __/>  <| |_ _| \__ \
        \_| \_/\___/_/\_\\__(_) |___/
                             _/ |
                            |__/
    
    
        Welcome to the start-next application
         This application requires to open these services:
             FC : https://fc.console.aliyun.com/
             ACR: https://cr.console.aliyun.com/
         This application can help you quickly deploy the Next project:
             Full yaml configuration: https://github.com/devsapp/next#%E5%AE%8C%E6%95%B4yaml
             Next development docs  : https://www.nextjs.cn/docs/getting-started
         This application homepage: https://github.com/devsapp/start-next
    
    
     Thanks for using Serverless-Devs
     You could [cd /test/start-next] and enjoy your serverless journey!
    ️ If you need help for this example, you can use [s -h] after you enter folder.
     Document Star: https://github.com/Serverless-Devs/Serverless-Devs
  2. Run the following command to go to the project directory:
    cd start-next
  3. Run the following command to deploy the project:
    s deploy
    Sample command output:
    [2021-08-19T20:45:12.397] [INFO ] [S-CLI] - Start ...
    [2021-08-19T20:45:12.406] [INFO ] [S-CLI] - Start the pre-action
    [2021-08-19T20:45:12.406] [INFO ] [S-CLI] - Action: npm install --production && npm run build
    npm WARN deprecated querystring@0.2.1: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
    npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
    npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
    npm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
    npm WARN deprecated querystring@0.2.0: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
    npm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
    npm notice created a lockfile as package-lock.json. You should commit this file.
    npm WARN sass-loader@8.0.2 requires a peer of node-sass@^4.0.0 but none is installed. You must install peer dependencies yourself.
    npm WARN sass-loader@8.0.2 requires a peer of sass@^1.3.0 but none is installed. You must install peer dependencies yourself.
    npm WARN sass-loader@8.0.2 requires a peer of fibers@>= 3.1.0 but none is installed. You must install peer dependencies yourself.
    npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules/watchpack-chokidar2/node_modules/fsevents):
    npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
    npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.3.2 (node_modules/fsevents):
    npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
    
    added 648 packages from 264 contributors in 13.273s
    
    24 packages are looking for funding
      run `npm fund` for details
    
    
    > nextjs@0.1.0 build /test/next
    > next build
    
    Browserslist: caniuse-lite is outdated. Please run next command `yarn upgrade`
    Attention: Next.js now collects completely anonymous telemetry regarding usage.
    This information is used to shape Next.js' roadmap and prioritize features.
    You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
    https://nextjs.org/telemetry
    
    Creating an optimized production build
    
    Compiled successfully.
    
    Automatically optimizing pages
    
    Page                                                           Size     First Load JS
    ┌ O /                                                          7.85 KB          66 KB
    └ O /404                                                       3.14 KB        61.2 KB
    + First Load JS shared by all                                  58.1 KB
      ├ static/pages/_app.js                                       964 bytes
      ├ chunks/eed867e9744a00396030409be59f28a8a396bd67.5b8a03.js  10.4 KB
      ├ chunks/framework.0f140d.js                                 40 KB
      ├ runtime/main.5d5400.js                                     6.01 KB
      └ runtime/webpack.b65cab.js                                  746 bytes
    
      (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)
    
    [2021-08-19T20:45:35.633] [INFO ] [S-CLI] - End the pre-action
      devsapp!next@0.0.8.zip file decompression completed
     Using web framework type: nas, If you want to deploy with container, you can [s cli fc-default set web-framework container] to switch.
    [2021-08-19T20:45:50.093] [WARN ] [NEXT] - The startup file is not found, create a [start.sh] as the startup file.
     Using web framework type: nas, If you want to deploy with container, you can [s cli fc-default set web-framework container] to switch.
    [2021-08-19T20:45:51.372] [INFO ] [WEB-FRAMEWORK] - The configuration of the domain name is not detected, and a temporary domain name is generated.
      End of request
      Deployed.
      End of request
    (node:27410) [DEP0005] DeprecationWarning: Buffer() is deprecated due to security and usability issues. Please use the Buffer.alloc(), Buffer.allocUnsafe(), or Buffer.from() methods instead.
    (Use `node --trace-deprecation ...` to show where the warning was created)
    [2021-08-19T20:45:58.511] [INFO ] [FC-DEPLOY] - Using region: cn-shenzhen
    [2021-08-19T20:45:58.512] [INFO ] [FC-DEPLOY] - Using access alias: default
    [2021-08-19T20:45:58.513] [INFO ] [FC-DEPLOY] - Using accessKeyID: 188077086902****
    [2021-08-19T20:45:58.513] [INFO ] [FC-DEPLOY] - Using accessKeySecret: ldHUiJLoGto****
     Using fc deploy type: sdk, If you want to deploy with pulumi, you can [s cli fc-default set deploy-type pulumi] to switch.
    [2021-08-19T20:45:59.871] [INFO ] [FC-DEPLOY] - Checking Service serverless-devs-next exists
    [2021-08-19T20:46:00.079] [INFO ] [FC-DEPLOY] - Setting role: fcDeployDefaultRole-serverless-devs-next
    [2021-08-19T20:46:00.549] [INFO ] [RAM] - Checking Role fcDeployDefaultRole-serverless-devs-next exists
    [2021-08-19T20:46:00.732] [INFO ] [RAM] - Updating role: fcDeployDefaultRole-serverless-devs-next
    [2021-08-19T20:46:00.830] [INFO ] [RAM] - Checking Plicy AliyunECSNetworkInterfaceManagementAccess exists
    [2021-08-19T20:46:00.904] [INFO ] [RAM] - Checking Plicy AliyunContainerRegistryReadOnlyAccess exists
    [2021-08-19T20:46:01.023] [INFO ] [FC-DEPLOY] - Using vpcConfig: auto: fc will try to generate related vpc resources automatically
    [2021-08-19T20:46:02.992] [INFO ] [VPC] - Getting vpc: fc-deploy-component-generated-vpc-cn-shenzhen
    [2021-08-19T20:46:03.119] [INFO ] [VPC] - Getting vswitch: fc-deploy-component-generated-vswitch-cn-shenzhen
    [2021-08-19T20:46:03.264] [INFO ] [VPC] - Getting securityGroup: fc-deploy-component-generated-securityGroup-cn-shenzhen
    [2021-08-19T20:46:03.449] [INFO ] [FC-DEPLOY] - Generated vpcConfig:
    securityGroupId: sg-wz92ctigpi221smc****
    vSwitchId: vsw-wz9qnuult4q5g4f7n****
    vpcId: vpc-wz9x9bzs0wtvjgt6n****
    
    [2021-08-19T20:46:03.449] [INFO ] [FC-DEPLOY] - Using nasConfig: auto: fc will try to generate related nas file system automatically
      upload done
    [2021-08-19T20:46:30.505] [INFO ] [FC-DEPLOY] - Generated nasConfig:
    groupId: 10003
    mountPoints:
      - fcDir: /mnt/auto
        nasDir: /serverless-devs-next
        serverAddr: example.com
    userId: 10003
    
    [2021-08-19T20:46:30.559] [INFO ] [FC-DEPLOY] - Checking Function next exists
    [2021-08-19T20:46:31.014] [INFO ] [FC-DEPLOY] - Checking Trigger serverless-devs-next exists
    [2021-08-19T20:46:31.526] [INFO ] [FC-DEPLOY] - Checking Trigger serverless-devs-next exists
    [2021-08-19T20:46:31.763] [INFO ] [FC-DEPLOY] - Creating service: serverless-devs-next
    [2021-08-19T20:46:31.764] [INFO ] [FC-DEPLOY] - Creating function: next
    [2021-08-19T20:46:31.764] [INFO ] [FC-DEPLOY] - Creating triggers: ["serverless-devs-next"]
      Make service serverless-devs-next success.
      Make function serverless-devs-next/next success.
      Make trigger serverless-devs-next/next/serverless-devs-next success.
    [2021-08-19T20:46:35.350] [INFO ] [FC-DEPLOY] - Checking Service serverless-devs-next exists
    [2021-08-19T20:46:35.962] [INFO ] [FC-DEPLOY] - Checking Function next exists
    [2021-08-19T20:46:36.399] [INFO ] [FC-DEPLOY] - Checking Trigger serverless-devs-next exists
    [2021-08-19T20:46:36.599] [INFO ] [FC-DEPLOY] - Creating custom domain: next.serverless-devs-next.188077086902****.cn-shenzhen.fc.devsapp.net
    [2021-08-19T20:46:38.270] [INFO ] [FC-DOMAIN] - Creating custom domain: next.serverless-devs-next.188077086902****.cn-shenzhen.fc.devsapp.net
    
    There is auto config in the service: serverless-devs-next
    [2021-08-19T20:46:38.398] [INFO ] [WEB-FRAMEWORK] - nas component get src is: .
      upload done
    Packing ...
    file /test/next/.s/zip is ignored.
    Package complete.
      Start uploading file: /mnt/2bfb748534-tpm20-cn-shenzhen/serverless-devs-next/next/next.zip
      File uploaded successfully: /mnt/2bfb748534-tpm20-cn-shenzhen/serverless-devs-next/next/next.zip
      upload done
    [2021-08-19T20:48:20.713] [INFO ] [FC-NAS] - unzipping file
    [2021-08-19T20:48:54.372] [INFO ] [FC-NAS] - unzip done
      Try container acceleration
    function-test:
      region: cn-shenzhen
      serviceName: serverless-devs-next
      functionName: next
      customDomains:
        - >-
          http://next.serverless-devs-next.188077086902****.cn-shenzhen.fc.devsapp.net

Result

After the project is deployed, you can view the temporary domain name generated by Function Compute in the execution output. The temporary domain name can be used to access the newly deployed application. For example, run the following command to access the application:

http://next.serverless-devs-next.188077086902****.cn-shenzhen.fc.devsapp.net
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.