如何修改网站内容(Next.js函数式React组件的应用构建期介绍)

　　如何修改网站内容(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组件接受一个post作为参数，这个post就是文章列表数据，我们在组件中渲染。

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

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

　　拉取数据

　　首先安装拉取数据所需的SDK：

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

　　环境ID（env）可以直接在环境首页看到，API密钥（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所有可能匹配的值。

　　这就是 Next.js 是如何通过编写一次拉取 文章 的数据逻辑和页面 UI 就可以生成无数个 文章 静态页面的奥秘所在。因为，Next.js 可以知道所有 文章 id，并且 Next.js 将能够为每个 文章 页面执行构建。

　　修改以添加一个函数以获取所有 文章 id 到 api.js：

　　然后修改getStaticPaths函数：

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

　　至此，我们就顺利完成了Next.js项目的搭建！

　　部署

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

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

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

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

　　修改后执行命令：

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

　　总结

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

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

　　Next.js 官方文档：

　　CloudBase cms 官方文档：

　　@cloudbase/node-sdk 官方文档：

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

　　您可能想知道云环境的功能如何支撑我们的系统。

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

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

　　而我们刚刚部署的 Next 应用程序实际上是运行在云功能上的。

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

　　产品描述

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

　　开放云开发：

　　产品文档：

　　技术文档：