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