Next.js 6 與 Nextjs.org

今年的 ZEIT Day Keynote 以重點介紹我們的開源項目開始，包括展示 Next.js 的指標。它在 GitHub 上獲得超過 25000 顆星，並且已經有超過 10000 個網站使用它，我們對它的成長感到非常驚訝，並且樂見越來越多的項目依賴它。

今天，我們很自豪地推出可投入生產環境的 Next.js 6，其特色包括：

零設定靜態匯出。預設情況下無需 next.config.js
_app.js，一個擴充點，可啟用頁面轉場、錯誤邊界等等
支援 Babel 7 和 Fragment 語法 <>
擴展的整合測試套件，高度重視安全性
核心程式碼庫中的 Flow 註釋

除了 6.0 版本之外，我們還將在 Next.js 的專屬首頁 nextjs.org 上展示 Next.js 的功能，其中包含：

所有 Next.js 文件都集中在一處。無需再在 GitHub 上查找 README 檔案
將 https://learnnextjs.com 合併到 https://nextjs.dev.org.tw/learn
展示使用 Next.js 建構的最令人印象深刻的網站

靜態 React 應用程式

Next.js 著重於預先渲染的概念，以此實現高性能。預先渲染有兩種形式：

伺服器渲染：每個請求都會觸發一次渲染。因此，終端使用者無需等待下載任何 JS 即可開始使用資料
靜態渲染：我們輸出靜態檔案，可以直接提供服務，而無需在伺服器上執行任何程式碼

到目前為止，Next.js 中的靜態匯出功能非常強大，但使用起來不夠簡便。即使沒有使用自訂路由，也需要設定手動路由映射。

在 Next.js 6 中，我們會根據 pages/ 目錄的內容自動為您產生路由映射。如果您未使用進階的自訂路由，則無需對 next.config.js 進行任何修改。只需執行

next build
next export

舉例來說，您可以查看這個網站，它是靜態部署到Vercel的。這個網站的原始碼也是可用的。

應用程式組件

Next.js 提供了一個稱為 _document.js 的擴展點。如果定義了它，您就可以覆寫應用程式的最頂層文件，也就是渲染 <html> 元素的文件。

_document.js 允許強大的擴展性，但它也有一些嚴重的限制。例如，React 無法在客戶端直接渲染 <html> 或 <body>，因此 _document.js 主要限於初始的預渲染階段。

為了啟用其他一些強大的使用案例，我們引入了 _app.js，它是包裝每個頁面外部的頂層組件。

_document.js 和 _app.js 之間的一些差異

讓我們看看定義 _app.js 可以啟用的一些使用案例。

頁面轉場

頁面轉場範例：由 Xavier Cazalot 製作的 page-transitions-app-next.vercel.app (原始碼)

在此範例中，每個頁面都可以獨立存取、預先渲染和延遲載入。然而，當我們在客戶端進行轉換時，就能實現流暢的動畫效果。

更佳的 Apollo 和 Redux 整合

我們已經有許多整合資料和狀態管理框架（例如 Apollo 和 Redux）的範例。

然而，使用 _app.js 現在可以更輕鬆地將這些框架包含進來。以下是一些範例：

Apollo (原始碼)
Redux (原始碼)

更佳的錯誤處理

React 提供了一個稱為 componentDidCatch 的元件方法，讓您能夠捕捉和處理從客戶端巢狀元件中冒出的例外。

在許多情況下，由於這些例外的意外性質，您可能希望在頂層統一處理所有例外。

因此，_app.js 是一個適合定義 componentDidCatch 邏輯的地方。這裡有一個範例展示錯誤處理邊界實際運作的樣子（原始碼）。

Babel 7

我們已將 Babel 升級到最新版本：7。它帶來了一些很棒的新功能和改進。

JSX 片段

React 16.2 引入了 Fragment API，它允許您表示元素列表，而無需將它們包裝在任意的 HTML 元素中，例如 <div>。

render() {
  return <React.Fragment>
    <A />,
    <B />
  </React.Fragment>
}

撰寫這些程式碼可能很繁瑣，使用 Next.js 6，您可以使用新的 JSX 片段語法來簡化建立片段。

render() {
  return <>
    <A />,
    <B />
  </>
}

巢狀 .babelrc

src/
  .babelrc      # General .babelrc
  components/
    i18n/
      .babelrc  # This .babelrc only applies to this directory

一流的 TypeScript 支援

當我們宣布通用 webpack 時，我們指出可以透過 ts-loader 使用 TypeScript，因為我們現在在伺服器端和客戶端都運行 webpack。

Nextjs.org

我們非常高興地介紹全新的 nextjs.org，由 Next.js 核心貢獻者 Jimmy Moon 建置。

首先，我們重點介紹一個加速影片，展示如何在 5 分鐘內從零開始建立具有伺服器渲染的 PWA

我們所有文件都在同一個地方

逐步學習

以前，我們會建議初學者前往 https://learnnextjs.com 以獲得有關如何開始使用 Next.js 的逐步指南（包含測驗！）

現在我們已將其直接整合到 nextjs.org/learn，讓學習更加輕鬆上手。