我們很高興推出Next.js 4，它支持React 16，并引入了默認(rèn)樣式引擎styled-jsx的主要升級(jí)，支持動(dòng)態(tài)樣式。
引入了主要的性能改進(jìn)：使用Next.js 4的SSR 速度提高了2.6倍，樣式初始化速度提高了20％。根據(jù)CSS-in-JS基準(zhǔn)，Next.js樣式現(xiàn)在是任何庫中最快的。
React 16
React 16引入了許多改進(jìn)，更新依賴：
npm i next@latest react@latest react-dom@latest
使用Next.js 3.0，我們可以在我們的一個(gè)模型頁面上每秒獲得約105個(gè)請(qǐng)求：
和每秒272個(gè)請(qǐng)求與Next.js 4 React 16（一個(gè)2.6倍的改善！）
這使應(yīng)對(duì)那些我們結(jié)合使用Next.js時(shí)所觀察到的服務(wù)器渲染性能相似的水平與preact。
Styled-jsx 2
styled-jsx是一個(gè)babel插件，用于添加對(duì)React組件中的樣式的支持。這有效地使您能夠使用具有范圍和隔離的CSS的單個(gè)文件組件：
export default () => (
<div>
Hello there <span>my friend</span>
<style jsx>{`
/* this style only applies to the span within lexical scope */
span { color: red; }
`}</style>
</div>
)
CSS可以和你的JSX一起嵌入。它就能起作用！
直到今天，還支持在您的樣式中嵌入常量，這對(duì)于適用于您的CSS的各種配置很有幫助：
import {COLOR} from './css-config';
export default () => (
<div>
Hello there <span>my friend</span>
<style jsx>{`
/* this style only applies to the span within lexical scope */
span { color: ${COLOR}; }
`}</style>
</div>
)
在這種情況下，COLOR是1.x中支持的常量
至于帶有Next.js 4的帶風(fēng)格的jsx 2，你現(xiàn)在可以從范圍內(nèi)嵌入變量和表達(dá)式，它們可以來自組件道具或狀態(tài)。
export default ({ color }) => (
<div>
Hello there <span>my friend</span>
<style jsx>{`
/* this style only applies to the span within lexical scope */
span { color: ${color}; }
`}</style>
</div>
)
在這種情況下，color是一個(gè)React 屬性，可以隨時(shí)間變化！
這樣可以減少內(nèi)聯(lián)樣式與靜態(tài)樣式結(jié)合使用的需要，這會(huì)在讀取組件代碼時(shí)造成一些混淆。它還改進(jìn)了用于
動(dòng)畫和主題等用例的樣式-jsx。
style-jsx 2包含顯著的性能改進(jìn)。與靜態(tài)樣式一起使用時(shí)，它是在應(yīng)用程序中使用樣式的最快方式。使用動(dòng)態(tài)樣式時(shí)，它是最快的（只有在將來才會(huì)變得更快！）
完整的發(fā)行注記
微小的變化
- 將導(dǎo)航視為散列哈希導(dǎo)航
- 通過conf導(dǎo)出功能
- 保留一些緩沖頁面，不會(huì)被丟棄。
- 添加webpack-bundle-size-analyzer
- 將文檔添加到onDemandEntries配置
- 使用-firebase托管示例更新
- 允許在exportPathMap中使用文件名
- 為babel-preset-env + babel-plugin-transform-runtime配置opts
補(bǔ)丁
- 自述文件改進(jìn)
- 更新hash-statics示例以支持子目錄
- 示例：改進(jìn)ReasonML
- 添加了Fastify
- 更優(yōu)雅的應(yīng)用antd
- 升級(jí)依賴關(guān)系
- 修正了preact和inferno的依賴關(guān)系
- 修復(fù)代碼片段的編碼風(fēng)格
- 將頁面可見性api綁定到需求pinger
- 只使用嚴(yán)格的依賴關(guān)系
- 修復(fù)server / export.js中的錯(cuò)誤消息
- 公開buildId自定義webpack配置
- 新增了PropType
- 將“asPath”信息添加到url對(duì)象
