Next.js 2.0
今天，我们很自豪地向世界介绍Next 2.0。接下来是我们所做的每个新功能和改进的快速总结。
React变得容易和简单
Next.js是一个非常纤薄而强大的框架。将React组件放在一个pages目录中并运行next，您将得到自动代码分割，路由，热代码重新加载和通用（服务器端和客户端）的渲染。
这很容易，因为它是一个用于开发（next）的命令，还有两个（next build和）用于生产就绪的应用程序。 next start
这很简单，因为它组成非常好。它与React和JavaScript（npm）生态系统的其他部分相互配合。
它也很小。检查自述文件：整个框架的文档是一个5分钟的阅读。
新！想通过示例逐步学习？查看Learn Next.js教程！
程序化API
当我们启动Next.js时，没有办法做动态路由或加载您的自定义服务器代码。我们这样做是因为我们相信提前和经常运送。
现在，您可以运行node index.js以启动您自己的自定义服务器，并完全控制路由和渲染管道。这使强大的功能，如花式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实现Reddit风格的花式URL
带上你自己的React
要开始一个项目，你现在需要引入next和两个额外的依赖，react react-dom。
$ npm install --save next react react-dom
组件CSS支持
我们的使命是让Next.js尽可能熟悉Web Platform上的开发人员。为此，现在不推荐使用Babel转换，这种转换给我们提供了有限的（孤立的）完整的CSS支持。 next/css styled-jsx
这是一个CSS本地，无冲突，服务器呈现和每个实例注入一次的组件：
export default () => (
<div>
<p>hi there</p>
<style jsx>{`
p {
color: red;
}
`}</style>
</div>
)
样式p仅适用于在范围内静态定义的JSX标签
预取
我们实现prefetch了<Link>组件的属性。
export default () => (
<div>
<Link href="/next-page" prefetch>Go to the next page</Link>
</div>
)
就像这样，你可以得到一个“SPA”的性能，没有最初的下载和大捆绑的昂贵的启动惩罚。与服务器渲染相结合，这通常意味着非常低的性能。
Next News
我们认为比TodoMVC更好的“Hello World”应用程序实际上是...Hacker News!！
我们的实施“ Next News”完全由服务器呈现，通过Firebase查询数据，并在新的投票进行时实时更新。请查看next-news.now.sh上的演示。
image.png
