Next.js 4: React 16 and styled-jsx 2

我们很高兴推出Next.js 4，它支持React 16，并引入了默认样式引擎styled-jsx的主要升级，支持动态样式。

引入了主要的性能改进：使用Next.js 4的SSR 速度提高了2.6倍，样式初始化速度提高了20％。根据CSS-in-JS基准，Next.js样式现在是任何库中最快的。

React 16引入了许多改进，更新依赖：

npm i next@latest react@latest react-dom@latest

使用Next.js 3.0，我们可以在我们的一个模型页面上每秒获得约105个请求：

基于Next.js 3.0 SSR的5000个请求的基准

和每秒272个请求与Next.js 4 React 16（一个2.6倍的改善！）

于对Next.js 4 SSR的5000个请求的基准。快2.6倍！

这使应对那些我们结合使用Next.js时所观察到的服务器渲染性能相似的水平与preact。

styled-jsx是一个babel插件，用于添加对React组件中的样式的支持。这有效地使您能够使用具有范围和隔离的CSS的单个文件组件：

export default () => (
    
      Hello there my friend
      
    
  )

CSS可以和你的JSX一起嵌入。它就能起作用！

直到今天，还支持在您的样式中嵌入常量，这对于适用于您的CSS的各种配置很有帮助：

import {COLOR} from './css-config';
  export default () => (
    
      Hello there my friend
      
    
  )

在这种情况下，COLOR是1.x中支持的常量

至于带有Next.js 4的带风格的jsx 2，你现在可以从范围内嵌入变量和表达式，它们可以来自组件道具或状态。

export default ({ color }) => (
    
      Hello there my friend
      
    
  )

在这种情况下，color是一个React 属性，可以随时间变化！

这样可以减少内联样式与静态样式结合使用的需要，这会在读取组件代码时造成一些混淆。它还改进了用于
动画和主题等用例的样式-jsx。

style-jsx 2包含显着的性能改进。与静态样式一起使用时，它是在应用程序中使用样式的最快方式。使用动态样式时，它是最快的（只有在将来才会变得更快！）

本文翻译自：https://zeit.co/blog/next4