Next.js是服务端渲染呈现的React应用程序的简约框架,这个项目通过配置Next.js+Mbox实现的一个Demo.
模块
- react-helmet
- mobx v5.0.3
- next
- less
- Express v4.16.3
- React v16.4.2
- next-routes
- antd v3.9.2
预览图
功能
- 服务端渲染
- js按需加载
- Mobx状态管理器
其它
使用了动态路由跳转使用next-routes提供的方法
路由声明routers/index.js
const routes = require('next-routes');
module.exports = routes()
.add('demo', '/demo/:id', 'demo')
.add('nestedRouter', '/nested_router', 'nestedRouter')
.add('link1', '/nested_router/link1', 'nestedRouter/link1')
.add('link2', '/nested_router/link2', 'nestedRouter/link2')
.add('netWork', '/netWork', 'netWork')
.add('structChart', '/struct_chart', 'structChart')使用Link路由跳转
import {Link} from '../routes'
export default () => (
<div>
<div>Welcome to Next.js!</div>
<Link route='blog' params={{slug: 'hello-world'}}>
<a>Hello world</a>
</Link>
或者
<Link route='/blog/hello-world'>
<a>Hello world</a>
</Link>
</div>
)使用Router跳转路由
import React from 'react'
import {Router} from '../routes'
export default class Blog extends React.Component {
handleClick () {
// With route name and params
Router.pushRoute('blog', {slug: 'hello-world'})
// With route URL
Router.pushRoute('/blog/hello-world')
}
render () {
return (
<div>
<div>{this.props.url.query.slug}</div>
<button onClick={this.handleClick}>Home</button>
</div>
)
}
}如何使用
安装
npm install 或 yarn(推荐)开发环境运行
npm run dev产品环境运行
npm start打包HTML静态文件
npm run biuld