标签：

开发文档

https://nextjs.frontendx.cn/

源码

该博客的示例代码我已经上传到github，欢迎star或者fork

react-next-hello

Next介绍

Next.js是一个基于React的一个处事端衬着简约框架。它使用React语法，可以很好的实现代码的模块化，有利于代码的开发和维护。

Next.js带来了很多好的特性：

默认处事端衬着模式，以文件系统为根本的客户端路由

代码自动分隔断绝分手使页面加载更快
（以页面为根本的）简洁的客户端路由

以webpack的热替换为根本的开发环境

使用React的JSX和ES6的module，模块化和维护更便利

可以运行在Express和其他Node.js的HTTP 处事器上

可以定制化专属的babel和webpack配置

安置运行 1、将react和next安置到本地依赖

$ npm install --save react react-dom next

2、在package.json文件中插手以下script { "scripts": { "dev": "next" } } 3、运行

npm run dev

设置index.js页面

Next.js是从处事器生成页面，再返回给前端展示。Next.js默认从 pages 目录下取页面进行衬着返回给前端展示，并默认取 pages/index.js 作为系统的首页进行展示

在 pages/index.js 中创建一个React函数式组件：

const Index = () => ( <div> <p>Hello Next.js</p> </div> ) export default Index 多页面路由跳转

所有的页面的路由都是通过后端处事器来控制的，要想实现客户端路由，需要借助Next.js的Link API

// This is the Link API import Link from 'next/link' const Index = () => ( <div> <Link href=http://www.mamicode.com/"/about"> <a>About Page</a> </Link> <p>Hello Next.js</p> </div> ) export default Index

Link组件是通过location.history的浏览器API生存历史路由，所以，你可以通过浏览器左上角的前进和撤退退却按钮来切换历史路由。
Link组件是React的高阶组件的实现，不能对它进行样式的设置，它只是起到路由的跳转成果

用路由粉饰（Route Masking）的洁净的URL

Next.js上供给了一个奇特的特性：路由粉饰（Route Masking）。它可以使得在浏览器上显示的是路由A，而App内部真正的路由是B。这个特性可以让我们来设置一些对照简洁的路由显示在页面，而系统背后是使用一个带参数的路由。

例如 ，地点栏中显示的是 :3000/post?title=Hello%20Next.js ，我们将该地点改革成 :3000/p/hello-nextjs。

import Layout from '../components/MyLayout.js' import Link from 'next/link' const PostLink = (props) => ( <li> <Link as={`/p/${props.id}`} href=http://www.mamicode.com/{`/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> )

当在 Link 组件上使用 as 属性时，，浏览器上显示的是 as 属性的值，走的是客户端路由，而处事器真正映射的是 href 属性的值，走的是处事端路由。

处事端撑持路由粉饰

上面会有一个问题，如果在前端路由间切换不会有问题，可以正常显示，但是在页面 :3000/p/hello-nextjs 时刷新页面，会显示 404页面。这是因为路由粉饰默认只在客户端路由中有效，要想在处事端也撑持路由粉饰，需要在处事端单独设置路由解析的要领。

1、首先需要将 express 安置到项目依赖中：

$ npm install --save express

2、根目录下创建server.js文件 // 处事端撑持路由粉饰 const express = require('express') const next = require('next') const dev = process.env.NODE_ENV !== 'production' const app = next({ dev }) const handle = app.getRequestHandler() app.prepare().then(() => { const server = express() // 处事器中对 /p/* 开头的路由进行重写，然后重定向到 /post 开头的路由上，最后将内容返回给前端 server.get('/p/:id', (req, res) => { const actualPage = '/post' const queryParams = { title: req.params.id } app.render(req, res, actualPage, queryParams) }) server.get('*', (req, res) => { return handle(req, res) }) server.listen(3000, (err) => { if (err) throw err console.log('> Ready on :3000') }) }).catch((ex) => { console.error(ex.stack) process.exit(1) }) 3、更新 package.json 文件中的 scripts ： { "scripts": { "dev": "node server.js" } }

处事器已经可以撑持路由粉饰了，在显示粉饰路由的页面，刷新页面也可以正常显示内容

请求接口，获取数据