# 一、Next.js是什么
Next.js是一个基于React的一个服务端渲染简约框架。它使用React语法，可以很好的实现代码的模块化，有利于代码的开发和维护
# 1.1 Next.js带来了很多好的特性
- 默认服务端渲染模式，以文件系统为基础的客户端路由
- 代码自动分隔使页面加载更快
- 以页面为基础的简洁的客户端路由
- 以
webpack的热替换为基础的开发环境 - 使用
React的JSX和ES6的module，模块化和维护更方便 - 可以运行在
Express和其他Node.js的HTTP服务器上 - 可以定制化专属的
babel和webpack配置
# 二、构建一个基本的Next项目
# 2.1 创建项目
// 在本地创建一个项目跟目录
$ mkdir hello-next
// 切换到项目根目录
$ cd hello-next
// 用npm初始化项目
$ npm init -y
// 将react和next安装到本地依赖
$ npm install --save react react-dom next
// 创建文件夹 pages
$ mkdir pages
@前端进阶之旅: 代码已经复制到剪贴板
创建完文件夹之后，打开
hello-next文件下的package.json文件，在scripts下添加一个script，如下
{
"scripts": {
"dev": "next"
}
}
@前端进阶之旅: 代码已经复制到剪贴板
$ npm run dev
@前端进阶之旅: 代码已经复制到剪贴板
# 2.2 创建页面
Next.js是从服务器生成页面，再返回给前端展示。Next.js默认从pages目录下取页面进行渲染返回给前端展示，并默认取pages/index.js作为系统的首页进行展示。注意，pages是默认存放页面的目录，路由的根路径也是pages目录
- 在
pages/index.js中创建一个React函数式组件
const Index = () => (
<div>
<p>Hello Next.js</p>
</div>
)
export default Index
