今天，我們很自豪地向世界介紹Next 2.0。接下來是我們所做的每個新功能和改進(jìn)的快速總結(jié)。
React變得容易和簡單
Next.js是一個非常纖薄而強(qiáng)大的框架。將React組件放在一個pages目錄中并運(yùn)行next，您將得到自動代碼分割，路由，熱代碼重新加載和通用（服務(wù)器端和客戶端）的渲染。
這很容易，因?yàn)樗且粋€用于開發(fā)（next）的命令，還有兩個（next build和）用于生產(chǎn)就緒的應(yīng)用程序。 next start
這很簡單，因?yàn)樗M成非常好。它與React和JavaScript（npm）生態(tài)系統(tǒng)的其他部分相互配合。
它也很小。檢查自述文件：整個框架的文檔是一個5分鐘的閱讀。
新！想通過示例逐步學(xué)習(xí)？查看Learn Next.js教程！
程序化API
當(dāng)我們啟動Next.js時，沒有辦法做動態(tài)路由或加載您的自定義服務(wù)器代碼。我們這樣做是因?yàn)槲覀兿嘈盘崆昂徒?jīng)常運(yùn)送。
現(xiàn)在，您可以運(yùn)行node index.js以啟動您自己的自定義服務(wù)器，并完全控制路由和渲染管道。這使強(qiáng)大的功能，如花式URL或自定義緩存方案。
const express = require('express')
const next = require('next')
const dev = process.env.NODE_ENV !== 'production'
const app = next({ dev })
const handle = app.getRequestHandler()
app.prepare().then(() => {
const server = express()
server.get('/r/:subreddit', (req, res) => {
return app.render(req, res, '/b', {
...req.query,
subreddit: req.params.subreddit
})
})
server.get('*', (req, res) => {
handle(req, res)
})
server.listen(3000)
})
使用Express和Next.js實(shí)現(xiàn)Reddit風(fēng)格的花式URL
帶上你自己的React
要開始一個項(xiàng)目，你現(xiàn)在需要引入next和兩個額外的依賴，react react-dom。
$ npm install --save next react react-dom
組件CSS支持
我們的使命是讓Next.js盡可能熟悉Web Platform上的開發(fā)人員。為此，現(xiàn)在不推薦使用Babel轉(zhuǎn)換，這種轉(zhuǎn)換給我們提供了有限的（孤立的）完整的CSS支持。 next/css styled-jsx
這是一個CSS本地，無沖突，服務(wù)器呈現(xiàn)和每個實(shí)例注入一次的組件：
export default () => (
<div>
<p>hi there</p>
<style jsx>{`
p {
color: red;
}
`}</style>
</div>
)
樣式p僅適用于在范圍內(nèi)靜態(tài)定義的JSX標(biāo)簽
預(yù)取
我們實(shí)現(xiàn)prefetch了<Link>組件的屬性。
export default () => (
<div>
<Link href="/next-page" prefetch>Go to the next page</Link>
</div>
)
就像這樣，你可以得到一個“SPA”的性能，沒有最初的下載和大捆綁的昂貴的啟動懲罰。與服務(wù)器渲染相結(jié)合，這通常意味著非常低的性能。
Next News
我們認(rèn)為比TodoMVC更好的“Hello World”應(yīng)用程序?qū)嶋H上是...Hacker News!！
我們的實(shí)施“ Next News”完全由服務(wù)器呈現(xiàn)，通過Firebase查詢數(shù)據(jù)，并在新的投票進(jìn)行時實(shí)時更新。請查看next-news.now.sh上的演示。
