只需cv，实战中学习next | 集成antd

王志远，微医前端技术部

前言

next集成 antd 并实现按需加载

本次项目依赖版本如下

• "antd": "^3.26.4"
• "babel-plugin-import": "^1.13.0"

开始实现

安装依赖

yarn add @zeit/next-css antd@^3.26.4 babel-plugin-import@^1.13.0

代码结构

目录树

├── README.md
├── next-env.d.ts
├── next.config.js
├── package-lock.json
├── package.json
├── pages
│   ├── _app.tsx
│   └── index.tsx
├── tsconfig.json
└── yarn.lock

初始化项目代码

创建如下文件并写入

index.tsx

import { Button, Layout } from "antd";
const Content:any = Layout.Content;
export default function () {
  return (
    <Content style={{ margin: "20px auto" }}>
      <Button>Home</Button>
    </Content>
  );
}

引入antd

可以在需要的地方引入 css 文件，但这样每个需要的地方都得加一次，不方便；所以我们一般放在全局组件_app.jsx中，创建_app.jsx文件然后实现如下内容。

import React from 'react';
import App, { Container } from "next/app";;
import "antd/dist/antd.css";
class LayoutApp extends App<any> {
  render() {
    let { Component } = this.props as any;
    return (
      <Component />
    );
  }
}
export default LayoutApp;
​

补充说明

• Component：是路由组件
• withRouter：用于注入router等属性，实现前端路由

支持 antd 局部引入

.babelrc文件添加内容

{
    "presets": [
        "next/babel"
    ],
    "plugins": [
        [
            "import",
            {
                "libraryName": "antd"
            }
        ]
    ]
}

项目效果

至此，我们来看下项目效果

\