Tencent Cloud Next.js component uses Tencent Serverless Framework to implement "zero" configuration, convenient development, and rapid deployment of your webpage application in the Next.js framework based on Tencent Cloud Serverless services (API Gateway, SCF, etc.). The Next.js component supports a rich set of configuration extensions and provides easy-to-use, practical, and cost-effective development/hosting capabilities for webpage application projects.
$ mkdir serverless-next && cd serverless-next $ npm init next-app src
You are recommended to use Node.js 10.0 or above; otherwise, Component v2 may report errors during deployment.
Use npm to install Serverless CLI globally:
$ npm install -g serverless
serverless.yml file in the project root directory (which is
serverless-next in this example):
$ touch serverless.yml
serverless.yml as follows:
# serverless.yml component: nextjs # Component name, which is required. `nextjs` is used in this example name: nextjsDemo # Instance name, which is required org: orgDemo # Organization information, which is optional. The default value is the `appid` of your Tencent Cloud account app: appDemo # Next.js application name, which is optional stage: dev # Information for identifying environment, which is optional. The default value is `dev` inputs: src: src: ./src exclude: - .env functionName: nextjsDemo region: ap-guangzhou runtime: Nodejs10.15 apigatewayConf: protocols: - http - https environment: release
Enter the Next.js project directory and construct static resources:
$ cd src && npm run build
Go back to the project root directory where the
serverless.yml file is and run the following command for deployment:
$ sls deploy
If you want to view more information on the deployment process, you can run the
sls deploy --debugcommand to view the real-time log information during the deployment process (
slsis an abbreviation for the
After the Next.js application is deployed, the project can be further developed through the debugging feature to create an application for the production environment. After modifying and updating the code locally, you don't need to run the
serverless deploy command every time for repeated deployment. Instead, you can run the
serverless dev command to directly detect and automatically upload changes in the local code.
You can enable debugging by running the
serverless dev command in the directory where the
serverless.yml file is located.
serverless dev also supports real-time outputting of cloud logs. After each deployment, you can access the project to output invocation logs in real time on the command line, which makes it easy for you to view business conditions and troubleshoot issues.
In the directory where the
serverless.yml file is located, run the following command to check the deployment status:
In the directory where the
serverless.yml file is located, run the following command to remove the deployed API gateway. After removal, this component will delete all related resources created during deployment in the cloud.
$ sls remove
Similar to the deployment process, you can run the
sls remove --debug command to view real-time log information during the removal process (
sls is an abbreviation for the
Currently, you can scan a QR code to log in to the CLI by default. If you want to configure persistent environment variables/key information, you can also create a local
$ touch .env # Tencent Cloud configuration information
Configure Tencent Cloud's
SecretKey information in the
.env file and save it:
# .env TENCENT_SECRET_ID=123 TENCENT_SECRET_KEY=123
The Next.js component will use the following Serverless services in your Tencent Cloud account:
domainfield in the YAML file, you will need to bind a custom domain name and enable HTTPS; therefore, you will also need to use the certificate management service and domain name service. Serverless Framework will automatically apply for and configure an SSL certificate based on the domain name with ICP filing (required for Mainland China service).
You can view more component information in the repository of Serverless Components.
Why is an entry file no longer needed?
In the previous version, to use this component, you need to add an
sls.js file in the project root directory. In the current version, this is taken care of by the component, so you do not need to deal with it separately. For more information, please see the GitHub documentation.