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);

在使用 withRouter 注入的 router 的 Next.js 6 之后的版本中，应该如何访问路径名

由于我们致力于保持 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 次 commit。

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

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

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

改进的热重载可靠性

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

代码库改进

Next.js 代码修改器

为 Next.js 贡献代码

nextjs.org 开源

未来

Webpack 4

Serverless Next.js