React: NextJS FrameWork

NextJs

https://nextjs.org/docs
该框架可以用文件目录代替route，且会自动使用lazyloading；
内容为React代码；

只有pages文件夹下的文件为path；
其余的component照旧使用；

对component进行局部style

import React from 'react';

const user= (props)=> (
    <div>
        <h1>{props.name}</h1>
        <p>Age: {props.age}</p>
        <style jsx>
            {`
            div{
                broder:1px solid #eee;
                box-shadow:0 2px 3px #ccc;
                padding:20px;
                text-align:center;

            }`}
        </style>
    </div>

);

export default user;

error handle

在pages建立_error.js

getInitialProps(context)

在服务器上render前进行异步操作；

class IndexPage extends Component{
    static getInitialProps(context){  //在server上console
        console.log(context);
        const promise = new Promise((resolve,reject)=>{
            setTimeout(()=>{
                resolve({appName:'Super App'});
            },1000);
        });
        return promise;
    }

在function component中调用

import React from 'react';
import User from '../../components/User';

const authIndexPage = (props) => (
    <div>
        <h1>The Auth Index Page - {props.appName}</h1>
        <User name="Max" age={28}/>
    </div>
);

authIndexPage.getInitialProps = (context)=>{
    console.log(context);
        const promise = new Promise((resolve,reject)=>{
            setTimeout(()=>{
                resolve({appName:'Super App(Auth)'});
            },1000);
        });
        return promise;
};

export default authIndexPage;