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

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