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

// 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，一个代码模组库，使将特定弃用功能升级到其新用法变得像运行一个命令一样简单。

我们提供的第一个代码模组是 url-to-withrouter，它自动转换许多使用 url 到 withRouter 的情况。

终端

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

这将转换 url 到 withRouter 的用法。

在此处阅读更多内容

为 Next.js 做出贡献

Next.js 社区正在发展壮大，已有超过 450 位贡献者至少向 Next.js 核心或示例提交了一个 commit。

有很多方法可以为 Next.js 做出贡献

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

有 30 个带有 good first issue 标签的未解决问题。为新的贡献者提供了贡献的机会。

提高了热重载的可靠性

热重载 Typescript 和其他自定义扩展

代码库改进

Next.js 代码模组

为 Next.js 做出贡献

nextjs.org 开源

未来

Webpack 4

Serverless Next.js