開發文檔
源碼
該博客的示例代碼我已經上傳到github，歡迎star或者fork
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="/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。這個特性可以讓我們來設置一些比較簡潔的路由顯示在頁面，而系統背后是使用一個帶參數的路由。
例如 ，地址欄中顯示的是 http://localhost:3000/post?title=Hello Next.js ，我們將該地址改造成 http://localhost: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={`/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 屬性的值，走的是服務端路由。
服務端支持路由遮蓋
上面會有一個問題，如果在前端路由間切換不會有問題，可以正常顯示，但是在頁面 http://localhost: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 http://localhost:3000')
})
}).catch((ex) => {
console.error(ex.stack)
process.exit(1)
})
3、更新 package.json 文件中的 scripts ：
{
"scripts": {
"dev": "node server.js"
}
}
服務器已經可以支持路由遮蓋了，在顯示遮蓋路由的頁面，刷新頁面也可以正常顯示內容
請求接口，獲取數據
Next.js 在 React 的基礎上為組件添加了一個新的特性： getInitialProps （有點像是getInitialState），它用於獲取並處理組件的屬性，返回組件的默認屬性。我們可以在改方法中請求數據，獲取頁面需要的數據並渲染返回給前端頁面。
引入一個支持在客戶端和服務器端發送 fetch 請求的插件 isomorphic-unfetch，當然你也可以使用 axios 等其他工具。
$ npm install --save isomorphic-unfetch
1、修改 pages/index.js 里的內容
import Layout from '../components/MyLayout.js'
import Link from 'next/link'
import fetch from 'isomorphic-unfetch'
const Index = (props) => (
<Layout>
<h1>Batman TV Shows</h1>
<ul>
{props.shows.map(({show}) => (
<li key={show.id}>
<Link as={`/p/${show.id}`}
href={`/post?id=${show.id}`}>
<a>{show.name}</a>
</Link>
</li>
))}
</ul>
</Layout>
)
Index.getInitialProps = async function() {
const res = await fetch('https://api.tvmaze.com/search/shows?q=batman')
const data = await res.json()
console.log(`Show data fetched. Count: ${data.length}`)
return {
shows: data
}
}
export default Index
樣式化組件
Next.js 提供了一個 css-in-js 的特性，它允許你在組件內部寫一些樣式，你只需要在組件內使用 <style jsx> 標簽來寫 css 即可
const Index = (props) => (
<Layout>
<h1>My Blog</h1>
<ul>
{props.shows.map(({show}) => (
<li key={show.id}>
<Link as={`/p/${show.id}`}
href={`/post?id=${show.id}`}>
<a>{show.name}</a>
</Link>
</li>
))}
</ul>
<style jsx>{
h1, a {
font-family: "Arial";
}
ul {
padding: 0;st
}
li {
list-style: none;
margin: 5px 0;
}
a {
text-decoration: none;
color: blue;
}
a:hover {
opacity: 0.6;
}
}</style>
</Layout>
)
上述代碼寫在一個模板字符串（{``}）里面。Next.js 使用 babel插件來解析 styled-jsx ，它支持樣式命名空間，需要注意的是styled-jsx 的樣式不會應用到子組件，如果想要該樣式適用於子組件，可以在 styled-jsx 標簽添加屬性 global：<style jsx global>。
nextjs項目部署
Next.js 項目的部署，需要一個 Node.js的服務器，可以選擇 Express, Koa 或其他 Nodejs 的Web服務器。
服務器的入口文件 server.js 里添加了針對部署環境的選擇
const dev = process.env.NODE_ENV !== 'production'
為了區分部署環境，我們需要在 package.json 中修改 script 屬性如下：
"scripts": {
"build": "next build",
"start": "NODE_ENV=production node server.js -",
"dev": "NODE_ENV=dev node server.js"
}
其中，build 命令是用於打包項目，start 命令是用於生產環境部署，dev 命令是用於本地開發。
執行如下命令即可將 Next項目 部署到服務器：
$ npm run build
$ npm run start
最后
該博客的示例代碼我已經上傳到github，歡迎star或者fork
react-next-hello