不改一行代码！快速部署Next.js博客到腾讯云Ser

小提示：您能找到这篇{不改一行代码！快速部署Next.js博客到腾讯云Ser}绝对不是偶然，我们能帮您找到潜在客户，解决您的困扰。如果您对本页介绍的不改一行代码！快速部署Next.js博客到腾讯云Ser内容感兴趣，有相关需求意向欢迎拨打我们的服务热线，或留言咨询，我们将第一时间联系您！

< ">近期，腾讯云Serverless团队发布了Serverless SSR产品，支持将Next.js，Nuxt.js等框架的应用快速部署和托管，那么，今天我们就通过一个Next.js官方案例一起，来了解下该产品有哪些特性吧！

< ">< color: rgb(0, 176, 240);">一、写在前面：Next.js&SSR是什么关系？

< ">Server-Side-Rendering（SSR）泛指服务端渲染的技术，指的是在Server端将HTML渲染好，再返回给Client端。并且SSR是在对页面每个请求发出时，产品推广网站有哪些都会重新抓取和生成页面（和SSG静态页面生成相比，是更加动态的渲染方式）。舆情意义

< ">Next.js是一个轻量级的React服务端渲染应用框架。支持多种渲染方式，包括客户端渲染、静态页面生成、服务端渲染。使用Next.js可以方便的实现SSR，即页面的服务端渲染。

二、服务端渲染SSR（Server Side Render）

< ">Next.js框架支持客户端渲染CSR(Client Side Render)，静态页面生成SSG（Static Site Generation）以及服务端渲染SSR(Server Side Render)。用户可以针对不同的场景，选用不同的渲染方式。

< ">由于SSR可以动态渲染页面并加载内容，因此主要有以下两个优势：

< ">首屏开启时间更快，SEO更加友好

< ">支持生成用户相关内容，不同用户结果不同

< ">在Next.js框架中，SSR的实现主要通过getServerSideProps方法获取内容，之后在后端调用renderToString()的方法，把整个页面渲染成字符串。

三、基于Next.js SSR的博客系统搭建

< ">接下来我们可以通过实战来验证下效果。通过Next.js官方的博客搭建教程，可以很详细的了解到框架的使用原理，并且涉及了丰富的功能点，如下所示：

< ">搭建单页应用

< ">页面之间相互导航

< ">Next.js对静态资源，元数据和CSS的处理

< ">预加载（SSR和SSG）及数据获取

< ">动态页面的路由

< ">API路由（Serverless函数）

< ">和Github Actions等CI打通

< ">接下来，我们可以将这个博客快速部署到Serverless SSR平台中，由于教程前半部分主要是对Next.js框架的教学，本文中直接将博客仓库代码下载并部署，步骤如下。

< ">1.【下载代码】通过下列命令将代码下载到本地，并进行少许更改。

< ">npx create-next-app nextjs-blog--use-npm--example"https://github.com/vercel/next-learn-starter/tree/master/basics-final"

< ">在public/images/profile.jpg中将图片换为自己的头像

< ">在components/layout.js中，把const name='[Your Name]'替换成自己的名字

< ">在pages/index.js中，把<p>[Your Self Introduction]</p>改成自己的个人简介

< ">2.【新建】登录腾讯云，打开Serverless SSR控制台，如果是全新客户会有个授权的流程，授权完成后，点击新建应用，如下图所示。

SSR新建

< ">3.【配精准营销获客置】在新建页面中，填入博客项目名称，由于我本地已有部署好的next.js博客及仓库，因此可以直接选择「导入已有项目」。选择对应的代码托管方式，并进行一键授权。

导入项目

< ">如果没有Github仓库也没关系，可以直接通过本地「文件夹上传」的方式，把第一步下载的文件夹上传并导入。

< ">配置完成后，点击部署，在「部署日志」页面查看和等待即可。

< ">在这个过程中，Serverless SSR会自动执行CI流程，做环境的初始化，安装Serverless CLI，对项目进行npm run build构建，并且自动通过layer层对依赖进行分离，从而提升部署速度。

< ">4.【访问】等待约一分钟后，可以看到部署成功，跳转到了配置详情页面。此时点击对应的URL或者「访问应用」按钮，即可访问并打开博客了！

访问页面

< ">至此，一行代码都没有改，我把博客无缝部署到了腾讯云Serverless SSR平台上托管。

< ">最终的页面展示如下所示，一个基于Next.js SSR的博客页面就快速上线完成了！

页面展示