Next.js是一个基于React完成的服务端衬着框架，github地点为next.js。
运用Next.js完成服务端衬着是一件异常简朴的事，在这里，你完全能够不必本身去写webpack等设置，Next.js全都帮你做了。本文先从简朴地基本观点最先，一步一步带人人熟悉Next.js。
先初始化我们的项目目次构造：
mkdir learn-next
cd learn-next
npm init -y
npm install react react-dom next -S
mkdir pages能够看到，我们末了一步的时刻创建了一个命名为pages的文件夹，这是由于Next.js采纳的是文件体系作为API，每个放在pages中的文件都邑映照为一个路由，路由称号与文件名雷同。
翻开package.json文件，设置我们的项目启动敕令
{
"scripts": {
"dev": "next"
}
}然后在敕令行中启动我们的项目：
npm run dev翻开http://localhost:3000，能够看到Next.js给我们报了404，这是由于我们还没写任何内容。
基本路由
在pages目次下新建index.js，输入以下内容：
export default () => (
<h1>Hello Next.js</h1>
)这时刻，我们能够看到Next.js已把我们的内容衬着出来了，以下所示：
页面间导航
页面间跳转是很正常的事，因而，Next.js为我们预备了Link这个高阶组件，用于页面导航。我们先新建一个about.js文件
export default () => (
<h1>This is about page</h1>
)然后将我们的index.js变动成：
import Link from 'next/link'
export default () => (
<div>
<Link href="/about" >
<a>About Page</a>
</Link>
<h1>Hello Next.js</h1>
</div>
)共用组件
我们的组件不可能都是伶仃的，组件间复用是很罕见的事，比方页面的头部，底部，导航条等等，因而我们能够在根目次下新建一个components目次用于寄存共用的组件。
新建一个Header.js文件
import Link from 'next/link'
const linkStyle = {
marginRight: 15
}
export default () => (
<div>
<Link href="/">
<a style={linkStyle}>Home</a>
</Link>
<Link href="/about">
<a style={linkStyle}>About</a>
</Link>
</div>
)
新建一个Layout.js文件
import Header from './Header'
const layoutStyle = {
margin: 20,
padding: 20,
border: '1px solid #DDD'
}
export default (props) => (
<div style={layoutStyle}>
<Header />
{props.children}
</div>
)变动我们的pages/index.js文件
import Layout from '../components/Layout.js'
export default () => (
<Layout>
<h1>Hello Next.js</h1>
</Layout>
)翻开http://localhost:3000，能够看到我们的共用组件见效了：
动态页面
假设有一个post页面，该页面吸收一个id，并将该id展现出来，那末怎样做呢。
在pages下新建post.js文件，内容以下:
import Layout from '../components/Layout.js'
export default (props) => (
<Layout>
<h1>{props.url.query.id}</h1>
<p>This is the post page.</p>
</Layout>
)如上所示：我们从url.query.id中拿到页面传过来的id
那末怎样把id从index页面传过去呢，回到pages/index.js页面，代码变动以下：
import Layout from '../components/Layout.js'
import Link from 'next/link'
const PostLink = (props) => (
<li>
<Link as={`/p/${props.id}`} href={`/post?id=${props.id}`}>
<a>{props.id}</a>
</Link>
</li>
)
export default () => (
<Layout>
<h1>My Blog</h1>
<ul>
<PostLink id="hello-nextjs" />
<PostLink id="learn-nextjs" />
<PostLink id="deploy-nextjs" />
</ul>
</Layout>
)在上面的代码中，我们在Link标签中运用了as属性，它的作用是变动路由的称号，当我们点击”learn-nextjs”时，我们能够看到，地点栏的地点显现为http://localhost:3000/p/learn-nextjs
服务端路由
上面的代码实际上是有题目的，这只适合在浏览器端举行导航，然则当我们在http://localhost:3000/p/learn-nextjs下革新页面时，会看到服务器给我们报了404，因而我们须要同步适配一下服务端的路由。
我们选用express来作为服务端框架，固然你也能够运用koa。
npm install express -S在根目次下新建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()
server.get('/p/:id', (req, res) => {
const actualPage = '/post'
const queryParams = { id: 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 http://localhost:3000')
})
})
.catch((ex) => {
console.error(ex.stack)
process.exit(1)
})变动package.json中我们的项目启动体式格局：
{
"scripts": {
"dev": "node server.js"
}
}这时刻革新页面，能够看到我们的页面也被准确衬着了。
本篇教程到此结束，后面会跟人人引见Next.js的服务端衬着(ssr)及css in js以及布置相干的一下观点及示例代码。
