我想在服务器端渲染react应用程序项目中使用Ant Design。如何在服务器端渲染中导入antd?
import { Icon, Form, Input, Button, Upload, Select, Badge, Avatar, Divider, Checkbox, DatePicker, Row, Col, Carousel } from 'antd';
sycxhyv71#
在Next.js中使用antd-mobile需要一些额外的配置。
首先,你需要安装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可以自动从外部依赖(node_modules)中转换和捆绑依赖。它取代了next-transpile-modules包。
// next.config.js const nextConfig = { transpilePackages: ['antd-mobile'], }; module.exports = nextConfig;
要在app目录中使用antd-mobile,请在文件顶部添加“use client”指令。
// app/page.jsx 'use client' import { Button } from 'antd-mobile'
请查看下面的页面了解更多详情https://mobile.ant.design/guide/ssr/
qlckcl4x2#
使用ant-design检查next.js示例:https://github.com/zeit/next.js/tree/canary/examples/with-ant-design
fhg3lkii3#
如果您有或使用CDN,您可以从本地路径导入CSS<link href="https://cdnjs.cloudflare.com/ajax/libs/antd/3.11.2/antd.css">进口没有任何变化编辑:如果你想覆盖一些less变量,我使用lessc并从ant less构建css,所以在package.json中有脚本
<link href="https://cdnjs.cloudflare.com/ajax/libs/antd/3.11.2/antd.css">
"build:antd": "lessc --js --modify-var=@layout-body-background=#ffffff ./node_modules/antd/dist/antd.less > dist/ant.css",
运行它:
npm run build:antd
然后import this css in html
3条答案
按热度按时间sycxhyv71#
在Next.js中使用antd-mobile需要一些额外的配置。
首先,你需要安装next-transpile-modules:
然后在next. config. js中配置它:
Next.js 13可以自动从外部依赖(node_modules)中转换和捆绑依赖。它取代了next-transpile-modules包。
要在app目录中使用antd-mobile,请在文件顶部添加“use client”指令。
请查看下面的页面了解更多详情https://mobile.ant.design/guide/ssr/
qlckcl4x2#
使用ant-design检查next.js示例:https://github.com/zeit/next.js/tree/canary/examples/with-ant-design
fhg3lkii3#
如果您有或使用CDN,您可以从本地路径导入CSS
<link href="https://cdnjs.cloudflare.com/ajax/libs/antd/3.11.2/antd.css">
进口没有任何变化
编辑:
如果你想覆盖一些less变量,我使用lessc并从ant less构建css,所以在package.json中有脚本
运行它:
然后import this css in html