【玩转腾讯云】Next如何部署到云开发静态网站托管？

我们知道部署web应用程序的最佳方式是作为静态HTML应用程序，因为他对搜索引擎很友好，速度快等等，这对我们写个人博客这样的小型网站无异于非常nice。如果你的应用可以作为静态HTML，那么可以试试Next.js。

它可以把一个应用程序作为静态页面导出，那么导出的静态页面怎么部署到静态托管呢？我们以云开发静态托管服务为例。

什么是云开发？

可以理解为它为我们提前做好了很多的事(例如负载均衡，冷备热备，网络安全等等)，使我们只需关注业务逻辑即可。就像包饺子一样，提前有人给你准备好饺子馅和发好的面，我们只需要包饺子就可以了。详细了解可以到云开发查看

首先我们需要准备的环境以及工具如下：

必要环境:

node.js 开通云环境

开发工具：

create-next-app @cloudbase/cli

下面我们来详细操作~

首先我们进行安装create-next-app

代码语言：txt复制

`npm i create-next-app`

以及云开发工具@cloudbase/cli

代码语言：txt复制

`npm i @cloudbase/cli`

npm命令是在安装node.js时自动安装

构建Next项目

利用脚手架创建一个项目 npx create-next-app 项目名称 此处项目名称为你的项目根目录名称
创建完成后我们进入到项目中 cd 项目名称
我们需要在跟目录中新建一个next.config.js文件

代码语言：txt复制

module.exports = {
    exportTrailingSlash: true,
    exportPathMap: function () {
         return {
            '/': {page: '/'}
         };
     },
};

如果你希望生成的静态文件不只包含首页和404页面(Next自动生成),那么可以在next.config.js中加入'/about': {page: '/about/about'},并在pages下新建一个about文件夹并创建about.js文件写入，如果只是测试生成首页和404就够了，那么直接跳到第4步即可

代码语言：txt复制

const about = () => (
  <div>about</div>
)
export default about

附上next.config.js添加后的完整代码：

代码语言：txt复制

module.exports = {
     exportTrailingSlash: true,
     exportPathMap: function () {
        return { 
            '/': {page: '/'},
            '/about': {page: '/about/about'}
        };
     },
};