技术选项：
    next.js + mysql + react + ant design + typeorm

    首先在github创建项目，然后将git项目拉到本地

    1. git clone xxx.nextjs-blog.git

    然后进入项目目录

    1. cd nextjs-blog

    接着使用next.js提供的脚手架创建项目，这里我们使用typescript开发，所以使用typescript的模板

    1. yarn create next-app --typescript

    配置一下pretteric, 在根目录创建.pretteric文件

    1. {
    2.     "arrowParens": "always",
    3.     "bracketSameLine": true,
    4.     "endOfLine": "lf",
    5.     "htmlWhitespaceSensitivity": "css",
    6.     "insertPragma": false,
    7.     "jsxSingleQuote": false,
    8.     "jsxBracketSameLine": false,
    9.     "printWidth": 80,
    10.     "proseWrap":"preserve",
    11.     "quoteProps": "as-needed",
    12.     "requirePragma": false,
    13.     "semi": true,
    14.     "singleQuote": true,
    15.     "tabWidth": 2,
    16.     "trailingComma": "es5",
    17.     "useTabs": false,
    18.     "vueIndentScriptAndStyle": false,
    19.     "parser": "babel"
    20. }

    配置一下stylelintrc, 在根目录创建.stylelintrc.json

    1. {
    2.     "extends": "stylelint-config-standard-scss",
    3.     "rules": {
    4.       "selector-class-pattern": "^[a-z][a-zA-Z0-9]+$"
    5.     }
    6.   }

    配置babel，在根目录创建.babelrc

    1. {
    2.     "presets": ["next/babel"],
    3.     "plugins": [
    4.       "babel-plugin-transform-typescript-metadata",
    5.       ["@babel/plugin-proposal-decorators", { "legacy": true }],
    6.       "@babel/plugin-proposal-class-properties"
    7.     ]
    8.   }

    配置typescript环境

    1. {
    2.   "compilerOptions": {
    3.     "target": "es5",
    4.     "lib": ["dom", "dom.iterable", "esnext"],
    5.     "allowJs": true,
    6.     "skipLibCheck": true,
    7.     "strict": true,
    8.     "forceConsistentCasingInFileNames": true,
    9.     "noEmit": true,
    10.     "esModuleInterop": true,
    11.     "module": "esnext",
    12.     "moduleResolution": "node",
    13.     "resolveJsonModule": true,
    14.     "isolatedModules": true,
    15.     "jsx": "preserve",
    16.     "incremental": true,
    17.     "baseUrl": ".",
    18.     "experimentalDecorators": true,
    19.     "emitDecoratorMetadata": true
    20.   },
    21.   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
    22.   "exclude": ["node_modules"]
    23. }

    接下来，看下next.js的路由
    image.png
    从上图可以看到
    在pages目录下来创建文件夹，文件夹的名称就代表路由。

    普通路由：
    1.比如pages/index.js，那么这个的路由就是 根路由
    2.比如在pages下面新建 blog文件夹，在blog文件夹下面新建index.js，那此时这个文件对应的页面利用就是/blog

    嵌套路由：
    1.在pages目录下新建blog目录，在blog目录下新建first-post.js，注意此时不是index.js，那此时的文件夹是嵌套的，那么对应的路由也是嵌套的，路由也是根据嵌套的文件夹的名称而来，所以这个first-post.js文件页面对应的路由就是/blog/first-post

    动态路由：
    动态路由在实际业务中非常常见，接下来看下next.js中提供的动态路由。
    1.在pages目录下新建blog文件夹，在文件夹下 新建 [id].js，这个 [id] 就表示是动态路由，那展现的路由就是这个样子 /blog/:id ,这个里面的 :id 可以换成任意的路由，例如 /blog/1 ， /blog/2
    2.第二种是动态路由在中间，在pages目录下新建 [id] 文件夹，在[id]文件夹下面 创建setting.js， 那此时的动态路由就是 /:id/setting， :id 就是动态，例如 /1/setting， /2/setting
    3.第三种动态路由是 任意匹配的路由，在pages目录下新建post文件夹，在post文件夹下面新建[…all].js，此时这个 […all]表现的动态路由就是 /post/ ，这个 就代表任意路由，丽日： /post/2020/id/title