ant-design/ant-design-examples

Use antd in create-next-app

Ant Design

An enterprise-class UI design language and React UI library.

Changelog · Report Bug · Request Feature · English · 中文

✨ Features

• 🌈 Enterprise-class UI designed for web applications.
• 📦 A set of high-quality React components out of the box.
• 🛡 Written in TypeScript with predictable static types.
• ⚙️ Whole package of design resources and development tools.
• 🌍 Internationalization support for dozens of languages.
• 🎨 Powerful theme customization based on CSS-in-JS.

🖥 Environment Support

• Modern browsers
• Server-side Rendering
• Electron

Edge	Firefox	Chrome	Safari	Electron
Edge	last 2 versions	last 2 versions	last 2 versions	last 2 versions

📦 Install

npm install antd

yarn add antd

pnpm add antd

🔨 Usage

import { Button, DatePicker } from 'antd';

export default () => (
  <>
    <Button type="primary">PRESS ME</Button>
    <DatePicker placeholder="select date" />
  </>
);

🔗 Links

• Home page
• Components Overview
• Ant Design Pro
• Change Log
• rc-components
• Mobile UI
• Mini Program UI
• Ant Design Pro Components
• Ant Design Charts
• Ant Design Icons
• Ant Design Colors
• Landing Pages
• Motion
• Scaffold Market
• Developer Instruction
• Versioning Release Note
• FAQ
• CodeSandbox Template for bug reports
• Customize Theme
• How to Apply for Being A Collaborator

⌨️ Development

Use Gitpod, a free online dev environment for GitHub.

Or use opensumi.run, a free online pure front-end dev environemt.

Or clone locally:

$ git clone [email protected]:ant-design/ant-design.git
$ cd ant-design
$ npm install
$ npm start

Open your browser and visit http://127.0.0.1:8001 , see more at Development.

🤝 Contributing

Let's build a better antd together.

We welcome all contributions. Please read our Contributing Guide first. You can submit any ideas as Pull Requests or as GitHub Issues. If you'd like to improve code, check out the Development Instructions and have a good time! :)

If you are a collaborator, please follow our Pull Request Principle to create a Pull Request with our Pull Request Template.

❤️ Sponsors and Backers

ant-design-examples's Issues

how to fetch data on server if add `use client` when use next.js app router

正如标题所问，当我使用 app router 时，我如果要使用类似Layout.Footer的子组件，就需要在页面添加use client，但是这时我该如何在服务端获取数据并完成 ssr ？

直接await fetch的话，在老版本 Next.js 上会造成客户端也产生请求并无限重发，在新版本 Next.js 上会报错：vercel/next.js#42180

---

As the title asks, when I use app router, I need to add use client to the page if I want to use a subcomponent like Layout.Footer, but then how do I get the data on the server side and complete the ssr?

Just await fetch will result in an infinite client request on older versions of Next.js and an error on newer versions of Next.js: vercel/next.js#42180

The full export isn't working as expected

.

nextjs v 14 这个方案已经不生效了

nextjs v 14 这个方案已经不生效了

Theme colorPrimary change is not giving effect to Button component

`

With Sub Components

theme={{
  token: {
    colorPrimary: "#52c41a",
  }

`

The theme "colorPrimary" changed to "#52c41a" but the same colour isn't applied to the Button component.

要不搞个 vite ssr 的 demos

一直尝试但是没有成功

production 环境中动态创建的 antd.min.xxx.css file 返回 404

AppRouter模式好像还不行？

with-nextjs-app-router-inline-style Demo 渲染出的HTML包含两份同样的内嵌Style。

启动 with-nextjs-app-router-inline-style Demo 后，查看页面源码，可以看到有两个相同内容的 <style id="antd"> 样式节点（造成html文件变大一倍）。如下图：

问下，有解决方案处理吗？

Need an example for about case using ConfigProvider

How we can do with the ConfigProvider to extract css style in Nextjs ?
Needs more examples about usage of withTheme in: https://github.com/ant-design/create-next-app-antd/blob/generate-css-on-demand/theme/index.tsx

Next.js 的提取样式存在插入顺序问题

参考：https://github.com/mui/material-ui/pull/30381/files#diff-84b6006e56c321e0c3bd68156db52f9e06852d21f087e17aa525a2e709fdd9dd

ant-modal-confirm-title、ant-modal-confirm-btns等模态框样式未导出

next14 app router 整体导出css文件后， 使用ConfigProvider包裹还是会样式闪烁， 不通过ConfigProvider包裹的话样式就没问题

"with-nextjs-extract-style example" next build ,find antd css size very big

1. i run with-nextjs-extract-style example
2. yarn build
3. yarn nest export

i find css file size is very big , how to reduce size ?

with-nextjs-app-router-inline-style: a <style> tag is rendered outside the <html> tag

On with-nextjs-app-router-inline-style example, next build produces index.html which contains two <style id="antd">...</style> tags, and one of the tags is located outside of <html>...</html>. Here is the whole output: https://gist.github.com/nekketsuuu/055300c118072ae16121490ce500f801

W3C's Markup Validation Service https://validator.w3.org/#validate_by_input shows a fatal error for this HTML.

I suppose this may be a problem around StyledComponentsRegistry, but I don't know any details at the moment.

I used yarn v3 to install packages, and run yarn build && yarn start to examine index.html. My yarn.lock is here: https://gist.github.com/nekketsuuu/055300c118072ae16121490ce500f801.

antd 5.6.2中失效

将antd的版本升级到最新还是会展示出原始样式

2023-06-25.20.48.46.mov

approuter中怎样引入antd啊 能不能给个实例

组件样式重复打包问题

1、使用 Next.js 的 Pages Router
2、按需抽取

在两个不同的page同时引用了 button 组件 打包后发现 button 样式 被打包了两份

希望将公共的代码分离出来，避免重复打包

nextjs app router也提供一个抽取css的例子吧

nextjs app router模式也提供一个抽取css的例子吧，多谢了

"with-nextjs-inline-style" doesn't work when upgrade Next.js to 14.1

If upgrade Next.js to version 14.1
the "with-nextjs-inline-style" example crashed with:

 ⨯ /usr/source/test/antd/ant-design-examples/examples/with-nextjs-inline-style/node_modules/@ant-design/icons/es/components/Context.js:1
import { createContext } from 'react';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at internalCompileFunction (node:internal/vm:73:18)
    at wrapSafe (node:internal/modules/cjs/loader:1178:20)
    at Module._compile (node:internal/modules/cjs/loader:1220:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1310:10)
    at Module.load (node:internal/modules/cjs/loader:1119:32)
    at Module._load (node:internal/modules/cjs/loader:960:12)
    at Module.require (node:internal/modules/cjs/loader:1143:19)
    at mod.require (/usr/source/test/antd/ant-design-examples/examples/with-nextjs-inline-style/node_modules/next/dist/server/require-hook.js:65:28)
    at require (node:internal/modules/cjs/helpers:119:18)
    at @ant-design/icons/es/components/Context (/usr/source/test/antd/ant-design-examples/examples/with-nextjs-inline-style/.next/server/pages/_app.js:87:18)
    at __webpack_require__ (/usr/source/test/antd/ant-design-examples/examples/with-nextjs-inline-style/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///./node_modules/antd/es/config-provider/index.js:16:97)
    at ./node_modules/antd/es/config-provider/index.js (/usr/source/test/antd/ant-design-examples/examples/with-nextjs-inline-style/.next/server/vendor-chunks/antd.js:460:1)
    at __webpack_require__ (/usr/source/test/antd/ant-design-examples/examples/with-nextjs-inline-style/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///__barrel_optimize__?names=ConfigProvider!=!./node_modules/antd/es/index.js:5:74)

It all works with Next.js version 13.5.6

nextjs14 官方 demo，执行 build 后再 start，组件颜色缺失（全部是黑色）

在业务项目中发现问题，然后循着线索找到了这个官方 demo 仓库，发现官方仓库在我的环境下也有问题。

将官方仓库 clone 后，执行：

git clone https://github.com/ant-design/ant-design-examples
cd ant-design-examples/examples/with-nextjs-app-router-inline-style
pnpm i
pnpm dev  # dev 一切正常
pnpm build
pnpm start  # 所有组件黑色，见截图