docs: 更新 Readme

README.md

@@ -1,102 +1,102 @@
-# 开始使用
+# 概述
 
-## 安装
+简单好用的 [Next.js](https://nextjs.org/) 自定义服务器。
 
-``` bash
-$ npm i --save kidjs react react-dom
-```
+## 为什么使用服务端渲染？
 
-> Kid.js 支持 [React 16](https://reactjs.org/blog/2017/09/26/react-v16.0.html) 及以上版本；   
-> 支持在 [Node v7.6](https://nodejs.org/en/blog/release/v6.14.2/) 及以上版本中运行。
+- 能够为客户提供更理想的性能；
+- 提供更为一致的 SEO 表现；
 
-## 创建页面
+## 为什么使用 Kid.js
 
-框架约定页面文件存放在 `pages` 目录中；通常情况下，框架会根据页面自动生成对应的路由；
+Kid.js 为 Next.js 提供更加人性化的后端服务能力，支持自定义路由和接口、环境配置等功能。同时不破坏 Next.js 原有的特性及开发体验。
 
-页面可以是无状态组件 （在 [快速入门](https://kidjs.org/#/?id=%E5%BF%AB%E9%80%9F%E5%85%A5%E9%97%A8) 中稍有提到），也可以是 React 组件；
+Kid.js 作为 Next.js 的附加服务，与 Next.js 本身不存在耦合，可随时被添加至一个现有的 Next.js 应用中，并可以在任何时候从你的应用中移除。
 
-多数时候我们的页面需要根据数据来渲染，于是在 Kid.js 中的 React Component 会多一个用于获取初始化数据的静态生命周期函数：`getInitialProps`，用法如下：
+在技术选型上使用性能优异的 Koa 作为底层。
 
-``` js
-import React, { Component } from 'react'
-import r2 from 'r2'
+在安全和稳定性方面，Kid.js 内置常见攻击的防御机制。
 
-class IndexPage extends Component {
-  static async getInitialProps ({ asPath }) {
-    const res = r2('http://api.example.com')
-    return res
-  }
+Kid.js 关注服务端渲染的性能，默认开启页面级缓存。
+
+### 特性
+
+- 基于 [Koa.js](https://koajs.com/) 开发，性能优异；
+- 页面级缓存；
+- 配置化开发和部署；
+
+## 快速入门
+
+### 启动一个新的项目
 
-  render () {
-    const { res } = this.props
-    return (
-      <h1>{res.title}</h1>
-    )
+我们只需要几个步骤，就可以让你的服务运行起来：
+
+``` bash
+$ npm i --save kidjs next react react-dom
+```
+
+在你的 package.json 中添加运行脚本：
+
+``` json
+{
+  "scripts": {
+    "dev": "kid",
+    "build": "kid build",
+    "start": "KID_ENV=prod kid"
   }
 }
-
-export default IndexPage
 ```
 
-### getInitialProps
+创建首页（`.pages/index.js`）：
 
-`getInitialProps` 方法只在顶层页面组件中使用。当初始化页面的时候，`getInitialProps` 只会在服务器端执行，而当通过 [Link](https://kidjs.org/#/page?id=%E8%B7%AF%E7%94%B1) 组件或者使用 [命令路由](https://kidjs.org/#/page?id=%E8%B7%AF%E7%94%B1) 来将页面导航到另外一个路由的时候，此方法就只会在客户端执行。
+``` js
+export default () => <div>Welcome to kid.js!</div>
+```
 
-`getInitialProps` 接收的上下文对象包含以下属性：
+启动项目：
 
-- `pathname` - URL 的 path 部分；
-- `query` - URL 的 query string 部分，并且其已经被解析成了一个对象；
-- `asPath` - 在浏览器上展示的实际路径（包括 query 字符串）；
-- `req` - HTTP request 对象（只存在于服务器端）；
-- `res` - HTTP response 对象（只存在于服务器端）；
-- `jsonPageRes` - 获取的响应数据对象 Fetch Response（只存在于客户端）；
-- `err` - 渲染时发生错误抛出的错误对象；
+``` bash
+$ npm run dev
+$ open 127.0.0.1:7214
+```
 
-## 使用静态文件
+### 在 Next.js 中使用 Kid.js
 
-在你的项目的根目录新建 `static` 目录，然后你就可以在你的代码通过 `/static/` 开头的路径来引用此目录下的文件：
+``` bash
+$ npm i --save kidjs
+```
+
+在配置中声明自定义端口（可选）：
 
 ``` js
-export default () => <img src="/static/my-image.png" />
+// config/config.default.js
+
+module.exports = {
+  port: 7707
+}
 ```
 
-## 样式
+更改 package.json 中的运行脚本：
 
-### 嵌入式样式 Built-in-CSS
+``` json
+{
+  "scripts": {
+    "dev": "kid",
+    "build": "kid build",
+    "start": "KID_ENV=prod kid"
+  }
+}
+```
 
-Kid.js 使用 [style-jsx](https://github.com/zeit/styled-jsx) 来支持局部独立作用域的 CSS (scope CSS)，目的是提供一种类似于 Web 组件的 shadow CSS，不过，shadow CSS 并不支持服务器端渲染，而 scope CSS 是支持的。
+启动项目：
 
-``` js
-export default () =>
-  <div>
-    Hello world
-    <p>scoped!</p>
-    <style jsx>{`
-      p {
-        color: blue;
-      }
-      div {
-        background: red;
-      }
-      @media (max-width: 600px) {
-        div {
-          background: blue;
-        }
-      }
-    `}</style>
-    <style global jsx>{`
-      body {
-        background: black;
-      }
-    `}</style>
-  </div>
+``` bash
+$ npm run dev
+$ open 127.0.0.1:7707
 ```
 
-### SCSS/LESS/CSS
+## LICENSE
 
-同时，Kid.js 也支持 SCSS、LESS 和 CSS。
+Kid.js 采用 [MIT](https://opensource.org/licenses/MIT) 开源许可。
 
-``` js
-import '../anydir/example.scss'
-export default () => <p className='say-hello'>Hello Kid.js!</p>
-```
+> Kid.js 关注企业和项目的版权风险，所有依赖的框架和库均采用 MIT 许可，并对依赖进行扫描。