摘要：中文站點中文站當前翻譯版本為。注意將不能使用在子組件中。只能使用在頁面中。替換路由組件默認將新推入路由棧中。以防服務端渲染發生錯誤，建議事件寫在生命周期里。禁止文件路由默認情況，將會把下的所有文件匹配路由如渲染為如果你的項目使用

Next.js 是一個輕量級的 React 服務端渲染應用框架。

Next.js中文站點 http://nextjs.frontendx.cn

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

當前翻譯版本為 7.0.0-canary.8。

怎么使用

安裝

代碼自動分割

CSS

支持嵌入樣式

內嵌樣式

使用 CSS / Sass / Less / Stylus files

靜態文件服務（如圖像)

獲取數據以及組件生命周期

路由

用法

URL 對象

替換路由

組件支持點擊事件onClick

暴露href給子元素

禁止滾動到頁面頂部

命令式

攔截器 popstate

URL 對象用法

路由事件

淺層路由

高階組件

預加載頁面

用法

命令式 prefetch 寫法

自定義服務端路由

禁止文件路由

動態前綴

動態導入

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

2. 自定義加載組件

3. 禁止使用 SSR

4. 同時加載多個模塊

自定義

自定義

自定義錯誤處理

渲染內置錯誤頁面

自定義配置

設置自定義構建目錄

禁止 etag 生成

配置 onDemandEntries

配置頁面后綴名解析擴展

配置構建 ID

自定義 webpack 配置

自定義 babel 配置

暴露配置到服務端和客戶端

啟動服務選擇 hostname

CDN 支持前綴

項目部署

瀏覽器支持

導出靜態頁面

使用

限制

多 zone

怎么定義一個 zone

怎么合并他們

技巧

FAQ

貢獻

作者

安裝它:

npm install --save next react react-dom

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

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

下面, 文件系統是主要的 API. 每個.js 文件將變成一個路由，自動處理和渲染。

新建 ./pages/index.js 到你的項目中:

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

運行 npm run dev 命令并打開 http://localhost:3000。 如果你想使用其他端口，可運行 npm run dev -- -p <設置端口號>.

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

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

熱加載

以 ./pages作為服務端的渲染和索引

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

靜態文件服務. ./static/ 映射到 /static/ (可以 創建一個靜態目錄 在你的項目中)

這里有個簡單的案例，可以下載看看 sample app - nextgram

每個頁面只會導入import中綁定以及被用到的代碼. 也就是說并不會加載不需要的代碼!

import cowsay from "cowsay-browser"

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

我們綁定 styled-jsx 來生成獨立作用域的 CSS. 目標是支持 "shadow CSS",但是 不支持獨立模塊作用域的 JS.

export default () =>
  

    Hello world
    
scoped!
    
    
  

想查看更多案例可以點擊 styled-jsx documentation查看.

Examples

有些情況可以使用 CSS 內嵌 JS 寫法。如下所示：

export default () => 
hi there

更復雜的內嵌樣式解決方案，特別是服務端渲染的時樣式更改。我們可以通過包裹自定義 Document，來添加樣式，案例如下：custom

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

@zeit/next-css

@zeit/next-sass

@zeit/next-less

@zeit/next-stylus

在根目錄下新建文件夾叫static。代碼可以通過/static/來引入相關的靜態資源。

export default () => 

_注意：不要自定義靜態文件夾的名字，只能叫static ，因為只有這個名字 Next.js 才會把它當作靜態資源。

我們設置一個內置組件來裝載到頁面中。

import Head from "next/head"

export default () =>
  

    
      
      
    
    
Hello world!
  

我們定義key屬性來避免重復的標簽，保證只渲染一次，如下所示：

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

    
      
      
    
    
      
    
    
Hello world!
  
)

只有第二個才被渲染。

注意：在卸載組件時，的內容將被清除。請確保每個頁面都在其定義了所需要的內容，而不是假設其他頁面已經加過了

如果你需要一個有狀態、生命周期或有初始數據的 React 組件（而不是上面的無狀態函數），如下所示：

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}
      
    )
  }
}

相信你注意到，當頁面渲染時加載數據，我們使用了一個異步方法getInitialProps。它能異步獲取 JS 普通對象，并綁定在props上

當服務渲染時，getInitialProps將會把數據序列化，就像JSON.stringify。所以確保getInitialProps返回的是一個普通 JS 對象，而不是Date, Map 或 Set類型。

當頁面初次加載時，getInitialProps只會在服務端執行一次。getInitialProps只有在路由切換的時候（如Link組件跳轉或路由自定義跳轉）時，客戶端的才會被執行。

當頁面初始化加載時，getInitialProps只會加載在服務端。只有當路由跳轉（Link組件跳轉或 API 方法跳轉）時，客戶端才會執行getInitialProps。

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

只有服務端用到的模塊放在getInitialProps里，請確保正確的導入了它們，可參考import them properly。
否則會拖慢你的應用速度。

你也可以給無狀態組件定義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入參對象的屬性如下：

pathname - URL 的 path 部分

query - URL 的 query 部分，并被解析成對象

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

req - HTTP 請求對象 (只有服務器端有)

res - HTTP 返回對象 (只有服務器端有)

jsonPageRes - 獲取數據響應對象 (只有客戶端有)

err - 渲染過程中的任何錯誤

可以用 組件實現客戶端的路由切換。

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

export default () =>
  

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

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

注意：可以使用使鏈接和預加載在后臺同時進行，來達到頁面的最佳性能。

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

組件獲取

如果組件定義了getInitialProps，數據獲取了。如果有錯誤情況將會渲染 _error.js。

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

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

URL 對象

組件接收 URL 對象，而且它會自動格式化生成 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定義過的屬性。

替換路由

組件默認將新 url 推入路由棧中。你可以使用replace屬性來防止添加新輸入。

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

export default () =>
  

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

組件支持點擊事件 onClick

支持每個組件所支持的onClick事件。如果你不提供標簽，只會處理onClick事件而href將不起作用。

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

export default () =>
  

    Click{" "}
    
      
    
  

如子元素是一個沒有 href 屬性的標簽，我們將會指定它以免用戶重復操作。然而有些時候，我們需要里面有標簽，但是Link組件不會被識別成超鏈接，結果不能將href傳遞給子元素。在這種場景下，你可以定義一個Link組件中的布爾屬性passHref，強制將href傳遞給子元素。

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

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

的默認行為就是滾到頁面頂部。當有 hash 定義時（＃），頁面將會滾動到對應的 id 上，就像標簽一樣。為了預防滾動到頂部，可以給加
scroll={false}屬性：

Disables scrolling
Changes with scrolling to top

你也可以用next/router實現客戶端路由切換

import Router from "next/router"

export default () =>
  

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

有些情況（比如使用custom router），你可能想監聽popstate，在路由跳轉前做一些動作。
比如，你可以操作 request 或強制 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將不會執行popstate事件。
例如Disabling File-System Routing。

以上Router對象的 API 如下：

route - 當前路由的String類型

pathname - 不包含查詢內容的當前路徑，為String類型

query - 查詢內容，被解析成Object類型. 默認為{}

asPath - 展現在瀏覽器上的實際路徑，包含查詢內容，為String類型

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

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

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

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

URL 對象用法

push 或 replace可接收的 URL 對象（組件的 URL 對象一樣）來生成 URL。

import Router from "next/router"

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

export default () =>
  

    Click here to read more
  

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

路由事件

你可以監聽路由相關事件。
下面是事件支持列表：

routeChangeStart(url) - 路由開始切換時觸發

routeChangeComplete(url) - 完成路由切換時觸發

routeChangeError(err, url) - 路由切換報錯時觸發

beforeHistoryChange(url) - 瀏覽器 history 模式開始切換時觸發

hashChangeStart(url) - 開始切換 hash 值但是沒有切換頁面路由時觸發

hashChangeComplete(url) - 完成切換 hash 值但是沒有切換頁面路由時觸發

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

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

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

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

如果你不想長期監聽該事件，你可以用off事件去取消監聽：

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

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

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

淺層路由

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

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

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

現在 URL 更新為/?counter=10。在組件里查看this.props.router.query你將會看到更新的 URL。

你可以在componentdidupdate鉤子函數中監聽 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 的參數改變，比如我們假定有個其他路由about，而你向下面代碼樣運行:
Router.push("/?counter=10", "/about?counter=10", { shallow: true })
那么這將會出現新頁面，即使我們加了淺層路由，但是它還是會卸載當前頁，會加載新的頁面并觸發新頁面的getInitialProps。

如果你想應用里每個組件都處理路由對象，你可以使用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)

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

?? 只有生產環境才有此功能 ??

Next.js 有允許你預加載頁面的 API。

用 Next.js 服務端渲染你的頁面，可以達到所有你應用里所有未來會跳轉的路徑即時響應，有效的應用 Next.js，可以通過預加載應用程序的功能，最大程度的初始化網站性能。查看更多.

Next.js 的預加載功能只預加載 JS 代碼。當頁面渲染時，你可能需要等待數據請求。

你可以給添加 prefetch 屬性，Next.js 將會在后臺預加載這些頁面。

import Link from "next/link"

// example header component
export default () =>
  

大多數預加載是通過處理的，但是我們還提供了命令式 API 用于更復雜的場景。

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")}
  
)

路由實例只允許在應用程序的客戶端。以防服務端渲染發生錯誤，建議 prefetch 事件寫在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命令來啟動 next 服務，你還可以編寫代碼來自定義路由，如使用路由正則等。

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

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

下面這個例子使 /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 應用是否在開發環境 - 默認false

dir (string) Next 項目路徑 - 默認"."

quiet (boolean) 是否隱藏包含服務端消息在內的錯誤信息 - 默認false

conf (object) 與next.config.js的對象相同 - 默認{}

生產環境的話，可以更改 package.json 里的start腳本為NODE_ENV=production node server.js。

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

如果你的項目使用自定義路由，那么有可能不同的路由會得到相同的內容，可以優化 SEO 和用戶體驗。

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

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

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

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

有時你需要設置動態前綴，可以在請求時設置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。你可以動態導入 JavaScript 模塊（如 React 組件）。

動態導入相當于把代碼分成各個塊管理。Next.js 服務端動態導入功能，你可以做很多炫酷事情。

下面介紹一些動態導入方式：

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 () => 

組件來初始化頁面。你可以重寫它來控制頁面初始化，如下面的事：

當頁面變化時保持頁面布局

當路由變化時保持頁面狀態

使用componentDidCatch自定義處理錯誤

注入額外數據到頁面里 (如 GraphQL 查詢)

重寫的話，新建./pages/_app.js文件，重寫 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 
      
    
  }
}

在服務端呈現

初始化服務端時添加文檔標記元素

通常實現服務端渲染會使用一些 css-in-js 庫，如styled-components, glamorous 或 emotion。styled-jsx是 Next.js 自帶默認使用的 css-in-js 庫

Next.js會自動定義文檔標記，比如，你從來不需要添加, 等。如果想自定義文檔標記，你可以新建./pages/_document.js，然后擴展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接收到的參數ctx對象都是一樣的

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

注意：

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}
      
    )
  }
}

如果你自定義了個錯誤頁面，你可以引入自己的錯誤頁面來代替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 的結尾是目錄名，則將導出/dir-name/index.html，但是如果結尾有擴展名，將會導出對應的文件，如上/readme.md。如果你使用.html以外的擴展名解析文件時，你需要設置 header 的Content-Type頭為"text/html".

next build
next export

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

npm run export

你也可以自定義輸出目錄。可以運行next export -h命令查看幫助。

now

所以你不能預構建 HTML 文件時動態渲染 HTML 頁面。如果你想動態渲染可以運行next start或其他自定義服務端 API。

與 microservices 觀念類似, 只是應用于前端應用.

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