如何在服务端渲染中使用ant design？

Question

我想在服务端渲染React应用程序项目中使用ant design。服务端渲染如何导入antd？

import {
  Icon, Form, Input, Button, Upload, Select, Badge,
  Avatar, Divider, Checkbox, DatePicker, Row, Col, Carousel 
} from 'antd';

Answer 1

根据新文档 对SSR（服务器端渲染）的支持还处于初级阶段。

Next.js

在 Next.js 中使用 antd-mobile 需要一些额外的配置。

Next.js 12

首先，您需要安装 next-transpile-modules：

$ npm install --save-dev next-transpile-modules
# or
$ yarn add -D next-transpile-modules
# or
$ pnpm add -D next-transpile-modules

然后在next.config.js中进行配置：

const withTM = require('next-transpile-modules')([
  'antd-mobile',
]);

module.exports = withTM({
  // other Next.js configuration in your project
});

Next.js 13

Next.js 13 可以自动转换和捆绑来自外部依赖项（node_modules）的依赖项。这取代了 next-transpile-modules 包。

    // next.config.js
    const nextConfig = {
      transpilePackages: ['antd-mobile'],
    };

    module.exports = nextConfig;

要在应用程序目录中使用 antd-mobile，请在文件顶部添加 'use client' 指令。

// app/page.jsx
'use client'

import { Button } from 'antd-mobile'

请查看以下页面了解更多详情 https://mobile.ant.design/guide/ssr/

Answer 2

使用 ant-design 检查 next.js 示例：https://github.com/zeit/next.js/tree/canary/examples/with-ant-design

Answer 3

如果你有或正在使用cdn，你可以从本地路径导入css

<link href="https://cdnjs.cloudflare.com/ajax/libs/antd/3.11.2/antd.css">

进口没有任何变化

编辑：

如果你想覆盖一些 less 变量，我正在使用 lessc 并从 ant less 构建 css，所以在 package.json 中是 script

"build:antd": "lessc --js --modify-var=@layout-body-background=#ffffff ./node_modules/antd/dist/antd.less > dist/ant.css", 

并运行它：

npm run build:antd

然后在html中导入这个css