react: nextJs koa project basic structure

吉祥鸟一雪钦

1、init nextJs project

npm init

npm install react react-dom next

config script in package.json

"dev": "next"

"start": "next start" 

"build": "next build"

npm run dev

result: 404 page not found

2、index.js entry file

export default () => <span>hello react next<span>

result:  hello react next

3、koa server

npm install  koa koa-router

const Koa = require('koa');
const next = require('next');

const dev = process.env.NODE_ENV !== "production";
//创建next app处于开发状态
const app = next({ dev });

const handle = app.getRequestHandler();

//页面加载编译完成后在处理请求
app.prepare().then(() => {
    const server = new Koa();
    //中间件的使用
    server.use(async (context, next) => {
        //request,response,req,res;await next() 执行下一个中间件
        await handle(context.req, context.res);
        context.respond = false;
    });
    server.listen(3000, () => {
        console.log("koa server listening on 3000")
    })
})

update script

"dev": "node server.js"

4、next with antd and css

npm install antd @zeit/next-css babel-plugin-import

for css config next.config.js

const withCss = require('@zeit/next-css');

if (typeof require !== 'undefined') {
    require.extensions['.css'] = file => {}
}

module.exports = withCss({})

for antd config .babelrc

{
    "presets": ["next/babel"],
    "plugins": [
        [
            "import",
            {
                "libraryName": "antd",
                "style": "css"
            }
        ]
    ]
}

test valid 

app.js

import App from "next/app";

import "antd/dist/antd.css";

export default App

update index.js

import { Button } from "antd";
export default () => <Button type="primary">hello world</Button>

 

来源：https://www.cnblogs.com/Nyan-Workflow-FC/p/11028788.html