摘要：無(wú)數(shù)的模板語(yǔ)言和框架應(yīng)運(yùn)而生但是技術(shù)始終被分割為前端和后端。這意味著一個(gè)頁(yè)面可以有很多的這并不會(huì)對(duì)其余的頁(yè)面有任何影響。提前綁定和編譯預(yù)測(cè)是一個(gè)非常有效的部署方式。最后，這是我們對(duì)于這個(gè)特定問(wèn)題的貢獻(xiàn)。

原文地址

Naoyuki Kanezawa (@nkzawa), Guillermo Rauch (@rauchg) 和 Tony Kovanen (@tonykovanen)
周二，2016年10月25日

我們非常自豪的開(kāi)源了Next.js，他是一個(gè)小巧的基于React、Webpack、Babel的客戶端渲染universal JavasScript web app框架。

要開(kāi)始使用Next.js，只需在一個(gè)有package.json的文件夾里執(zhí)行以下命令：

$ npm install next --save
$ mkdir pages

生成pages/index.js：

import React from "react"
export default () => 
Hello world!

然后在package.json里添加一個(gè)script：

{
  "scripts": {
    "dev": "next"
  }
}

然后執(zhí)行：

$ npm run dev

本文主要闡述該項(xiàng)目的設(shè)計(jì)理念和它背后的哲學(xué)思想。

如果想學(xué)習(xí)如何使用Next.js，請(qǐng)移步README，在那你只需花幾分鐘就能學(xué)習(xí)完所有功能。

首先我們會(huì)深入該項(xiàng)目的后端并逐一描述以下6個(gè)原則：

零配置，使用文件系統(tǒng)作為API

只有JavaScript，一切都是函數(shù)

自動(dòng)服務(wù)端渲染和代碼分割

完全可定制的數(shù)據(jù)獲取方式

預(yù)測(cè)是提高性能的關(guān)鍵

部署簡(jiǎn)單

從很多年以前，我們就一直追求universal JavaScript applications的道路。

Node.js展示了這種可能性，客戶端服務(wù)端代碼共享，也擴(kuò)展了開(kāi)發(fā)者的視野。

為了能在Node上開(kāi)發(fā)app和網(wǎng)頁(yè)，開(kāi)發(fā)者做了很多很多嘗試。無(wú)數(shù)的模板語(yǔ)言和框架應(yīng)運(yùn)而生……但是技術(shù)始終被分割為前端和后端。

假設(shè)你選擇Express和Jade開(kāi)發(fā)，HTML會(huì)首先被服務(wù)端渲染，然后另外一個(gè)項(xiàng)目（jQuery或是其他類似庫(kù)）才會(huì)接管過(guò)去。

這樣的狀況其實(shí)一點(diǎn)也不比傳統(tǒng)的PHP方式好多少。從很多方面來(lái)說(shuō)，PHP都更適合服務(wù)端渲染HTML這樣的工作。在出現(xiàn)async/await之前，在JS中查詢數(shù)據(jù)并不容易。捕獲和處理request/response的異常也非常麻煩。

然而，一些值得關(guān)注的概念的出現(xiàn)，使得我們能夠填補(bǔ)這個(gè)空白。其中最重要的就是能夠根據(jù)數(shù)據(jù)返回對(duì)應(yīng)UI的純函數(shù)。

這個(gè)模型（因React而流行）非常重要，不過(guò)僅僅有他還不能從眾多的模板系統(tǒng)中脫穎而出。另外一個(gè)重要的概念就是組件生命周期。

生命周期的鉤子函數(shù)允許我們?cè)谇岸私庸苣承┲坝煞?wù)端渲染的的頁(yè)面。比如說(shuō)，你可以在一開(kāi)始只渲染靜態(tài)數(shù)據(jù)，監(jiān)聽(tīng)服務(wù)端的更新，并根據(jù)數(shù)據(jù)改變頁(yè)面。或者什么也不做，讓這個(gè)頁(yè)面保持靜態(tài)。

Next.js是我們?cè)谶@條路上更近一步的成果。

工具假設(shè)你的項(xiàng)目具有特定的文件結(jié)構(gòu)。

一般來(lái)說(shuō)，我們開(kāi)始一個(gè)新項(xiàng)目時(shí)，都會(huì)新建一個(gè)文件夾，在里面放一個(gè)package.json，在./node_modules中安裝模塊。

Next.js擴(kuò)展了這種結(jié)構(gòu)，引入了一個(gè)放置頂級(jí)組件的文件夾叫pages。

例如，你可以新建pages/index.js，它會(huì)自動(dòng)映射到/路由：

import React from "react"
export default () => Hello world

然后新建pages/about.js，它會(huì)映射到/about路由：

import React from "react"
export default () => 
About us

我們相信這是一個(gè)很好的起步默認(rèn)配置，而且非常便于項(xiàng)目瀏覽。當(dāng)需要更復(fù)雜的路由時(shí)，我們也允許開(kāi)發(fā)人員自行控制[#25]。

啟動(dòng)一個(gè)項(xiàng)目所需要的所有操作僅僅是運(yùn)行：

$ next

除非必要，沒(méi)有額外的配置。自動(dòng)代碼熱替換，自動(dòng)錯(cuò)誤報(bào)告，自動(dòng)source maps，自動(dòng)為老舊瀏覽器編譯代碼。

每個(gè)Next.js的路由都是一個(gè)僅僅是一個(gè)export一個(gè)函數(shù)或一個(gè)繼承自React.Component的子類所構(gòu)成的ES6模塊。

這個(gè)方式和其他類似模型相比的好處是，整個(gè)系統(tǒng)都能保持高可組合性和可測(cè)試性。一個(gè)組件可以被直接渲染也可以被其他頂級(jí)組件導(dǎo)入并渲染。

組件也可以改變整個(gè)page的：

import React from "react"
import Head from "next/head"
export default () => (
  

    
      
    
    
Hi. I"m mobile-ready!
  
)

并且，不需要任何包裝或改動(dòng)就能對(duì)整個(gè)系統(tǒng)進(jìn)行測(cè)試。只需在你的測(cè)試集中導(dǎo)入并shallow-render你的路由。

擁抱CSS-in-JS。通過(guò)使用glamor使得我們能在完全不理會(huì)CSS解析和編譯的情況下?lián)碛型暾腃SS功能：

import React from "react"
import css from "next/css"

export default () => 
Hi there!

const style = css({
  color: "red",
  ":hover": {
    color: "blue"
  },
  "@media (max-width: 500px)": {
    color: "rebeccapurple"
  }
})

我們認(rèn)為這種方式提供了無(wú)與倫比的性能，可組合性以及和服務(wù)器端渲染流程的良好集成。我們?cè)贔AQ中會(huì)討論更多關(guān)于這個(gè)決定的一切。

有兩個(gè)非常想實(shí)現(xiàn)同時(shí)又非常困難的任務(wù)：

服務(wù)端渲染

代碼分割

在Next.js中，每個(gè)pages/下面的組件都會(huì)自動(dòng)的連同內(nèi)聯(lián)的腳本一起被服務(wù)端渲染。

當(dāng)組件是通過(guò)或路由自動(dòng)加載時(shí)，我們會(huì)獲取一個(gè)基于JSON的頁(yè)面，這個(gè)頁(yè)面同樣會(huì)包含他自己的腳本。

這意味著一個(gè)頁(yè)面可以有很多的imports：

import React from "react"
import d3 from "d3"
import jQuery from "jquery"

… 這并不會(huì)對(duì)其余的頁(yè)面有任何影響。

這點(diǎn)對(duì)于那些需要技術(shù)業(yè)務(wù)需求不同的團(tuán)隊(duì)互相合作的場(chǎng)景下特別有用。一個(gè)組件的性能問(wèn)題不會(huì)影響到整個(gè)系統(tǒng)。

服務(wù)端渲染的靜態(tài)JSX確實(shí)非常了不起，但現(xiàn)實(shí)世界的應(yīng)用往往需要處理來(lái)自不同API調(diào)用的數(shù)據(jù)。

Next.js給React的組件添加了一個(gè)重要的擴(kuò)展：getInitialProps。

import React from "react"
import "isomorphic-fetch"
export default class extends React.Component {
  static async getInitialProps () {
    const res = await fetch("https://api.company.com/user/123")
    const data = await res.json()
    return { username: data.profile.username }
  }
}

我們關(guān)于轉(zhuǎn)換哪些功能的立場(chǎng)簡(jiǎn)單來(lái)說(shuō)就是：我們緊緊跟隨V8。因?yàn)槲覀兊哪繕?biāo)是服務(wù)端和客戶端的代碼共享，當(dāng)我們用Chrome或者Brave開(kāi)發(fā)，并在Node上執(zhí)行代碼時(shí)，這種做法給了我們極好的體驗(yàn)。

正如你所見(jiàn)，我們的擴(kuò)展非常簡(jiǎn)單：getInitialProps必須返回一個(gè)能resolve為一個(gè)JavaScript對(duì)象的Promise，該對(duì)象會(huì)被用來(lái)生成組件的props。

這使得Next.js能很好的和REST APIs、GraphQL，甚至是全局狀態(tài)管理Redux等很好的協(xié)作，這有一個(gè)示例在我們的wiki上。

無(wú)論組件是服務(wù)端渲染的還是通過(guò)客戶端路由動(dòng)態(tài)加載的，都可以使用同一個(gè)方法獲得數(shù)據(jù)：

static async getInitialProps ({ res }) {
  return res
    ? { userAgent: res.headers["user-agent"] }
    : { userAgent: navigator.userAgent }
}

我們認(rèn)為即使沒(méi)有網(wǎng)絡(luò)也能給予用戶即時(shí)響應(yīng)的能力使得完全服務(wù)端渲染偏向“單頁(yè)應(yīng)用”或“完全沒(méi)有服務(wù)端渲染”兩個(gè)極端。

在www.zeit.co我們?cè)贜ext.js上實(shí)現(xiàn)了一種技術(shù)，讓我們能同時(shí)享受兩種方式各自的好處：每個(gè)標(biāo)簽都會(huì)在后臺(tái)通過(guò)一個(gè)ServiceWorker提前獲取組件的JSON表現(xiàn)。

一旦預(yù)加載完成，如果你在頁(yè)面上隨意跳轉(zhuǎn)，你點(diǎn)擊的某個(gè)鏈接或路由已經(jīng)提前加載好了。

更好的是，因?yàn)閿?shù)據(jù)也通過(guò)一個(gè)專用的方法getInitialProps，我們能提前加載而不用怕引發(fā)不必要的服務(wù)端負(fù)載和數(shù)據(jù)加載。這比之前的web 1.0預(yù)加載機(jī)制強(qiáng)多了。

我們創(chuàng)建Next.js是因?yàn)槲覀兿嘈磐瑯?gòu)的應(yīng)用是未來(lái)web應(yīng)用的重要組成部分。

提前綁定和編譯（預(yù)測(cè)）是一個(gè)非常有效的部署方式。

部署一個(gè)Next.js應(yīng)用只需要運(yùn)行next build和next start。

你的package.json文件和以下類似：

{
  "name": "my-app",
  "dependencies": {
    "next": "*"
  },
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  }
}

這樣，你就簡(jiǎn)單的部署成功了。

最后，這是我們對(duì)于這個(gè)特定問(wèn)題的貢獻(xiàn)。我們認(rèn)為他在靈活性和好用的默認(rèn)配置之間取得了不錯(cuò)的平衡，不過(guò)這肯定不是解決所有問(wèn)題的方法。

在接下來(lái)的幾周里，我們希望能更多的討論和思考其他解決方案，比如Vue.JS, Gatsby, Ember+Fastboot等等。
如果你有興趣加入我們的社區(qū)，做出自己的貢獻(xiàn)，請(qǐng)一定要加入zeit.chat, 查看issues，參與未來(lái)方向的討論。