技术选项

next.js + mysql + react + ant design + typeorm

环境搭建

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

git clone xxx.nextjs-blog.git

然后进入项目目录

cd nextjs-blog

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

yarn create next-app --typescript

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

{
    "arrowParens": "always",
    "bracketSameLine": true,
    "endOfLine": "lf",
    "htmlWhitespaceSensitivity": "css",
    "insertPragma": false,
    "jsxSingleQuote": false,
    "jsxBracketSameLine": false,
    "printWidth": 80,
    "proseWrap":"preserve",
    "quoteProps": "as-needed",
    "requirePragma": false,
    "semi": true,
    "singleQuote": true,
    "tabWidth": 2,
    "trailingComma": "es5",
    "useTabs": false,
    "vueIndentScriptAndStyle": false,
    "parser": "babel"
}

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

{
    "extends": "stylelint-config-standard-scss",
    "rules": {
      "selector-class-pattern": "^[a-z][a-zA-Z0-9]+$"
    }
  }

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

{
    "presets": ["next/babel"],
    "plugins": [
      "babel-plugin-transform-typescript-metadata",
      ["@babel/plugin-proposal-decorators", { "legacy": true }],
      "@babel/plugin-proposal-class-properties"
    ]
  }

配置typescript环境

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "baseUrl": ".",
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}

接下来，看下next.js的路由

从上图可以看到

在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

next.js搭建博客系统-01-环境搭建

技术选项

环境搭建

普通路由

嵌套路由

动态路由