Next.js 6.1

我們今天很榮幸推出正式版的 Next.js 6.1，主要特性包括：

提升熱重載 (hot reloading) 可靠性
程式碼庫改進
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 配置，現在可以支援編譯成 JavaScript 的頂層頁面檔案。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 代碼轉換工具

當 Next.js 6.0 發布時，頁面元件中自動注入的 url 屬性被標記為棄用。移除 url 屬性的原因是我們希望讓一切行為更加可預測和明確。憑空出現一個神奇的 url 屬性並不符合這個目標。

推薦的替代方式是使用 withRouter 來獲取原本 url 屬性提供的相同屬性：

page.js

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

在 Next.js 6 之前的版本中，使用 url 取得路徑名稱的方式

page.js

// 新版寫法
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，這是一個代碼轉換工具庫，能讓升級特定棄用功能到新用法變得像執行一個命令那麼簡單。

我們提供的第一個代碼轉換工具是 url-to-withrouter，它能自動將許多使用 url 的情況轉換為 withRouter。

Terminal

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

這會將 url 的使用轉換為 withRouter

了解更多

貢獻 Next.js

Next.js 社群正在成長，已有超過 450 位貢獻者向 Next.js 核心或範例程式碼提交了至少一次提交。

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

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

目前有 30 個開啟的 good first issue 標籤議題，為新貢獻者提供參與機會。

提升熱重載可靠性

支援 TypeScript 及其他自訂擴展名的熱重載

程式碼庫改進

Next.js 代碼轉換工具

貢獻 Next.js

nextjs.org 開源

未來展望

Webpack 4

無伺服器 Next.js