Next.js 6.1 版本发布

今天我们自豪地推出生产就绪的 Next.js 6.1，主要特性包括：

增强的热重载可靠性
代码库改进
Next.js 代码转换工具

除了 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 代码转换工具

当 Next.js 6.0 发布时，页面组件中自动注入的 url 属性被弃用。url 被移除的原因是我们希望使事情非常可预测和明确。有一个凭空出现的魔法 url 属性无助于实现这一目标。

获取与 url 属性相同属性的推荐方式是使用 withRouter：

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 核心或示例提交了至少 1 次提交。

有许多方式可以为 Next.js 做贡献：

加入社区并在 GitHub 上提供建议
贡献常见用例的示例：示例目录
查看 good first issue 和 help wanted 标签在 GitHub 上

有 30 个带有 good first issue 标签的开放问题。为新贡献者提供贡献的机会。

增强的热重载可靠性

支持 TypeScript 及其他自定义扩展的热重载

代码库改进

Next.js 代码转换工具

为 Next.js 做贡献

nextjs.org 开源

未来展望

Webpack 4

无服务器 Next.js