React16.8+Next.js+Koa2开发Github全栈项目

[MrZWH]

React16.8+Next.js+Koa2开发Github全栈项目

模块版本

@aeit/next-css: ^1.0.1,
antd: ^3.13.6,
atob: ^2.1.2,
axios: ^.0.19.0,
babel-plugin-import: ^1.11.0,
cross-env: ^5.2.0,
debug: ^4.1.1,
http-proxy: ^1.17.0,
ioredis: ^4.6.2,
koa: ^2.7.0,
koa-router: ^7.4.0,
koa-session: ^5.10.1,
lru-cache: ^5.1.1,
markdown-it: ^8.4.2,
next:^8.0.3,
nprogress: ^0.2.0,
react:16.8.3,
react-dom: ^.16.8.3,
react-redux: ^6.0.1,
redux: ^4.0.1,
redux-devtools-extension: ^2.13.8,
redux-thunk: ^2.3.0

创建 nextjs 的项目

• 使用 create-next-app

使用 next 作为 koa 中间件

• nextjs 自带服务器，但只处理 ssr
• 服务器还需要处理 HTTP 请求，并根据请求数据返回相应的内容
• 根据域名之类的 HOST 来定位服务器
• nextjs 无法处理服务器数据接口、数据库连接、session 状态

根目录下创建 server.js 文件

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

const dev = process.env.NODE_ENV !== 'production'
const app = next({dev})
const handle = app.getRequestHandler() //  用来处理 http 请求的响应

app.prepare().then(() => {
  const server = new Koa()

  server.use(async () => {
    await handle(ctx.req, ctx.res)
    ctx.respond = false
  })

  server.listen(3000, () => {
    console.log('koa server listening on 3000')
  })
})

2-3