Next.js 2.0发布

Next.js 2.0今天正式发布。可能有部分人没太听过这个开源框架。 Next.js是一个服务器端React框架。对服务器端渲染了解的话，就很好理解了，这个框架利用Express框架和React帮我们默认实现了服务器端渲染。拿来即用。

2.0版更简单易用

安装next.js后，只要把React组件放到pages目录，然后运行next命令，就能够实现代码分割、路由、热加载以及前后端通用渲染(universal rendering)等众多功能。

对于开发，只要运行next，而对于生产环境，只需要运行next build和next start，所以很容易。

Next.js可以使用整合npm类库，js生态圈，它的文档也五分钟可读完，所以它也很简单

API接口

在第一版的时候，还不支持动态路由，现在支持使用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) => {
    return handle(req, res)
  })

  server.listen(3000)
})

安装react

现在开发时需要安装react和react-dom，好处是更独立，你可以用自己需要的react版本。

npm install next react react-dom --save

组件支持CSS

之前的next/css被弃用了，换成了styled-jsx，提供更完整的CSS支持

export default () => (
  <div>
    <p>hi there</p>
    <style jsx>{`
      p {
        color: red;
      }
    `}</style>
  </div>
)

预加载

给<Link>组件加了一个prefetch属性，提升性能

export default () => (
  <div>
    <Link href="/next-page" prefetch>Go to the next page</Link>
  </div>
)

一个示例

Next News

<a href="https://github.com/now-examples/next-news">代码链接</a>

更多内容请看<a href="https://zeit.co/blog/next2">官方发布内容</a>

极客学社--IT人的学习成长社区