next.js 简单使用

1. 介绍
一个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/
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 的发布模式就
 

posted on 2017-11-03 21:14  荣锋亮  阅读(14038)  评论(0编辑  收藏  举报

导航