next.js开发seo服务端渲染方案

好久没有更新博客了，最近公司官网重构技术选型方面选择了react为基础的next框架。
框架的原理大致就是在前端和后台数据之间加了一层node.js服务这样，浏览器请求页面数据的时候可以直接请求到经过node层处过后的带有数据的html，其中页面的数据被放到了script标签中因此搜索引擎是可以收录到这些数据的。
安装

npm install --save next react react-dom

目录结构

这里有一点要注意的是next.js文件的名字是要按照官方要求的名字的不能自己定义。
pages是页面文件
一般来说pages目录下应该直接就是对应的react页面组件但是这里为了方便区分我放到了单独的文件夹中
注意
1.每个页面文件夹先必须要有一个index.jsx文件这算是每个页面的入口文件，文件夹的名字就是页面路由的名字
2.pages目录下的固定吗，形名称的_app.js是整个项目的入口文件，可以在这里配置项目的头部和底部这样的公共组件。

server是对应的node相关的接口代码
主要是用来接收后台的参数然后渲染react组件返回给前端

static文件是放静态文件的，无论结构多深的页面组件都可以直接用过/static来访问

components是放项目公共组件的类似头部和底部组件

store文件夹是放公共数据的这里我用的是redux
 

跟目录下的next.config.js是的项目的脚手架配置文件
 

next项目的目录结构大概就是这样