Tencent Cloud Next.js Serverless Component


2511.0.52 years ago2 years agoMinified + gzip package size for @serverless/tencent-nextjs in KB


Serverless Nextjs Tencent Cloud


Tencent Next.js Serverless Component

npm NPM downloads

简体中文 | English


Next.js Serverless Component for Tencent Cloud.


  1. Prepare
  2. Install
  3. Create
  4. Configure
  5. Deploy
  6. Remove

0. Prepare

Init Next.js Project

$ npm init next-app

Add express dependency:

$ npm i express --save

Notice: using express for server of next.js.

1. Install

Install the Serverless Framework globally:

$ npm install -g serverless

2. Create

In project root, create the following simple boilerplate:

$ touch serverless.yml
$ touch .env           # your Tencent api keys

Add the access keys of a Tencent CAM Role with AdministratorAccess in the .env file, using this format:

# .env
  • If you don't have a Tencent Cloud account, you could sign up first.

3. Configure

# serverless.yml
  component: '@serverless/tencent-nextjs'
    functionName: nextjs-function
    region: ap-guangzhou
    runtime: Nodejs8.9
    code: ./
      timeout: 30
      memorySize: 128
        RUN_ENV: test
        - http
        - https
      environment: release

4. Deploy

4.1 Build static assets

$ npm run build

4.2 Deploy to cloud

$ sls --debug

  DEBUG ─ Resolving the template's static variables.
  DEBUG ─ Collecting components from the template.
  DEBUG ─ Downloading any NPM components found in the template.
  DEBUG ─ Analyzing the template's components dependencies.
  DEBUG ─ Creating the template's components graph.
  DEBUG ─ Syncing template state.
  DEBUG ─ Executing the template's components graph.
  DEBUG ─ Generating serverless handler...
  DEBUG ─ Generated serverless handler successfully.
  DEBUG ─ Compressing function nextjs-function file to /Users/yugasun/Desktop/Develop/serverless/tencent-nextjs/example/.serverless/nextjs-function.zip.
  DEBUG ─ Compressed function nextjs-function file successful
  DEBUG ─ Uploading service package to cos[sls-cloudfunction-ap-guangzhou-code]. sls-cloudfunction-default-nextjs-function-1584351212.zip
  DEBUG ─ Uploaded package successful /Users/yugasun/Desktop/Develop/serverless/tencent-nextjs/example/.serverless/nextjs-function.zip
  DEBUG ─ Creating function nextjs-function
  nextjs-function [████████████████████████████████████████] 100% | ETA: 0s | Speed: 1039.75k/s
  DEBUG ─ Created function nextjs-function successful
  DEBUG ─ Setting tags for function nextjs-function
  DEBUG ─ Creating trigger for function nextjs-function
  DEBUG ─ Deployed function nextjs-function successful
  DEBUG ─ Starting API-Gateway deployment with name ap-guangzhou-apigateway in the ap-guangzhou region
  DEBUG ─ Service with ID service-8knyukzy created.
  DEBUG ─ API with id api-eimhu8pa created.
  DEBUG ─ Deploying service with id service-8knyukzy.
  DEBUG ─ Deployment successful for the api named ap-guangzhou-apigateway in the ap-guangzhou region.

    functionName:        nextjs-function
        Name:        nextjs-function
        Runtime:     Nodejs8.9
        Handler:     serverless-handler.handler
        MemorySize:  128
        Timeout:     30
        Region:      ap-guangzhou
        Namespace:   default
        Description: This is a template function
    region:              ap-guangzhou
    apiGatewayServiceId: service-8knyukzy
    url:                 https://service-8knyukzy-1251556596.gz.apigw.tencentcs.com/release/
    cns:                 (empty array)

  33s › NextjsFunc › done

Notice: sls is short for serverless command.


5. Remove

$ sls remove --debug

  DEBUG ─ Flushing template state and removing all components.
  DEBUG ─ Removed function nextjs-function successful
  DEBUG ─ Removing any previously deployed API. api-eimhu8pa
  DEBUG ─ Removing any previously deployed service. service-8knyukzy

  7s › NextjsFunc › done

More Components

Checkout the Serverless Components repo for more information.

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.