React: NextJS FrameWork

NextJs
https://nextjs.org/docs 이 프레임 워 크 는 route 대신 파일 디 렉 터 리 를 사용 할 수 있 으 며,lazyloading 을 자동 으로 사용 합 니 다.React 코드 내용;
페이지 폴 더 의 파일 만 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;