摘要：中文站點(diǎn)中文站當(dāng)前翻譯版本為。注意將不能使用在子組件中。只能使用在頁(yè)面中。替換路由組件默認(rèn)將新推入路由棧中。以防服務(wù)端渲染發(fā)生錯(cuò)誤，建議事件寫(xiě)在生命周期里。禁止文件路由默認(rèn)情況，將會(huì)把下的所有文件匹配路由如渲染為如果你的項(xiàng)目使用

Next.js 是一個(gè)輕量級(jí)的 React 服務(wù)端渲染應(yīng)用框架。

Next.js中文站點(diǎn) http://nextjs.frontendx.cn

Next.js中文站Github https://github.com/raoenhui/next-site-cn

當(dāng)前翻譯版本為 7.0.0-canary.8。

怎么使用

安裝

代碼自動(dòng)分割

CSS

支持嵌入樣式

內(nèi)嵌樣式

使用 CSS / Sass / Less / Stylus files

靜態(tài)文件服務(wù)（如圖像)

獲取數(shù)據(jù)以及組件生命周期

路由

用法

URL 對(duì)象

替換路由

組件支持點(diǎn)擊事件onClick

暴露href給子元素

禁止?jié)L動(dòng)到頁(yè)面頂部

命令式

攔截器 popstate

URL 對(duì)象用法

路由事件

淺層路由

高階組件

預(yù)加載頁(yè)面

用法

命令式 prefetch 寫(xiě)法

自定義服務(wù)端路由

禁止文件路由

動(dòng)態(tài)前綴

動(dòng)態(tài)導(dǎo)入

1. 基礎(chǔ)支持 (同樣支持 SSR)

2. 自定義加載組件

3. 禁止使用 SSR

4. 同時(shí)加載多個(gè)模塊

自定義

自定義

自定義錯(cuò)誤處理

渲染內(nèi)置錯(cuò)誤頁(yè)面

自定義配置

設(shè)置自定義構(gòu)建目錄

禁止 etag 生成

配置 onDemandEntries

配置頁(yè)面后綴名解析擴(kuò)展

配置構(gòu)建 ID

自定義 webpack 配置

自定義 babel 配置

暴露配置到服務(wù)端和客戶端

啟動(dòng)服務(wù)選擇 hostname

CDN 支持前綴

項(xiàng)目部署

瀏覽器支持

導(dǎo)出靜態(tài)頁(yè)面

使用

限制

多 zone

怎么定義一個(gè) zone

怎么合并他們

技巧

FAQ

貢獻(xiàn)

作者

安裝它:

npm install --save next react react-dom

將下面腳本添加到 package.json 中:

{
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  }
}

下面, 文件系統(tǒng)是主要的 API. 每個(gè).js 文件將變成一個(gè)路由，自動(dòng)處理和渲染。

新建 ./pages/index.js 到你的項(xiàng)目中:

export default () => 
Welcome to next.js!

運(yùn)行 npm run dev 命令并打開(kāi) http://localhost:3000。 如果你想使用其他端口，可運(yùn)行 npm run dev -- -p <設(shè)置端口號(hào)>.

目前為止我們可以了解到:

自動(dòng)打包編譯 (使用 webpack 和 babel)

熱加載

以 ./pages作為服務(wù)端的渲染和索引

Static file serving. ./static/ is mapped to /static/ (given you create a ./static/ directory inside your project)

靜態(tài)文件服務(wù). ./static/ 映射到 /static/ (可以 創(chuàng)建一個(gè)靜態(tài)目錄 在你的項(xiàng)目中)

這里有個(gè)簡(jiǎn)單的案例，可以下載看看 sample app - nextgram

每個(gè)頁(yè)面只會(huì)導(dǎo)入import中綁定以及被用到的代碼. 也就是說(shuō)并不會(huì)加載不需要的代碼!

import cowsay from "cowsay-browser"

export default () =>
  
    {cowsay.say({ text: "hi there!" })}
  

我們綁定 styled-jsx 來(lái)生成獨(dú)立作用域的 CSS. 目標(biāo)是支持 "shadow CSS",但是 不支持獨(dú)立模塊作用域的 JS.

export default () =>
  

    Hello world
    
scoped!
    
    
  

想查看更多案例可以點(diǎn)擊 styled-jsx documentation查看.

Examples

有些情況可以使用 CSS 內(nèi)嵌 JS 寫(xiě)法。如下所示：

export default () => 
hi there

更復(fù)雜的內(nèi)嵌樣式解決方案，特別是服務(wù)端渲染的時(shí)樣式更改。我們可以通過(guò)包裹自定義 Document，來(lái)添加樣式，案例如下：custom

支持用.css, .scss, .less or .styl，需要配置默認(rèn)文件 next.config.js，具體可查看下面鏈接

@zeit/next-css

@zeit/next-sass

@zeit/next-less

@zeit/next-stylus

在根目錄下新建文件夾叫static。代碼可以通過(guò)/static/來(lái)引入相關(guān)的靜態(tài)資源。

export default () => 

_注意：不要自定義靜態(tài)文件夾的名字，只能叫static ，因?yàn)橹挥羞@個(gè)名字 Next.js 才會(huì)把它當(dāng)作靜態(tài)資源。

我們?cè)O(shè)置一個(gè)內(nèi)置組件來(lái)裝載到頁(yè)面中。

import Head from "next/head"

export default () =>
  

    
      
      
    
    
Hello world!
  

我們定義key屬性來(lái)避免重復(fù)的標(biāo)簽，保證只渲染一次，如下所示：

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

    
      
      
    
    
      
    
    
Hello world!
  
)

只有第二個(gè)才被渲染。

注意：在卸載組件時(shí)，的內(nèi)容將被清除。請(qǐng)確保每個(gè)頁(yè)面都在其定義了所需要的內(nèi)容，而不是假設(shè)其他頁(yè)面已經(jīng)加過(guò)了

如果你需要一個(gè)有狀態(tài)、生命周期或有初始數(shù)據(jù)的 React 組件（而不是上面的無(wú)狀態(tài)函數(shù)），如下所示：

import React from "react"

export default class extends React.Component {
  static async getInitialProps({ req }) {
    const userAgent = req ? req.headers["user-agent"] : navigator.userAgent
    return { userAgent }
  }

  render() {
    return (
      

        Hello World {this.props.userAgent}
      
    )
  }
}

相信你注意到，當(dāng)頁(yè)面渲染時(shí)加載數(shù)據(jù)，我們使用了一個(gè)異步方法getInitialProps。它能異步獲取 JS 普通對(duì)象，并綁定在props上

當(dāng)服務(wù)渲染時(shí)，getInitialProps將會(huì)把數(shù)據(jù)序列化，就像JSON.stringify。所以確保getInitialProps返回的是一個(gè)普通 JS 對(duì)象，而不是Date, Map 或 Set類型。

當(dāng)頁(yè)面初次加載時(shí)，getInitialProps只會(huì)在服務(wù)端執(zhí)行一次。getInitialProps只有在路由切換的時(shí)候（如Link組件跳轉(zhuǎn)或路由自定義跳轉(zhuǎn)）時(shí)，客戶端的才會(huì)被執(zhí)行。

當(dāng)頁(yè)面初始化加載時(shí)，getInitialProps只會(huì)加載在服務(wù)端。只有當(dāng)路由跳轉(zhuǎn)（Link組件跳轉(zhuǎn)或 API 方法跳轉(zhuǎn)）時(shí)，客戶端才會(huì)執(zhí)行getInitialProps。

注意：getInitialProps將不能使用在子組件中。只能使用在pages頁(yè)面中。

只有服務(wù)端用到的模塊放在getInitialProps里，請(qǐng)確保正確的導(dǎo)入了它們，可參考import them properly。
否則會(huì)拖慢你的應(yīng)用速度。

你也可以給無(wú)狀態(tài)組件定義getInitialProps：

const Page = ({ stars }) =>
  

    Next stars: {stars}
  

Page.getInitialProps = async ({ req }) => {
  const res = await fetch("https://api.github.com/repos/zeit/next.js")
  const json = await res.json()
  return { stars: json.stargazers_count }
}

export default Page

getInitialProps入?yún)?duì)象的屬性如下：

pathname - URL 的 path 部分

query - URL 的 query 部分，并被解析成對(duì)象

asPath - 顯示在瀏覽器中的實(shí)際路徑（包含查詢部分），為String類型

req - HTTP 請(qǐng)求對(duì)象 (只有服務(wù)器端有)

res - HTTP 返回對(duì)象 (只有服務(wù)器端有)

jsonPageRes - 獲取數(shù)據(jù)響應(yīng)對(duì)象 (只有客戶端有)

err - 渲染過(guò)程中的任何錯(cuò)誤

可以用 組件實(shí)現(xiàn)客戶端的路由切換。

// pages/index.js
import Link from "next/link"

export default () =>
  

    Click{" "}
    
      here
    {" "}
    to read more
  

// pages/about.js
export default () => 
Welcome to About!

注意：可以使用使鏈接和預(yù)加載在后臺(tái)同時(shí)進(jìn)行，來(lái)達(dá)到頁(yè)面的最佳性能。

客戶端路由行為與瀏覽器很相似：

組件獲取

如果組件定義了getInitialProps，數(shù)據(jù)獲取了。如果有錯(cuò)誤情況將會(huì)渲染 _error.js。

1和2都完成了，pushState執(zhí)行，新組件被渲染。

如果需要注入pathname, query 或 asPath到你組件中，你可以使用withRouter。

URL 對(duì)象

組件接收 URL 對(duì)象，而且它會(huì)自動(dòng)格式化生成 URL 字符串

// pages/index.js
import Link from "next/link"

export default () =>
  

    Click{" "}
    
      here
    {" "}
    to read more
  

將生成 URL 字符串/about?name=Zeit，你可以使用任何在Node.js URL module documentation定義過(guò)的屬性。

替換路由

組件默認(rèn)將新 url 推入路由棧中。你可以使用replace屬性來(lái)防止添加新輸入。

// pages/index.js
import Link from "next/link"

export default () =>
  

    Click{" "}
    
      here
    {" "}
    to read more
  

組件支持點(diǎn)擊事件 onClick

支持每個(gè)組件所支持的onClick事件。如果你不提供標(biāo)簽，只會(huì)處理onClick事件而href將不起作用。

// pages/index.js
import Link from "next/link"

export default () =>
  

    Click{" "}
    
      
    
  

如子元素是一個(gè)沒(méi)有 href 屬性的標(biāo)簽，我們將會(huì)指定它以免用戶重復(fù)操作。然而有些時(shí)候，我們需要里面有標(biāo)簽，但是Link組件不會(huì)被識(shí)別成超鏈接，結(jié)果不能將href傳遞給子元素。在這種場(chǎng)景下，你可以定義一個(gè)Link組件中的布爾屬性passHref，強(qiáng)制將href傳遞給子元素。

import Link from "next/link"
import Unexpected_A from "third-library"

export default ({ href, name }) =>
  
    
      {name}
    
  

的默認(rèn)行為就是滾到頁(yè)面頂部。當(dāng)有 hash 定義時(shí)（＃），頁(yè)面將會(huì)滾動(dòng)到對(duì)應(yīng)的 id 上，就像標(biāo)簽一樣。為了預(yù)防滾動(dòng)到頂部，可以給加
scroll={false}屬性：

Disables scrolling
Changes with scrolling to top

你也可以用next/router實(shí)現(xiàn)客戶端路由切換

import Router from "next/router"

export default () =>
  

    Click  Router.push("/about")}>here to read more
  

有些情況（比如使用custom router），你可能想監(jiān)聽(tīng)popstate，在路由跳轉(zhuǎn)前做一些動(dòng)作。
比如，你可以操作 request 或強(qiáng)制 SSR 刷新

import Router from "next/router"

Router.beforePopState(({ url, as, options }) => {
  // I only want to allow these two routes!
  if (as !== "/" || as !== "/other") {
    // Have SSR render bad routes as a 404.
    window.location.href = as
    return false
  }

  return true
});

如果你在beforePopState中返回 false，Router將不會(huì)執(zhí)行popstate事件。
例如Disabling File-System Routing。

以上Router對(duì)象的 API 如下：

route - 當(dāng)前路由的String類型

pathname - 不包含查詢內(nèi)容的當(dāng)前路徑，為String類型

query - 查詢內(nèi)容，被解析成Object類型. 默認(rèn)為{}

asPath - 展現(xiàn)在瀏覽器上的實(shí)際路徑，包含查詢內(nèi)容，為String類型

push(url, as=url) - 頁(yè)面渲染第一個(gè)參數(shù) url 的頁(yè)面，瀏覽器欄顯示的是第二個(gè)參數(shù) url

replace(url, as=url) - performs a replaceState call with the given url

beforePopState(cb=function) - 在路由器處理事件之前攔截.

push 和 replace 函數(shù)的第二個(gè)參數(shù)as，是為了裝飾 URL 作用。如果你在服務(wù)器端設(shè)置了自定義路由將會(huì)起作用。

URL 對(duì)象用法

push 或 replace可接收的 URL 對(duì)象（組件的 URL 對(duì)象一樣）來(lái)生成 URL。

import Router from "next/router"

const handler = () =>
  Router.push({
    pathname: "/about",
    query: { name: "Zeit" }
  })

export default () =>
  

    Click here to read more
  

也可以像組件一樣添加額外的參數(shù)。

路由事件

你可以監(jiān)聽(tīng)路由相關(guān)事件。
下面是事件支持列表：

routeChangeStart(url) - 路由開(kāi)始切換時(shí)觸發(fā)

routeChangeComplete(url) - 完成路由切換時(shí)觸發(fā)

routeChangeError(err, url) - 路由切換報(bào)錯(cuò)時(shí)觸發(fā)

beforeHistoryChange(url) - 瀏覽器 history 模式開(kāi)始切換時(shí)觸發(fā)

hashChangeStart(url) - 開(kāi)始切換 hash 值但是沒(méi)有切換頁(yè)面路由時(shí)觸發(fā)

hashChangeComplete(url) - 完成切換 hash 值但是沒(méi)有切換頁(yè)面路由時(shí)觸發(fā)

這里的url是指顯示在瀏覽器中的 url。如果你用了Router.push(url, as)（或類似的方法），那瀏覽器中的 url 將會(huì)顯示 as 的值。

下面是如何正確使用路由事件routeChangeStart的例子：

const handleRouteChange = url => {
  console.log("App is changing to: ", url)
}

Router.events.on("routeChangeStart", handleRouteChange)

如果你不想長(zhǎng)期監(jiān)聽(tīng)該事件，你可以用off事件去取消監(jiān)聽(tīng)：

Router.events.off("routeChangeStart", handleRouteChange)

如果路由加載被取消（比如快速連續(xù)雙擊鏈接）

Router.events.on("routeChangeError", (err, url) => {
  if (err.cancelled) {
    console.log(`Route to ${url} was cancelled!`)
  }
})

淺層路由

淺層路由允許你改變 URL 但是不執(zhí)行getInitialProps生命周期。你可以加載相同頁(yè)面的 URL，得到更新后的路由屬性pathname和query，并不失去 state 狀態(tài)。

你可以給Router.push 或 Router.replace方法加shallow: true參數(shù)。如下面的例子所示：

// Current URL is "/"
const href = "/?counter=10"
const as = href
Router.push(href, as, { shallow: true })

現(xiàn)在 URL 更新為/?counter=10。在組件里查看this.props.router.query你將會(huì)看到更新的 URL。

你可以在componentdidupdate鉤子函數(shù)中監(jiān)聽(tīng) URL 的變化。

componentDidUpdate(prevProps) {
  const { pathname, query } = this.props.router
  // verify props have changed to avoid an infinite loop
  if (query.id !== prevProps.router.query.id) {
    // fetch data based on the new query
  }
}

注意:
淺層路由只作用于相同 URL 的參數(shù)改變，比如我們假定有個(gè)其他路由about，而你向下面代碼樣運(yùn)行:
Router.push("/?counter=10", "/about?counter=10", { shallow: true })
那么這將會(huì)出現(xiàn)新頁(yè)面，即使我們加了淺層路由，但是它還是會(huì)卸載當(dāng)前頁(yè)，會(huì)加載新的頁(yè)面并觸發(fā)新頁(yè)面的getInitialProps。

如果你想應(yīng)用里每個(gè)組件都處理路由對(duì)象，你可以使用withRouter高階組件。下面是如何使用它：

import { withRouter } from "next/router"

const ActiveLink = ({ children, router, href }) => {
  const style = {
    marginRight: 10,
    color: router.pathname === href? "red" : "black"
  }

  const handleClick = (e) => {
    e.preventDefault()
    router.push(href)
  }

  return (
    
      {children}
    
  )
}

export default withRouter(ActiveLink)

上面路由對(duì)象的 API 可以參考next/router.

?? 只有生產(chǎn)環(huán)境才有此功能 ??

Next.js 有允許你預(yù)加載頁(yè)面的 API。

用 Next.js 服務(wù)端渲染你的頁(yè)面，可以達(dá)到所有你應(yīng)用里所有未來(lái)會(huì)跳轉(zhuǎn)的路徑即時(shí)響應(yīng)，有效的應(yīng)用 Next.js，可以通過(guò)預(yù)加載應(yīng)用程序的功能，最大程度的初始化網(wǎng)站性能。查看更多.

Next.js 的預(yù)加載功能只預(yù)加載 JS 代碼。當(dāng)頁(yè)面渲染時(shí)，你可能需要等待數(shù)據(jù)請(qǐng)求。

你可以給添加 prefetch 屬性，Next.js 將會(huì)在后臺(tái)預(yù)加載這些頁(yè)面。

import Link from "next/link"

// example header component
export default () =>
  

大多數(shù)預(yù)加載是通過(guò)處理的，但是我們還提供了命令式 API 用于更復(fù)雜的場(chǎng)景。

import { withRouter } from "next/router"

export default withRouter(({ router }) =>
  

     setTimeout(() => router.push("/dynamic"), 100)}>
      A route transition will happen after 100ms
    
    {// but we can prefetch it!
    router.prefetch("/dynamic")}
  
)

路由實(shí)例只允許在應(yīng)用程序的客戶端。以防服務(wù)端渲染發(fā)生錯(cuò)誤，建議 prefetch 事件寫(xiě)在componentDidMount()生命周期里。

import React from "react"
import { withRouter } from "next/router"

class MyLink extends React.Component {
  componentDidMount() {
    const { router } = this.props
    router.prefetch("/dynamic")
  }
  
  render() {
    const { router } = this.props
    return (
       

         setTimeout(() => router.push("/dynamic"), 100)}>
          A route transition will happen after 100ms
        
      
   
    )
  }
}

export default withRouter(MyLink)

一般你使用next start命令來(lái)啟動(dòng) next 服務(wù)，你還可以編寫(xiě)代碼來(lái)自定義路由，如使用路由正則等。

當(dāng)使用自定義服務(wù)文件，如下面例子所示叫 server.js 時(shí)，確保你更新了 package.json 中的腳本。

{
  "scripts": {
    "dev": "node server.js",
    "build": "next build",
    "start": "NODE_ENV=production node server.js"
  }
}

下面這個(gè)例子使 /a 路由解析為./pages/b，以及/b 路由解析為./pages/a;

// This file doesn"t go through babel or webpack transformation.
// Make sure the syntax and sources this file requires are compatible with the current node version you are running
// See https://github.com/zeit/next.js/issues/1245 for discussions on Universal Webpack or universal Babel
const { createServer } = require("http")
const { parse } = require("url")
const next = require("next")

const dev = process.env.NODE_ENV !== "production"
const app = next({ dev })
const handle = app.getRequestHandler()

app.prepare().then(() => {
  createServer((req, res) => {
    // Be sure to pass `true` as the second argument to `url.parse`.
    // This tells it to parse the query portion of the URL.
    const parsedUrl = parse(req.url, true)
    const { pathname, query } = parsedUrl

    if (pathname === "/a") {
      app.render(req, res, "/b", query)
    } else if (pathname === "/b") {
      app.render(req, res, "/a", query)
    } else {
      handle(req, res, parsedUrl)
    }
  }).listen(3000, err => {
    if (err) throw err
    console.log("> Ready on http://localhost:3000")
  })
})

next的 API 如下所示

next(opts: object)

opts 的屬性如下:

dev (boolean) 判斷 Next.js 應(yīng)用是否在開(kāi)發(fā)環(huán)境 - 默認(rèn)false

dir (string) Next 項(xiàng)目路徑 - 默認(rèn)"."

quiet (boolean) 是否隱藏包含服務(wù)端消息在內(nèi)的錯(cuò)誤信息 - 默認(rèn)false

conf (object) 與next.config.js的對(duì)象相同 - 默認(rèn){}

生產(chǎn)環(huán)境的話，可以更改 package.json 里的start腳本為NODE_ENV=production node server.js。

默認(rèn)情況，Next將會(huì)把/pages下的所有文件匹配路由（如/pages/some-file.js 渲染為 site.com/some-file）

如果你的項(xiàng)目使用自定義路由，那么有可能不同的路由會(huì)得到相同的內(nèi)容，可以優(yōu)化 SEO 和用戶體驗(yàn)。

禁止路由鏈接到/pages下的文件，只需設(shè)置next.config.js文件如下所示：

// next.config.js
module.exports = {
  useFileSystemPublicRoutes: false
}

注意useFileSystemPublicRoutes只禁止服務(wù)端的文件路由；但是客戶端的還是禁止不了。

你如果想配置客戶端路由不能跳轉(zhuǎn)文件路由，可以參考Intercepting popstate。

有時(shí)你需要設(shè)置動(dòng)態(tài)前綴，可以在請(qǐng)求時(shí)設(shè)置assetPrefix改變前綴。

使用方法如下：

const next = require("next")
const micro = require("micro")

const dev = process.env.NODE_ENV !== "production"
const app = next({ dev })
const handleNextRequests = app.getRequestHandler()

app.prepare().then(() => {
  const server = micro((req, res) => {
    // Add assetPrefix support based on the hostname
    if (req.headers.host === "my-app.com") {
      app.setAssetPrefix("http://cdn.com/myapp")
    } else {
      app.setAssetPrefix("")
    }

    handleNextRequests(req, res)
  })

  server.listen(port, (err) => {
    if (err) {
      throw err
    }

    console.log(`> Ready on http://localhost:${port}`)
  })
})

ext.js 支持 JavaScript 的 TC39 提議dynamic import proposal。你可以動(dòng)態(tài)導(dǎo)入 JavaScript 模塊（如 React 組件）。

動(dòng)態(tài)導(dǎo)入相當(dāng)于把代碼分成各個(gè)塊管理。Next.js 服務(wù)端動(dòng)態(tài)導(dǎo)入功能，你可以做很多炫酷事情。

下面介紹一些動(dòng)態(tài)導(dǎo)入方式：

import dynamic from "next/dynamic"

const DynamicComponent = dynamic(import("../components/hello"))

export default () =>
  

    

    
    
HOME PAGE is here!
  

import dynamic from "next/dynamic"

const DynamicComponentWithCustomLoading = dynamic(
  import("../components/hello2"),
  {
    loading: () => 
...
  }
)

export default () =>
  

    

    
    
HOME PAGE is here!
  

import dynamic from "next/dynamic"

const DynamicComponentWithNoSSR = dynamic(import("../components/hello3"), {
  ssr: false
})

export default () =>
  

    

    
    
HOME PAGE is here!
  

import dynamic from "next/dynamic"

const HelloBundle = dynamic({
  modules: () => {
    const components = {
      Hello1: import("../components/hello1"),
      Hello2: import("../components/hello2")
    }

    return components
  },
  render: (props, { Hello1, Hello2 }) =>
    

      

        {props.title}
      
      
      
    
})

export default () => 

組件來(lái)初始化頁(yè)面。你可以重寫(xiě)它來(lái)控制頁(yè)面初始化，如下面的事：

當(dāng)頁(yè)面變化時(shí)保持頁(yè)面布局

當(dāng)路由變化時(shí)保持頁(yè)面狀態(tài)

使用componentDidCatch自定義處理錯(cuò)誤

注入額外數(shù)據(jù)到頁(yè)面里 (如 GraphQL 查詢)

重寫(xiě)的話，新建./pages/_app.js文件，重寫(xiě) App 模塊如下所示：

import App, {Container} from "next/app"
import React from "react"

export default class MyApp extends App {
  static async getInitialProps ({ Component, router, ctx }) {
    let pageProps = {}

    if (Component.getInitialProps) {
      pageProps = await Component.getInitialProps(ctx)
    }

    return {pageProps}
  }

  render () {
    const {Component, pageProps} = this.props
    return 
      
    
  }
}

在服務(wù)端呈現(xiàn)

初始化服務(wù)端時(shí)添加文檔標(biāo)記元素

通常實(shí)現(xiàn)服務(wù)端渲染會(huì)使用一些 css-in-js 庫(kù)，如styled-components, glamorous 或 emotion。styled-jsx是 Next.js 自帶默認(rèn)使用的 css-in-js 庫(kù)

Next.js會(huì)自動(dòng)定義文檔標(biāo)記，比如，你從來(lái)不需要添加, 等。如果想自定義文檔標(biāo)記，你可以新建./pages/_document.js，然后擴(kuò)展Document類：

// _document is only rendered on the server side and not on the client side
// Event handlers like onClick can"t be added to this file

// ./pages/_document.js
import Document, { Head, Main, NextScript } from "next/document"

export default class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx)
    return { ...initialProps }
  }

  render() {
    return (
      
        
          
        
        
          

          
        
      
    )
  }
}

鉤子getInitialProps接收到的參數(shù)ctx對(duì)象都是一樣的

回調(diào)函數(shù)renderPage是會(huì)執(zhí)行 React 渲染邏輯的函數(shù)(同步)，這種做法有助于此函數(shù)支持一些類似于 Aphrodite 的 renderStatic 等一些服務(wù)器端渲染容器。

注意：

import React from "react"

export default class Error extends React.Component {
  static getInitialProps({ res, err }) {
    const statusCode = res ? res.statusCode : err ? err.statusCode : null;
    return { statusCode }
  }

  render() {
    return (
      

        {this.props.statusCode
          ? `An error ${this.props.statusCode} occurred on server`
          : "An error occurred on client"}
      
    )
  }
}

import React from "react"
import Error from "next/error"
import fetch from "isomorphic-unfetch"

export default class Page extends React.Component {
  static async getInitialProps() {
    const res = await fetch("https://api.github.com/repos/zeit/next.js")
    const statusCode = res.statusCode > 200 ? res.statusCode : false
    const json = await res.json()

    return { statusCode, stars: json.stargazers_count }
  }

  render() {
    if (this.props.statusCode) {
      return 
    }

    return (
      

        Next stars: {this.props.stars}
      
    )
  }
}

如果你自定義了個(gè)錯(cuò)誤頁(yè)面，你可以引入自己的錯(cuò)誤頁(yè)面來(lái)代替next/error

// next.config.js
module.exports = {
  /* config options here */
}

module.exports = (phase, {defaultConfig}) => {
  //
  // https://github.com/zeit/
  return {
    /* config options here */
  }
}

const {PHASE_DEVELOPMENT_SERVER} = require("next/constants")
module.exports = (phase, {defaultConfig}) => {
  if(phase === PHASE_DEVELOPMENT_SERVER) {
    return {
      /* development only config options here */
    }
  }

  return {
    /* config options for all phases except development here */
  }
}

// next.config.js
module.exports = {
  distDir: "build"
}

// next.config.js
module.exports = {
  generateEtags: false
}

module.exports = {
  onDemandEntries: {
    // period (in ms) where the server will keep pages in the buffer
    maxInactiveAge: 25 * 1000,
    // number of pages that should be kept simultaneously without being disposed
    pagesBufferLength: 2,
  }
}

// next.config.js
module.exports = {
  pageExtensions: ["jsx", "js"]
}

// next.config.js
module.exports = {
  generateBuildId: async () => {
    // For example get the latest git commit hash here
    return "my-build-id"
  }
}

const withTypescript = require("@zeit/next-typescript")
const withSass = require("@zeit/next-sass")

module.exports = withTypescript(withSass({
  webpack(config, options) {
    // Further custom configuration here
    return config
  }
}))

// next.config.js is not transformed by Babel. So you can only use javascript features supported by your version of Node.js.

module.exports = {
  webpack: (config, { buildId, dev, isServer, defaultLoaders }) => {
    // Perform customizations to webpack config
    // Important: return the modified config
    return config
  },
  webpackDevMiddleware: config => {
    // Perform customizations to webpack dev middleware config
    // Important: return the modified config
    return config
  }
}

// Example next.config.js for adding a loader that depends on babel-loader
// This source was taken from the @zeit/next-mdx plugin source: 
// https://github.com/zeit/next-plugins/blob/master/packages/next-mdx
module.exports = {
  webpack: (config, {}) => {
    config.module.rules.push({
      test: /.mdx/,
      use: [
        options.defaultLoaders.babel,
        {
          loader: "@mdx-js/loader",
          options: pluginOptions.options
        }
      ]
    })

    return config
  }
}

{
  "presets": ["next/babel"],
  "plugins": []
}

{
  "presets": [
    ["next/babel", {
      "preset-env": {},
      "transform-runtime": {},
      "styled-jsx": {},
      "class-properties": {}
    }]
  ],
  "plugins": []
}

// next.config.js
module.exports = {
  serverRuntimeConfig: { // Will only be available on the server side
    mySecret: "secret"
  },
  publicRuntimeConfig: { // Will be available on both server and client
    staticFolder: "/static",
    mySecret: process.env.MY_SECRET // Pass through env variables
  }
}

// pages/index.js
import getConfig from "next/config"
// Only holds serverRuntimeConfig and publicRuntimeConfig from next.config.js nothing else.
const {serverRuntimeConfig, publicRuntimeConfig} = getConfig()

console.log(serverRuntimeConfig.mySecret) // Will only be available on the server side
console.log(publicRuntimeConfig.staticFolder) // Will be available on both server and client

export default () => 

  

const isProd = process.env.NODE_ENV === "production"
module.exports = {
  // You may only need to add assetPrefix in the production.
  assetPrefix: isProd ? "https://cdn.mydomain.com" : ""
}

next build
next start

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

next build
next export

// next.config.js
module.exports = {
  exportPathMap: async function (defaultPathMap) {
    return {
      "/": { page: "/" },
      "/about": { page: "/about" },
      "/readme.md": { page: "/readme" },
      "/p/hello-nextjs": { page: "/post", query: { title: "hello-nextjs" } },
      "/p/learn-nextjs": { page: "/post", query: { title: "learn-nextjs" } },
      "/p/deploy-nextjs": { page: "/post", query: { title: "deploy-nextjs" } }
    }
  }
}

注意：如果 path 的結(jié)尾是目錄名，則將導(dǎo)出/dir-name/index.html，但是如果結(jié)尾有擴(kuò)展名，將會(huì)導(dǎo)出對(duì)應(yīng)的文件，如上/readme.md。如果你使用.html以外的擴(kuò)展名解析文件時(shí)，你需要設(shè)置 header 的Content-Type頭為"text/html".

next build
next export

{
  "scripts": {
    "build": "next build",
    "export": "npm run build && next export"
  }
}

npm run export

你也可以自定義輸出目錄?？梢赃\(yùn)行next export -h命令查看幫助。

now

所以你不能預(yù)構(gòu)建 HTML 文件時(shí)動(dòng)態(tài)渲染 HTML 頁(yè)面。如果你想動(dòng)態(tài)渲染可以運(yùn)行next start或其他自定義服務(wù)端 API。

與 microservices 觀念類似, 只是應(yīng)用于前端應(yīng)用.

{
  "rules": [
    {"pathname": "/docs**", "method":["GET", "POST", "OPTIONS"], "dest": "https://docs.my-app.com"},
    {"pathname": "/**", "dest": "https://ui.my-app.com"}
  ]
}