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 codemods

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

获取 url 属性相同属性的推荐方法是使用 withRouter。

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

在 Next.js 6 之前的版本中，如何使用 url 访问 pathname。

// 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 访问 pathname。

由于我们致力于保持 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 核心或示例贡献了至少 1 次提交。

有许多方式可以回馈 Next.js

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

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

改进的热重载可靠性

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

代码库改进

Next.js codemods

为 Next.js 贡献

nextjs.org 开源

未来

Webpack 4

无服务器 Next.js