react和vue做的都是单页面应用
缺点：1.不适合SEO
2.启动慢
解决方案：next.js
参考技术胖的资料进行学习
https://jspang.com/detailed?id=51#toc21
1.手动创建next.js
创建文件夹
D:
mkdir NextDemo
npm init
安装所需要的安装包
yarn add react react-dom next
增加快捷键命令
"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev" : "next" , "build" : " next build", "start" : "next start" },
创建pages文件夹和文件
function Index(){ return ( <div>Hello Next.js</div> ) } export default Index
使用yarn dev来打开预览
2.使用create-next-app 来创建项目
全局安装create-next-app
yarn global add create-next-app
创建项目
npx create-next-app myCreateNext
3.项目结构介绍
看到结果后，用VSCode打开目录，可以看到已经有了很多自动建立好的文件和文件夹，下面就简单的介绍一下这些它们的用处：
-
components文件夹:这里是专门放置自己写的组件的，这里的组件不包括页面，指公用的或者有专门用途的组件。
-
node_modules文件夹：Next项目的所有依赖包都在这里，一般我们不会修改和编辑这里的内容。
-
pages文件夹：这里是放置页面的，这里边的内容会自动生成路由，并在服务器端渲染，渲染好后进行数据同步。
-
static文件夹： 这个是静态文件夹，比如项目需要的图片、图标和静态资源都可以放到这里。
-
.gitignore文件： 这个主要是控制git提交和上传文件的，简称就是忽略提交。
-
package.json文件：定义了项目所需要的文件和项目的配置信息（名称、版本和许可证），最主要的是使用
npm install就可以下载项目所需要的所有包。
项目结构介绍
看到结果后，用VSCode打开目录，可以看到已经有了很多自动建立好的文件和文件夹，下面就简单的介绍一下这些它们的用处：
-
components文件夹:这里是专门放置自己写的组件的，这里的组件不包括页面，指公用的或者有专门用途的组件。
-
node_modules文件夹：Next项目的所有依赖包都在这里，一般我们不会修改和编辑这里的内容。
-
pages文件夹：这里是放置页面的，这里边的内容会自动生成路由，并在服务器端渲染，渲染好后进行数据同步。
-
static文件夹： 这个是静态文件夹，比如项目需要的图片、图标和静态资源都可以放到这里。
-
.gitignore文件： 这个主要是控制git提交和上传文件的，简称就是忽略提交。
-
package.json文件：定义了项目所需要的文件和项目的配置信息（名称、版本和许可证），最主要的是使用
npm install就可以下载项目所需要的所有包。