next.js+antd+egg.js+mysql构建我的博客系统

1. 安装next，构建react服务端渲染框架

npm install create-next-app my-app

2.cd 进入my-app
3. 安装next能够使用css需要的条件

npm instal --save @zeit/next-css

在根目录下新建一个文件 next.config.js

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

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

module.exports = withCss({
   })

4. 安装UI库

npm install --save antd

6. 安装按加载

npm install --save babel-plugin-import 

在根目录下新建一个文件 .babelrc

{
   
    "presets":["next/babel"],  //Next.js的总配置文件，相当于继承了它本身的所有配置
    "plugins":[     //增加新的插件，这个插件就是让antd可以按需引入，包括CSS
        [
            "import",
            {
   
                "libraryName":"antd",
                //"style":"css"  //打包在生产css库会不起作用，可以使用全局引入 在pages/_app.js中引入antd.css
            }
        ]
    ]
}

7. 在page/_app.js中引入 antd.css

import 'antd/dist/antd.css'

8. npm run dev

9. 引入 antd的图标

npm install --save @ant-design/icons

10. 安装markdown

npm install --save react-markdown

引入markdown

import ReactMarkdown from 'react-markdown'

然后在代码中使用

<ReactMarkdown 
  source