Next.js是服务端渲染呈现的React应用程序的简约框架,这个项目通过配置Next.js+Mbox实现的一个Demo.
GitHub地址:https://github.com/Tecode/next-react
网站地址:https://soscoon.com/article/10059
##欢迎start
安装
git clone https://github.com/Tecode/next-react.git
npm install Or yarn
模块
- react-helmet
- mobx v5.0.3
- next
- less
- Express v4.16.3
- React v16.4.2
- next-routes
- antd v3.9.2
功能
- SSR
- Automatic code splitting
其它
使用了动态路由跳转使用next-routes提供的方法
- Link example
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>
or
<Link route='/blog/hello-world'>
<a>Hello world</a>
</Link>
</div>
)
- Router example
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
or
yarn(推荐)
开发环境运行
npm run dev
产品环境运行
npm start
打包HTML静态文件
npm run biuld