用Next.js结合Koa开启一个React的项目

前言

自己工作项目中用的框架是Vue2.x，但是自己想学习一下react，又没有项目可以自己练习，所以自己会捣鼓一些自己感兴趣的东西。我下面的的内容可能也算不上是深入，但是算是自己的一个摸索的过程，所以记录一下，如果里面有一些不对的地方请多多指正，如果有更好的实现方法也希望能提出来。

觉得自己写这个东西还有比较重要的一点儿是前端的东西更新很快，别人一年多前发的博文里面的配置去我去参考的时候会发现又的已经更新不能用了，所以我绕了很多的弯路，我记录一下我绕弯路的过程，让想我一样的小白可以不用绕弯路。

技术选型

基于自己所学的知识以及参考的一些大佬的文章，选择使用react，next.js和koa进行开发

选择用koa的理由比较简单，觉得比express封装好但又比egg.js灵活

话不多说，开始正式的内容吧

内容

首先创建一个项目

npx create-next-app my-demo

创建好之后需要添加一些配置，首先是less，因为我要用antd组件

yarn add antd
yarn add next-plugin-antd-less
yarn add webpack

在next.config.js中进行配置如下：

const withAntdLess = require('next-plugin-antd-less');
// const cOnfigs= require ('./config')
const path = require('path')
const webpack = require ('webpack')
const NODE_ENV = process.env.NODE_ENV;

module.exports = withAntdLess({
  // 在pages目录下会被当做页面解析的后缀
  pageExtensions: ['jsx', 'js'],
  // optional
  modifyVars: { '@primary-color': '#04f' },
  // optional
  lessVarsFilePath: './src/styles/variables.less',
  // optional
  lessVarsFilePathAppendToEndOfContent: false,
  // optional https://github.com/webpack-contrib/css-loader#object
  cssLoaderOptions: {},

  webpack(config) {
    return config;
  },

});

此外还要在.babelrc.js中配置一下：

module.exports = {
  presets: [['next/babel']],
  plugins: [['import', { libraryName: 'antd', style: true }]],
};

经过以上的步骤，一个简单的架子就搭建起来了，接下来我们要开始里面内容的构建

我们可以看到我们创建的next的项目有一个pages，pages里有一个_demo.js，我们写的所有的页面应该都是挂载在_demo.js下面的，也可以在里面配置redux的store，然后可以看到还有一个index.js文件，可以说这个文件显示的内容就是我们一打开我们的项目首页显示的内容

我们可以通过next/router进行路由跳转的设置，并传值

  const goB = () => {
    Router.push({
      pathname: '/demo',
      query: {
        id: 2
      }
    })
  }

其中/demo指的是在pages下的demo.js文件，即文件名代表了路由

现在我想要在里面添加MYSQL

yarn add mysql2

这里用mysql2，如果直接用mysql的话会有一些问题产生

这里用到mysql的前提是自己电脑要安装mysql，如果遇到不会的问题可以百度下，安装教程很多

安装好之后，要在项目里面进行配置

pages同级目录下创建serve文件夹，在文件夹下创建db文件夹，并创建default.js默认设置

// 设置配置文件
const cOnfig= {
    // 启动端口
    port: 3001,

    // 数据库配置
    database: {
      DATABASE: 'my_blog',
      USERNAME: 'root',
      PASSWORD: '12345678',
      PORT: '3306',
      HOST: 'localhost'
    }
  }

  module.exports = config

将default.js的配置导入到db下的index.js文件夹

var mysql = require('mysql2');
var cOnfig= require('./default.js')

var pool  = mysql.createPool({
  host     : config.database.HOST,
  user     : config.database.USERNAME,
  password : config.database.PASSWORD,
  database : config.database.DATABASE
});


class Mysql {
    constructor () {

    }
    query () {
      return new Promise((resolve, reject) => {
        pool.query('SELECT * from ceshi', function (error, results, fields) {
            if (error) {
                throw error
            };
            resolve(results)
            // console.log('The solution is: ', results[0].solution);
        });
      })
    }
}

module.exports = new Mysql()

class是我写的简单的sql语句，在后面的配置中会用到

现在要引入Koa了

yarn add koa  koa-router

引入后创建一个server.js文件，并在里面进行配置

// server.js
const Koa = require('koa')
const Router = require('koa-router')
const next = require('next')
const cOnfig= require('./server/db/default')
const mysql  = require('./server/db/index')
const path = require("path")
const dev = process.env.NODE_ENV !== 'production'
const app = next({ dev })
const handle = app.getRequestHandler()

const PORT = 3001
// 等到pages目录编译完成后启动服务响应请求
const server = new Koa()
const {query} = require('./server/db/index.js')
const {QUERY_SQL} = require('./server/db/dbSQL.js')


app.prepare().then(() => {

  const router = new Router()
  router.get('/index', async (ctx, next) => {

    const data = await query()
    console.log(ctx)
    const html = app.renderToHTML(ctx.req, ctx.res, '/index',ctx.params)

    ctx.body = html;
  });
  server.use(router.routes()).use(router.allowedMethods());

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

  server.listen(PORT, () => {
    console.log(`koa server listening on ${PORT}`)
  })
})

这里要说明一下，const data = await query()是在请求我自己写的接口，console.log(data)可以输出我查询到的数据

const html = app.renderToHTML(ctx.req, ctx.res, '/index',ctx.params)是为了进入的时候显示首页的东西

如果你对我文章里的内容有疑问可以在评论区告诉我