next.js 简单使用

一个react.js ?服务器端渲染开源项目（不只是服务器端渲染，直接也可以生成纯静态站点）类似的解决方案有好多，比如react.js 自身的服务器渲染方案（但是使用起来就是比较怪异）gatsbyjs 也是一个不错的解决方案

// 依赖npm install --save next react react-dom// package.json 添加启动脚本{ ?"scripts": { ???"dev": "next", ???"build": "next build", ???"start": "next start" ?}}

// 创建目录mkdir ?pages// 简单代码touch index.jsnano index.jsexport default () => <div>Welcome to next.js!</div>// 启动npm run devok ?就是这么简单

本身进行了优化，而且和以前的react.js 项目是不一样的，有自己的一套路由，以及错误处理，还有就是styled-jxs 还是比较方便的 ， 类似的方式有 styled-components https://www.styled-components.com/

touch next.config.jsmodule.exports = { ?exportPathMap: function() { ???return { ?????‘/‘: { page: ‘/‘ }, ?????‘/about‘: { page: ‘/about‘ }, ?????‘/index‘: { page: ‘/index‘ } ???} ?}}// 修改 package.json"scripts": { ???"dev": "next", ???"build": "next build && next export", ???"start": "next start" ?} ?// 启动并生成npm run build // 效果 ?out 目录.├── about│   └── index.html├── index│   └── index.html├── index.html└── _next ???├── 0b64b5d8-c35c-4475-81e3-a13779e823be ???│   └── page ???│   ????├── about ???│   ????│   └── index.js ???│   ????├── _error ???│   ????│   └── index.js ???│   ????└── index.js ???└── fa86b6114a1f9591804ca6129852ceb2 ???????└── app.js备注： ?实际项目需要使用的话，直接放到nginx 后者 varnish traffice server 等类似的静态缓存服务器即可 ?类似 now 的发布模式就