云优cms文章采集(Next.js函数式React组件的应用构建期介绍)

　　云优cms文章采集(Next.js函数式React组件的应用构建期介绍)

　　首先打开项目下的./pages/index.js，发现页面导出了一个功能性的React组件。在Next.js中，在pages目录下，除了api文件夹和_app.js中的内容外，js文件导出的每个React组件都对应一个或一种页面，对应的由Next直接生成。 js路由，index.js导出的功能组件直接对应我们输入网站后的第一页，./pages中其他js文件的相对地址就是Next.js自动为它生成的路由。

　　在应用构建期间，Next.js 会执行每个页面的数据拉取逻辑，并根据 React 组件构建的 UI 呈现最终的 HTML 页面。接下来，我们要做的就是搭建主页的UI。并编写逻辑为主页拉取数据。

　　用户界面编写

　　接下来修改首页的UI：

　　如您所见，修改后的 Home 组件接受一个帖子作为参数。这个帖子是文章列表数据，我们在组件中渲染。

　　那么帖子是从哪里来的呢？在同一个js文件中，需要再导出一个getStaticProps函数。

　　这个函数返回的对象的props属性就是导出的函数组件使用的参数。因此，只需在 getStaticProps 函数中获取数据并返回即可。

　　拉取数据

　　首先安装用于拉取数据的SDK：

　　然后，我们创建env.js文件，填写云环境相关信息：

　　环境ID（env）在环境首页可以直接看到，API key（secretId，secretKey）可以在访问管理中获取。

　　最后我们创建./lib/api.js，然后填写如下内容，将所有的数据拉取逻辑都集中在这个文件中。

　　在api.js中，根据环境信息初始化SDK，创建用于查询文章和作者的Author和Ariticle实例。在 getHomePosts 函数中，我们获取 文章 用于显示。具体逻辑如果不明白，暂时不用深究。现在你只需要知道：通过执行getHomePosts，我们可以从云环境的cms系统中拉取文章列表。

　　接下来我们修改./pages/index.js文件：

　　然后，访问localhost:3000，可以看到如下效果：

　　这意味着：我们已经成功从cms获取数据，可以渲染一个静态页面返回给客户端！

　　文章页面

　　接下来，我们要开始写文章页面了。基本流程类似，但值得注意的是文章页面与首页不同。主页只有一个，但文章页可能无数。，而 Next.js 提供了一种能力，让我们可以只写一个 js 文件，稍作改动就可以渲染无数个 文章 页面。

　　拉取用于渲染页面的 文章 内容

　　首先准备您需要的样式。首先创建./styles/Post.module.css文件，具体的样式内容可以参考：

　　接下来，创建一个 ./pages/post/[id].js 文件。这个文件对应所有路由类似/post/{id}的页面，id的作用是匹配文章的_id。这样，通过访问URL：/post/{id1}.js，就可以访问到文章对应的页面，文章id等于id1。

　　我们首先在[id].js文件中填写如下内容：

　　可以看到，与 index.js 相比，[id].js 多了一个 getStaticProps 函数，getStaticProps 也多了一个 parms 参数。getStaticProps 函数暂时被忽略，param.id 是路由中匹配的id。可以使用它来执行获取对应文章的内容的逻辑。

　　在 api.js 中，添加以下内容：

　　然后安装remark和remark-html两个库，我们将使用它们将markdown转换为html，然后将[id].js文件中的getStaticProps修改为

　　拉取所有 文章 id 来渲染所有 文章 页面

　　仅仅这一步是不够的。我们需要知道所有路由可能匹配的 id 值，以便 Next.js 可以渲染所有 文章 页面。[id].js 中额外的getStaticPaths 函数用于返回id 的所有可能匹配值。

　　这就是我们只需要写一次拉取文章数据的逻辑，以及一次文章的页面UI，Next.js就可以生成无数的文章静态页面。因为，你可以让 Next.js 知道所有的 文章 id，然后 Next.js 就可以为每个 文章 页面执行一次生成。

　　修改添加获取api.js中所有文章 id的函数：

　　然后修改getStaticPaths函数：

　　然后，访问首页，输入文章文章，可以看到如下效果：

　　至此，我们已经成功完成了 Next.js 项目的构建！

　　部署

　　使用腾讯云开发，您可以轻松将应用部署到公网。

　　我们先修改package.json中依赖库的配置，因为云开发环境对依赖版本有一定的限制：

　　然后，创建部署的配置文件cloudbaserc.json，填写如下内容：

　　将 env 替换为您刚刚创建的云环境的 ID。

　　修改后执行命令：

　　可以看到部署过程开始了。部署完成后，进入云环境的“我的应用”模块。你会发现应用列表中多了一个“tcbcms-nextjs”。点击访问按钮，刚才创建的应用是通过公网IP访问的，说明我们的应用已经部署成功。

　　总结

　　至此，我们的博客已经成功创建和部署。以后如果想在博客中添加新的文章，或者删除原来的文章，只需要修改cms上的内容，然后执行Next.js 在本地构建和构建。可以进行云开发和部署。

　　更多关于Next.js和云开发的知识，可以查看官方文档：

　　Next.js 官方文档：

　　CloudBase cms 官方文本：

　　@cloudbase/node-sdk 官方文档：

　　彩蛋：云开发如何支持应用开发？

　　您可能对云环境的功能如何支持我们的系统感到好奇。

　　再次进入腾讯云控制台，进入刚刚创建的云环境首页，进入HTTP访问服务、云数据库、云功能模块，你会发现很多。其实cms系统就是靠这些东西支撑的。

　　每次访问cms系统并进行操作，都会通过HTTP访问服务，引出一个云函数，执行云函数中的后台逻辑。系统中的数据也存储在云数据库中。这也是我们的你可以通过@cloudbase/node-sdk访问云数据库，获取cms中数据的原因。

　　而我们刚刚部署的 Next 应用实际上是在云函数上运行的。

　　如果您对云开发有兴趣，欢迎阅读云开发社区官网文档，加入技术交流群，共同探索云开发的更多可能性。

　　产品描述

　　云开发（Tencent CloudBase，TCB）是腾讯云提供的云原生集成开发环境和工具平台。它为开发者提供高可用、自动、弹性伸缩的后端云服务，包括计算、存储、托管等无服务器能力。, 可用于云集成开发各种终端应用（小程序、公众号、web应用、Flutter客户端等），帮助开发者统一构建和管理后端服务和云资源，避免繁琐服务器在应用开发过程中随着构建和运维，开发者可以专注于业务逻辑的实现，开发门槛更低，效率更高。

　　开放云开发：

　　产品文档：

　　技术文档：