这是我参与「第五届青训营 」伴学笔记创作活动的第 7 天

一，Next.js简介

Next.js 是一个轻量级的 React 服务端渲染应用框架。

二，创建项目

1. 手动创建Next.js项目

mkdir nextDemo  //创建项目
npm init            //初始化项目
npm i react react-dom next --save           //添加依赖

在package.json中添加快捷键命令

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev" : "next" ,
    "build" : " next build",
    "start" : "next start"
  },

2. creact-next-app快速创建项目

create-next-app可以快速的创建Next.js项目，它就是一个脚手架。

create-next-app nextDemo  //基于脚手架创建项目
cd nextDemo
npm run dev  //运行项目

目录结构介绍：

• components文件夹: 这里是专门放置自己写的组件的，这里的组件不包括页面，指公用的或者有专门用途的组件。
• node_modules文件夹：Next项目的所有依赖包都在这里，一般我们不会修改和编辑这里的内容。
• pages文件夹：这里是放置页面的，这里边的内容会自动生成路由，并在服务器端渲染，渲染好后进行数据同步。
• static文件夹： 这个是静态文件夹，比如项目需要的图片、图标和静态资源都可以放到这里。
• .gitignore文件： 这个主要是控制git提交和上传文件的，简称就是忽略提交。
• package.json文件：定义了项目所需要的文件和项目的配置信息（名称、版本和许可证），最主要的是使用npm install 就可以下载项目所需要的所有包。