Next.js 2.0发布

作者: Shannon_JS | 来源:发表于2017-03-27 20:50 被阅读356次

    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人的学习成长社区

    相关文章

      网友评论

        本文标题:Next.js 2.0发布

        本文链接:https://www.haomeiwen.com/subject/bvtdottx.html