{"id":13498582,"url":"https://github.com/serverless-components/tencent-nextjs","last_synced_at":"2025-04-04T15:32:07.217Z","repository":{"id":43279600,"uuid":"242032701","full_name":"serverless-components/tencent-nextjs","owner":"serverless-components","description":"Tencent Cloud Next.js Serverless Component","archived":false,"fork":false,"pushed_at":"2023-03-20T03:29:03.000Z","size":222,"stargazers_count":27,"open_issues_count":3,"forks_count":4,"subscribers_count":10,"default_branch":"master","last_synced_at":"2025-03-20T14:56:10.487Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/serverless-components.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2020-02-21T01:58:17.000Z","updated_at":"2023-02-13T17:52:29.000Z","dependencies_parsed_at":"2024-01-18T23:04:52.828Z","dependency_job_id":"3f9dd094-efd8-4353-9844-760bf7207bf0","html_url":"https://github.com/serverless-components/tencent-nextjs","commit_stats":{"total_commits":151,"total_committers":10,"mean_commits":15.1,"dds":0.2847682119205298,"last_synced_commit":"dd7c7da82e939b30684bac09e5977133cedd06fc"},"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/serverless-components%2Ftencent-nextjs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/serverless-components%2Ftencent-nextjs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/serverless-components%2Ftencent-nextjs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/serverless-components%2Ftencent-nextjs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/serverless-components","download_url":"https://codeload.github.com/serverless-components/tencent-nextjs/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247203002,"owners_count":20900890,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-31T21:00:37.178Z","updated_at":"2025-04-04T15:32:02.209Z","avatar_url":"https://github.com/serverless-components.png","language":"JavaScript","readme":"⚠️⚠️⚠️ 所有框架组件项目迁移到 [tencent-framework-components](https://github.com/serverless-components/tencent-framework-components).\n\n[![Serverless Nextjs Tencent Cloud](https://img.serverlesscloud.cn/2020224/1582553715762-next.js_%E9%95%BF.png)](http://serverless.com)\n\n\u0026nbsp;\n\n# 腾讯云 Next.js Serverless Component\n\n## 简介\n\n**腾讯云[Next.js](https://github.com/zeit/next.js) 组件** - 通过使用[**Tencent Serverless Framework**](https://github.com/serverless/components/tree/cloud) , 基于云上 Serverless 服务（如 API 网关、云函数等），实现“0”配置，便捷开发，极速部署采用 Next.js 框架的网页应用，Next.js 组件支持丰富的配置扩展，提供了目前便捷实用，开发成本低的网页应用项目的开发/托管能力。\n\n特性介绍：\n\n- [x] **按需付费** - 按照请求的使用量进行收费，没有请求时无需付费\n- [x] **\"0\"配置** - 只需要关心项目代码，之后部署即可，Serverless Framework 会搞定所有配置。\n- [x] **极速部署** - 部署速度快，仅需几秒，部署你的整个应用。\n- [x] **实时日志** - 通过实时日志的输出查看业务状态，便于直接在云端开发应用。\n- [x] **云端调试** - 可在云端直接进行项目调试，从而避免本地环境的差异。\n- [x] **便捷协作** - 通过云端控制台的状态信息和部署日志，方便进行多人协作开发。\n\n## 快速开始\n\n0. [**准备**](#0-准备)\n1. [**安装**](#1-安装)\n1. [**配置**](#2-配置)\n1. [**部署**](#3-部署)\n1. [**开发调试**](#4-开发调试)\n1. [**查看状态**](#5-查看部署状态)\n1. [**移除**](#6-移除)\n\n更多资源：\n\n- [**账号配置**](#账号配置)\n- [**架构说明**](#架构说明)\n- [**更多组件**](#更多组件)\n- [**FAQ**](#FAQ)\n\n### 1. 安装\n\n通过 npm 全局安装 [serverless cli](https://github.com/serverless/serverless)\n\n```bash\n$ npm install -g serverless\n```\n\n### 2. 创建\n\n通过如下命令和模板链接，快速创建一个 Next.js 应用：\n\n```bash\n$ serverless init nextjs-starter --name example\n$ cd example\n```\n\n### 3. 部署\n\n在 `serverless.yml` 文件所在的项目根目录，运行以下指令，将会弹出二维码，直接扫码授权进行部署：\n\n```\nserverless deploy\n```\n\n\u003e **说明**：如果鉴权失败，请参考 [权限配置](https://cloud.tencent.com/document/product/1154/43006) 进行授权。\n\n### 4. 配置\n\nnextjs 组件支持 0 配置部署，也就是可以直接通过配置文件中的默认值进行部署。但你依然可以修改更多可选配置来进一步开发该 nextjs 项目。\n\n以下是 nextjs 组件的 `serverless.yml`配置示例：\n\n```yml\n# serverless.yml\ncomponent: nextjs # (必填) 组件名称，此处为nextjs\nname: nextjsDemo # (必填) 实例名称\norg: orgDemo # (可选) 用于记录组织信息，默认值为您的腾讯云账户 appid\napp: appDemo # (可选) 该 next.js 应用名称\nstage: dev # (可选) 用于区分环境信息，默认值是 dev\n\ninputs:\n  src:\n    src: ./\n    exclude:\n      - .env\n  functionName: nextjsDemo\n  region: ap-guangzhou\n  runtime: Nodejs10.15\n  apigatewayConf:\n    protocols:\n      - http\n      - https\n    environment: release\n```\n\n- 点此查看[更多配置及说明](/docs/configure.md)\n\n### 5. 开发调试\n\n部署了 Next.js 应用后，可以通过开发调试能力对该项目进行二次开发，从而开发一个生产应用。在本地修改和更新代码后，不需要每次都运行 `serverless deploy` 命令来反复部署。你可以直接通过 `serverless dev` 命令对本地代码的改动进行检测和自动上传。\n\n可以通过在 `serverless.yml`文件所在的目录下运行 `serverless dev` 命令开启开发调试能力。\n\n`serverless dev` 同时支持实时输出云端日志，每次部署完毕后，对项目进行访问，即可在命令行中实时输出调用日志，便于查看业务情况和排障。\n\n### 6. 查看部署状态\n\n在`serverless.yml`文件所在的目录下，通过如下命令查看部署状态：\n\n```\n$ serverless info\n```\n\n### 6. 移除\n\n在`serverless.yml`文件所在的目录下，通过以下命令移除部署通过以下命令移除部署的 API 网关，移除后该组件会对应删除云上部署时所创建的所有相关资源。\n\n```bash\n$ serverless remove\n```\n\n和部署类似，支持通过 `serverless remove --debug` 命令查看移除过程中的实时日志信息。\n\n### 账号配置\n\n当前默认支持 CLI 扫描二维码登录，如您希望配置持久的环境变量/秘钥信息，也可以本地创建 `.env` 文件\n\n```bash\n$ touch .env # 腾讯云的配置信息\n```\n\n在 `.env` 文件中配置腾讯云的 SecretId 和 SecretKey 信息并保存\n\n如果没有腾讯云账号，可以在此 [注册新账号](https://cloud.tencent.com/register)。\n\n如果已有腾讯云账号，可以在 [API 密钥管理](https://console.cloud.tencent.com/cam/capi) 中获取 `SecretId` 和`SecretKey`.\n\n```text\n# .env\nTENCENT_SECRET_ID=123\nTENCENT_SECRET_KEY=123\n```\n\n\u003e 注意：海外 ip 登录时，需要在`.env`文件中添加`SERVERLESS_PLATFORM_VENDOR=tencent` ，使 serverless 默认使用 tencent 组件\n\n## 架构说明\n\nNext.js 组件将在腾讯云账户中使用到如下 Serverless 服务：\n\n- [x] **API 网关** - API 网关将会接收外部请求并且转发到 SCF 云函数中。\n- [x] **SCF 云函数** - 云函数将承载 Next.js 应用。\n- [x] **CAM 访问控制** - 该组件会创建默认 CAM 角色用于授权访问关联资源。\n- [x] **COS 对象存储** - 为确保上传速度和质量，云函数压缩并上传代码时，会默认将代码包存储在特定命名的 COS 桶中\n- [x] **SSL 证书服务** - 如果你在 yaml 文件中配置了 `apigatewayConf.customDomains` 字段，需要做自定义域名绑定并开启 HTTPS 时，也会用到证书管理服务和域名服务。Serverless Framework 会根据已经备案的域名自动申请并配置 SSL 证书。\n\n## 更多组件\n\n可以在 [Serverless Components](https://github.com/serverless/components) 仓库中查询更多组件的信息。\n\n## 项目迁移\n\n如果项目使用了自定义 Node.js 服务，比如 express 或者 koa，你需要做如下改造工作。\n\n### 自定义 express 服务\n\n如果你的 Next.js 项目本身运行就是基于 `express` 自定义服务的，那么你需要在项目中自定义入口文件 `sls.js`，需要参考你的服务启动文件进行修改，以下是一个模板文件：\n\n```js\nconst express = require('express')\nconst next = require('next')\n\n// not report route for custom monitor\nconst noReportRoutes = ['/_next', '/static', '/favicon.ico']\n\nasync function createServer() {\n  const app = next({ dev: false })\n  const handle = app.getRequestHandler()\n\n  await app.prepare()\n\n  const server = express()\n  server.all('*', (req, res) =\u003e {\n    noReportRoutes.forEach((route) =\u003e {\n      if (req.path.indexOf(route) !== -1) {\n        req.__SLS_NO_REPORT__ = true\n      }\n    })\n    return handle(req, res)\n  })\n\n  // define binary type for response\n  // if includes, will return base64 encoded, very useful for images\n  server.binaryTypes = ['*/*']\n\n  return server\n}\n\nmodule.exports = createServer\n```\n\n### 自定义 koa 服务\n\n如果你的项目使用的是 Koa 作为 Node.js 服务，需要在项目中自定义入口文件 `sls.js`，需要参考你的服务启动文件进行修改，以下是一个模板文件：\n\n```js\nconst Koa = require('koa')\nconst next = require('next')\n\nasync function createServer() {\n  const app = next({ dev: false })\n  const handle = app.getRequestHandler()\n\n  const server = new Koa()\n  server.use((ctx) =\u003e {\n    ctx.status = 200\n    ctx.respond = false\n    ctx.req.ctx = ctx\n\n    return handle(ctx.req, ctx.res)\n  })\n\n  // define binary type for response\n  // if includes, will return base64 encoded, very useful for images\n  server.binaryTypes = ['*/*']\n\n  return server\n}\n\nmodule.exports = createServer\n```\n\n## 自定义监控\n\n当在部署 Next.js 应用时，如果 `serverless.yml` 中未指定 `role`，默认会尝试绑定 `QCS_SCFExcuteRole`，并且开启自定义监控，帮助用户收集应用监控指标。对于为自定义入口文件的项目，会默认上报除含有 `/_next`、`/static` 和 `/favicon.ico` 的路由。如果你想自定义上报自己的路由性能，那么可以自定义 `sls.js` 入口文件，对于无需上报的路由，在 express 服务的 `req` 对象上添加 `__SLS_NO_REPORT__` 属性值为 `true` 即可。比如：\n\n```js\nserver.get('/no-report', (req, res) =\u003e {\n  req.__SLS_NO_REPORT__ = true\n  return handle(req, res)\n})\n```\n\n那么用户在访问 `GET /no-report` 路由时，就不会上报自定义监控指标。\n\n## 文件上传\n\n[文件上传教程](https://github.com/serverless-components/tencent-nextjs/tree/master/docs/upload.md)\n\n## License\n\nMIT License\n\nCopyright (c) 2020 Tencent Cloud, Inc.\n","funding_links":[],"categories":["组件"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fserverless-components%2Ftencent-nextjs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fserverless-components%2Ftencent-nextjs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fserverless-components%2Ftencent-nextjs/lists"}