Next.js 6 與 Nextjs.org | Next.js 框架

今年，ZEIT Day 主題演講首先重點介紹了我們的開源專案，包括展示 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。該網站的原始碼也可用。

App 组件

Next.js 提供了一個名為 _document.js 的擴展點。如果已定義，它允許您覆蓋應用程式的最頂層文件，該文件會渲染 <html> 元素。

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

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

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

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

頁面轉換效果

頁面轉換效果範例：page-transitions-app-next.vercel.app，作者為 Xavier Cazalot (原始碼)

在本範例中，每個頁面都可以獨立存取、預先渲染和延遲加載。但是，當我們在客戶端轉換時，可以實現流暢的動畫效果。

更好的 Apollo 和 Redux 整合

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

然而，有了 _app.js，現在可以更輕鬆地包含這些框架。以下是一些範例

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

更好的錯誤處理

React 提供了一個名為 componentDidCatch 的組件方法，使您能夠捕獲和處理從客戶端嵌套組件中冒出的異常。

在許多情況下，由於這些異常的意外性質，您可能希望在頂層平等地處理所有這些異常。

因此，_app.js 是定義 componentDidCatch 邏輯的好地方。這是一個錯誤處理邊界實際運作的範例 (原始碼：原始碼)

Babel 7

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

JSX Fragments

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

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

這樣寫可能會很繁瑣，使用 Next.js 6，您可以使用新的 JSX fragment 語法來簡化 fragments 的創建

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

巢狀 .babelrc

如果您的 Next.js 應用程式中有一個巢狀目錄需要不同的 Babel 配置，現在可以在該目錄中專門包含一個作用域限定的 .babelrc 檔案

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

一流的 TypeScript 支援

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

Babel 7 具有對 TypeScript 的內建支援（以前 Babel 僅支援 Flow）。

要使用它，只需安裝最新版本的 @zeit/next-typescript 或查看此範例。

Nextjs.org

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

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

nextjs.org 的開場影片

我們文件的集中地

當您需要快速查找某些內容時，只需前往 nextjs.org/docs

文件將始終反映最新的穩定版本

循序漸進地學習

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

現在我們已將其直接整合到 nextjs.org/learn 中，以使入門學習更加容易

開始學習 Next.js 的最簡單方法

獲得啟發

我們現在展示一些基於 Next.js 构建的美觀網站和應用程式的展示。前往 nextjs.org/showcase 以獲得啟發，或提交您自己的作品！

使用 Next.js 构建的專案展示