【化蛹为蝶二】Nextjs 使用 TypeScript、Ant Design

上篇 我们唠了半天，只是创建了个项目出来

今天我们把 TypeScript、Antd 一气儿接到我们项目里来

TypeScript

我在使用 create-next-app project-name创建项目后，使用了一些配置引入了 TypeScript

但，复盘后发现 Nextjs 提供了 TypeScript 的项目创建模板

我们只需要使用下面命令，即可创建自带 TypeScript 能力的 Nextjs 项目：

create-next-app project-name --typescript

Ant Design

因为是 React 工程嘛，UI 组件就盲选 Antd 就没错了，再创建其它工程的实践的话，可能会试试字节新出的 SemiD 或者 Navie，下面是 Ant Design 的引入步骤

• 第一步： 添加相应组件：antd、babel

npm install antd babel-plugin-import

• 第二步：新建 .babelrc 文件

{
    "presets": ["next/babel"],
    "plugins": [
        [
            "import",
            {
                "libraryName": "antd",
                // true 的时候才会编译less
                "style": true
            }
        ]
    ]
}

• 第三步：_app.js 文件中引入 antd 样式文件

import 'antd/dist/antd.min.css';

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

export default MyApp;

• 第四步：在页面中使用即可

import { Button } from 'antd';

export default function Home() {
  return <Button type="primary">test Antd</Button>
}

• 第五步：next.config.js

const cssLoaderGetLocalIdent = require("css-loader/lib/getLocalIdent.js");

module.exports = {
    webpack: (config, { buildId, dev, isServer, defaultLoaders }) => {
      if (config.externals) {
        const includes = [/antd/];
        config.externals = config.externals.map((external) => {
          if (typeof external !== "function") return external;
          return (ctx, req, cb) =>
          includes.find((include) =>
                        req.startsWith(".")
                        ? include.test(path.resolve(ctx, req))
                        : include.test(req)
                       )
            ? cb()
          : external(ctx, req, cb);
        });
      }
      return config;
    },
    lessLoaderOptions: {
      // antd 按需引入需开启
      javascriptEnabled: true,
    },
    cssLoaderOptions: {
      localIdentName: "[local]___[hash:base64:5]",
      getLocalIdent: (context, localIdentName, localName, options) => {
        let hz = context.resourcePath.replace(context.rootContext, "");
        if (/node_modules/.test(hz)) {
          return localName;
        } else {
          return cssLoaderGetLocalIdent(
            context,
            localIdentName,
            localName,
            options
          );
        }
      },
    },
}

后续预告：

• 梳理一些小问题如：@根路径 Import、引入 Less、引入 Koa、Yaml 解析、引入 Reset CSS、项目目录结构、日志记录与存储、
• 单独出一篇 Nextjs 引入 Prisma 和 Mysql2 存取数据
• 单独出一篇 Nextjs 引入 Apollo-Server/Apollo-Client 使用 Graphql
• Nextjs + Prisma + Graphql Demo 实践
• Nextjs 如何使用 Session 和 Cookie
• Nextjs 基于 Graphql、Prisma 的 JWT 登录鉴权

预告里的实操都做的差不多了，就差填坑了

今天就先填个小坑

另外可以小瞄下前些天发的文

埋坑不断，也在不断填坑，诸君下期再见

Please follow me ^_^