ant-design / ant-design-examples Goto Github PK
View Code? Open in Web Editor NEWThis project forked from miracles1919/create-next-app-antd
Use antd in create-next-app
This project forked from miracles1919/create-next-app-antd
Use antd in create-next-app
正如标题所问,当我使用 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
在业务项目中发现问题,然后循着线索找到了这个官方 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 # 所有组件黑色,见截图
`
With Sub Components
theme={{
token: {
colorPrimary: "#52c41a",
}
`
The theme "colorPrimary" changed to "#52c41a" but the same colour isn't applied to the Button component.
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.
nextjs app router模式也提供一个抽取css的例子吧,多谢了
.
将antd的版本升级到最新还是会展示出原始样式
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
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
一直尝试但是没有成功
nextjs v 14 这个方案已经不生效了
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.