使用Next搭建React SSR工程架构之基础篇(二)

# 一、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

Next.js默认使用Webpack构建项目，webpack的热部署功能一样能提升开发效率。创建完 pages/index.js 后，再访问 http://localhost:3000 即可看到设置好的页面

• 在 pages 目录下创建文件 pages/about.js

export default () => (
  <div>
    <p>This is the about page</p>
  </div>
)

创建完之后，可以通过 http://localhost:3000/about 访问该页面。至此，所有的页面的路由都是通过后端服务器来控制的，要想实现客户端路由，需要借助Next.js的Link API。

Link API

从 next/link中可以引用到 Link 组件。在pages/index.js文件中引用Link，修改如

// This is the Link API
import Link from 'next/link'

const Index = () => (
  <div>
    <Link href="/about">
      <a>About Page</a>
    </Link>
    <p>Hello Next.js</p>
  </div>
)

export default Index

1. Link组件是通过location.history的浏览器API保存历史路由，所以，你可以通过浏览器左上角的前进和后退按钮来切换历史路由。而在开发过程中，你不需要再单独写客户端路由的配置
2. Link组件是React的高阶组件的实现，不能对它进行样式的设置，它只是起到路由的跳转功能，但是它的复用性强，只要包含一个能触发onClick事件的组件即可

# 2.3 组件复用

Next.js是以多页面为中心，只要将页面文件放在pages目录下，就可以在浏览器上以文件名为路由名来访问到

• 组件的设置跟React一样，通过export导出，通过import导入。一般，只要不想让用户通过页面直接访问的组件，都不放在pages目录下。对除了pages目录，组件放在哪个目录下没有要求，开发者可以自定义设置

下面再 components 目录下，创建一个公用组件 Header，用于各个文件的头部导航，通过导航可以在页面见切换

import Link from 'next/link'

const linkStyle = {
  marginRight: 15
}

const Header = () => (
  <div>
    <Link href="/">
      <a style={linkStyle}>Home</a>
    </Link>
    <Link href="/about">
      <a style={linkStyle}>About</a>
    </Link>
  </div>
)

export default Header

在 pages/index.js 中引入Header

import Header from '../components/Header'

export default () => (
  <div>
    <Header />
    <p>Hello Next.js</p>
  </div>
)

进一步封装Header组件，创建一个自动包含Header和Content的组件 components/MyLayout.js

import Header from './Header'

const layoutStyle = {
  margin: 20,
  padding: 20,
  border: '1px solid #DDD'
}

const Layout = (props) => (
  <div style={layoutStyle}>
    <Header />
    {props.children}
  </div>
)

export default Layout

# 2.4 创建动态页面

使用Next.js创建动态页面，与使用React或Vue创建一个SPA页面大体相同，唯一的区别就是页面的渲染主体不同，前者是Nodejs服务器获取到后端数据渲染完页面后再返回给前端展示，后者是前端先获取页面主体架构，再通过ajax的方式请求后端的数据，在前端渲染展示

以一个简易的博客页面为例，创建博客列表页，修改 pages/index.js

import Layout from '../components/MyLayout.js'

import Link from 'next/link'

const PostLink = (props) => (
  <li>
    <Link href={`/post?title=${props.title}`}>
      <a>{props.title}</a>
    </Link>
  </li>
)

export default () => (
  <Layout>
    <h1>My Blog</h1>
    <ul>
      <PostLink title="Hello Next.js"/>
      <PostLink title="Learn Next.js is awesome"/>
      <PostLink title="Deploy apps with Zeit"/>
    </ul>
  </Layout>
)

有了列表页，需要再写一个博客的详情页，从上面的代码中也可看到，我们需要创建一个 pages/post.js 文件

import Layout from '../components/MyLayout.js'

export default (props) => (
  <Layout>
    <h1>{props.url.query.title}</h1>
    <p>This is the blog post content.</p>
  </Layout>
)

# 2.5 用路由遮盖（Route Masking）的干净的URL

Next.js上提供了一个独特的特性：路由遮盖（Route Masking）。它可以使得在浏览器上显示的是路由A，而App内部真正的路由是B。这个特性可以让我们来设置一些比较简洁的路由显示在页面，而系统背后是使用一个带参数的路由。比如上面的例子中，地址栏中显示的是 http://localhost:3000/post?title=Hello%20Next.js ，这个地址含有一个title参数，看着很不整洁。下面我们就用Next.js来改造路由，使用路由遮盖来创建一个更加简洁的路由地址。比如我们将该地址改造成 http://localhost:3000/p/hello-nextjs

首先我们要修改 pages/index.js 下的PostLink组件，会使用到 next/link 组件的 as 属性，并给组件添加一个属性 id

import Layout from '../components/MyLayout.js'

import Link from 'next/link'

const PostLink = (props) => (
  <li>
    <Link as={`/p/${props.id}`} 
      href={`/post?title=${props.title}`}>
      <a>{props.title}</a>
    </Link>
  </li>
)

export default () => (
  <Layout>
    <h1>My Blog</h1>
    <ul>
      <PostLink id="hello-nextjs" 
        title="Hello Next.js"/>
      <PostLink id="learn-nextjs" 
        title="Learn Next.js is awesome"/>
      <PostLink id="deploy-nextjs" 
        title="Deploy apps with Zeit"/>
    </ul>
  </Layout>
)

1. 当在 Link 组件上使用 as 属性时，浏览器上显示的是 as 属性的值，走的是客户端路由，而服务器真正映射的是 href 属性的值，走的是服务端路由
2. 这样就会有一个问题，如果在前端路由间切换不会有问题，可以正常显示，但是在页面 http://localhost:3000/p/hello-nextjs 时刷新页面，会显示 404页面。这是因为路由遮盖默认只在客户端路由中有效，要想在服务端也支持路由遮盖，需要在服务端单独设置路由解析的方法

# 2.6 服务端支持路由遮盖

上面说到，服务器默认不支持路由遮盖，要让服务器支持它，需要单独对路由进行设置。下面以 Express （你也可以使用Koa等其他Nodejs的Web服务器框架）创建后端服务器讲解如何设置服务器来支持路由遮盖

$ npm install --save express

在项目目录下创建 server.js ，添加内容如下

并更新 package.json 文件中的 scripts ：

{
  "scripts": {
    "dev": "node server.js"
  }
}

这时候，服务器已经可以支持路由遮盖了，在显示遮盖路由的页面，刷新页面也可以正常显示内容。具体的实现是在服务器中对 /p/* 开头的路由进行重写，然后重定向到 /post 开头的路由上，最后将内容返回给前端。具体代码是这一段：

# 2.7 请求接口，获取数据

然后修改 pages/index.js 里的内容，换成下面这样：

# 2.8 样式化组件