Next.js 6.1

我們今天很榮幸推出正式發布的 Next.js 6.1，其特色包括

提升熱重載的可靠性
程式碼庫改進
Next.js codemods

除了 Next.js 6.1 的發布之外，我們也很興奮地宣布 nextjs.org 現在是開放原始碼

提升熱重載的可靠性

在 Next.js 6.1 之前的版本中，Next.js 代表使用者實作了 react-hot-loader。這個函式庫會在熱重載之間保持 React 狀態。

如此一來，react-hot-loader 為 React 新增了一些非標準行為，例如，它會忽略 shouldComponentUpdate，且元素 type 最後會變成代理元件，而非實際的 React 元件。

為了確保 Next.js 盡可能接近預設的 React，我們已移除 react-hot-loader 作為依賴項，這確保了開發和生產模式在行為上更為接近。請注意，Next.js 的熱重載功能並未移除，熱重載一直以來都是由 Next.js 內部處理。

熱重載 Typescript 和其他自訂擴展名

預設情況下，Next.js 會自動尋找 pages 目錄內的任何 .js 或 .jsx 檔案來定義路由。

隨著 Next.js 5 中通用 webpack 的引入，有可能擁有編譯為 js 的頂層頁面。Typescript 就是一個很好的例子，它使用 .ts 和 .tsx。

pageExtensions 是 next.config.js 中的一個組態鍵，旨在允許 Next.js 外掛程式定義應視為頁面的擴展名。例如 @zeit/next-typescript 定義了 .ts 和 .tsx，或者 @zeit/next-mdx，其文件說明了如何擁有頂層 .mdx 頁面。

先前在實作 pageExtensions 時，Next.js 外掛程式需要實作用於熱重載的 hot-self-accept-loader。現在已不再需要，當將擴展名新增至 pageExtensions 時，會自動套用 hot-self-accept-loader。

程式碼庫改進

最近，我們一直在為即將推出的功能鋪路，這牽涉到一些幕後變更，從長遠來看將能改善程式碼品質。

其中一項變更是將 server/build 目錄移至頂層 build。這讓新的貢獻者更容易找到 webpack 和 babel 組態。

我們也一直專注於在整個程式碼庫中新增 Flow 類型。

我們所做的變更中，對使用者而言更明顯的一項是將 .next/dist 重新命名為 .next/server。.next 目錄保存了建置輸出。例如，當您執行 next build 時，結果會儲存在 .next 中。

預先渲染檔案現在位於 server 目錄中

相同常數的出現次數已移至一個通用檔案中：constants.js

Next.js codemods

當 Next.js 6.0 發布時，頁面元件上神奇注入的 url 屬性已被棄用。url 即將淘汰的原因是我們希望讓事情變得非常可預測且明確。憑空冒出一個神奇的 url 屬性無助於實現這個目標。

取得與 url 屬性相同屬性的建議方法是使用 withRouter

page.js

// old
class Page extends React.Component {
  render() {
    const { url } = this.props;
    return <div>{url.pathname}</div>;
  }
}
export default Page;

在 Next.js 6 之前的版本中，如何使用 url 存取路徑名稱

page.js

// new
import { withRouter } from 'next/router';
class Page extends React.Component {
  render() {
    const { router } = this.props;
    return <div>{router.pathname}</div>;
  }
}
export default withRouter(Page);

在 Next.js 6 之後的版本中，應如何使用由 withRouter 注入的 router 存取路徑名稱

由於我們致力於保持 Next.js 應用程式的升級路徑簡單，因此我們著手建立一種將 url 用法升級到 withRouter 的簡單方法。

這項努力的成果是 next‑codemod，這是一個 codemod 函式庫，可讓您輕鬆地將特定已棄用的功能升級到其新用法，就像執行一個命令一樣簡單。

我們提供的第一個 codemod 是 url-to-withrouter，它會自動轉換許多使用 url 的案例，改為 withRouter。

終端機

  jscodeshift -t ./url-to-withrouter.js pages/**/*.js

這會將 url 的用法轉換為 withRouter。

在此處閱讀更多資訊

貢獻 Next.js

Next.js 社群正在成長，已有超過 450 位貢獻者至少將 1 次提交併入 Next.js 核心或範例中。

有很多種方式可以回饋 Next.js

加入社群並在 GitHub 上提供建議
貢獻常見用例的範例：範例目錄
查看 good first issue 和 help wanted 標籤在 GitHub 上

有 30 個標有 good first issue 標籤的開放 issue。為新的貢獻者提供貢獻的機會。

提升熱重載的可靠性

熱重載 Typescript 和其他自訂擴展名

程式碼庫改進

Next.js codemods

貢獻 Next.js

nextjs.org 開放原始碼

未來

Webpack 4

無伺服器 Next.js