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

有很多方法可以回馈 Next.js

加入社区并在GitHub上提供建议
贡献常见用例的示例：示例目录
查看适合新手 Issue 和欢迎协助标签在 GitHub 上的 Issue。

目前有 30 个带有适合新手 Issue 标签的未解决 Issue，为新贡献者提供了参与贡献的机会。

改进的热重载可靠性

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

代码库改进

Next.js 代码转换工具

为 Next.js 做贡献

nextjs.org 开源

未来

Webpack 4

无服务器 Next.js