next.js 简单使用
2017-11-03 21:14
363 查看
1. 介绍
2. 初始化项目
3. 进行开发
4. 效果
5. 生成的页面
说明:
一个react.js 服务器端渲染开源项目(不只是服务器端渲染,直接也可以生成纯静态站点) 类似的解决方案有好多,比如react.js 自身的服务器渲染方案(但是使用起来就是比较怪异) gatsbyjs 也是一个不错的解决方案
2. 初始化项目
// 依赖 npm install --save next react react-dom // package.json 添加启动脚本 { "scripts": { "dev": "next", "build": "next build", "start": "next start" } }
3. 进行开发
// 创建目录 mkdir pages // 简单代码 touch index.js nano index.js export default () => <div>Welcome to next.js!</div> // 启动 npm run dev ok 就是这么简单
4. 效果
5. 生成的页面
说明:
本身进行了优化,而且和以前的react.js 项目是不一样的,有自己的一套路由,以及错误处理,还有就是styled-jxs 还是比较方便的 , 类似的方式有 styled-components https://www.styled-components.com/[/code]
的react.js 项目是不一样的,有自己的一套路由,以及错误处理,还有就是styled-jxs 还是比较方便的 , 类似的方式有 styled-components https://www.styled-components.com/ 6. 生成纯静态站点touch next.config.js module.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 的发布模式就
相关文章推荐
- js入门·循环与判断/利用函数的简单实例/使用对象/列举对象属性的名称
- 使用jQuery.pager.js进行无刷新分页(当然想带刷新的话更简单)
- swfobject.js 2.2简单使用方法
- 使用Node.js + MongoDB实现一个简单的日志分析系统
- 一步一步使用Ext JS MVC与Asp.Net MVC 3开发简单的CMS后台管理系统之预告篇
- 使用 ext.js 3.0 和 .net 做的一个简单HR 系统,供大家参考
- js入门·循环与判断/利用函数的简单实例/使用对象/列举对象属性的名称
- 一步一步使用Ext JS MVC与Asp.Net MVC 3开发简单的CMS后台管理系统之数据篇
- 一步一步使用Ext JS MVC与Asp.Net MVC 3开发简单的CMS后台管理系统之数据篇
- 一步一步使用Ext JS MVC与Asp.Net MVC 3开发简单的CMS后台管理系统之预告篇
- Wind.js的一些简单使用和说明
- 一步一步使用Ext JS MVC与Asp.Net MVC 3开发简单的CMS后台管理系统之创建项目
- 一步一步使用Ext JS MVC与Asp.Net MVC 3开发简单的CMS后台管理系统之登录窗口
- 一步一步使用Ext JS MVC与Asp.Net MVC 3开发简单的CMS后台管理系统之预告篇
- 简单的正则表达式在JS中的使用
- 一步一步使用Ext JS MVC与Asp.Net MVC 3开发简单的CMS后台管理系统之创建项目
- 如何使用Javascript(简称JS)取得LI里的内容(简单易懂的代码实例)
- 一步一步使用Ext JS MVC与Asp.Net MVC 3开发简单的CMS后台管理系统之数据篇
- 比较简单实用的使用正则三种版本的js去空格处理方法
- 下面简单使用Jquery来操作iframe的一些记录,这个使用纯JS也可以实现。