初步学习next.js-1-新建项目

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 就可以下载项目所需要的所有包。