Back返回部落格

Next.js 6 與 Nextjs.org

Next.js 6 提供零配置靜態導出、App 元件、Babel 7 等新功能

今年的 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，包含：

靜態 React 應用程式

Next.js 的核心概念是透過預渲染 (pre-rendering) 來實現高效能。預渲染有兩種形式：

  • 伺服器渲染 (Server rendering)： 每個請求都會觸發一次渲染。因此，終端使用者無需等待任何 JS 下載即可開始獲取數據
  • 靜態渲染 (Static rendering)： 輸出靜態檔案，可直接提供服務而無需在伺服器上執行任何程式碼

在此之前，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，現在整合這些框架更加簡單。以下是一些範例：

更好的錯誤處理

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 語法來簡化片段的創建：

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

嵌套的 .babelrc

如果你的 Next.js 應用程式中有一個目錄需要不同的 Babel 配置，現在可以在該目錄中包含一個特定範圍的 .babelrc 檔案：

src/
  .babelrc      # 通用的 .babelrc
  components/
    i18n/
      .babelrc  # 這個 .babelrc 僅適用於此目錄

一流的 TypeScript 支援

當我們宣布通用 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 建構的專案展示