ant-design/94dfec94-async.22c59e68.js

(("undefined"!=typeof globalThis?globalThis:self).makoChunk_antd=("undefined"!=typeof globalThis?globalThis:self).makoChunk_antd||[]).push([["94dfec94"],{"6e87526b":function(e,a,t){"use strict";t.d(a,"__esModule",{value:!0}),t.d(a,"texts",{enumerable:!0,get:function(){return n;}}),t("bba7d4e6");let n=[{value:"Next.js",paraId:0},{value:" \u662F\u76EE\u524D\u4E16\u754C\u4E0A\u6700\u6D41\u884C\u7684 React \u670D\u52A1\u7AEF\u540C\u6784\u6846\u67B6\uFF0C\u672C\u6587\u4F1A\u5C1D\u8BD5\u5728 Next.js \u521B\u5EFA\u7684\u5DE5\u7A0B\u4E2D\u4F7F\u7528 ",paraId:0},{value:"antd",paraId:0},{value:" \u7EC4\u4EF6\u3002",paraId:0},{value:"\u5728\u5F00\u59CB\u4E4B\u524D\uFF0C\u4F60\u53EF\u80FD\u9700\u8981\u5B89\u88C5 ",paraId:1,tocIndex:0},{value:"yarn",paraId:1,tocIndex:0},{value:" \u6216\u8005 ",paraId:1,tocIndex:0},{value:"pnpm",paraId:1,tocIndex:0},{value:" \u6216\u8005 ",paraId:1,tocIndex:0},{value:"bun",paraId:1,tocIndex:0},{value:"\u3002",paraId:1,tocIndex:0},{value:"\u5DE5\u5177\u4F1A\u81EA\u52A8\u521D\u59CB\u5316\u4E00\u4E2A\u811A\u624B\u67B6\u5E76\u5B89\u88C5\u9879\u76EE\u7684\u5404\u79CD\u5FC5\u8981\u4F9D\u8D56\uFF0C\u5728\u5B89\u88C5\u8FC7\u7A0B\u4E2D\uFF0C\u6709\u4E00\u4E9B\u914D\u7F6E\u9879\u9700\u8981\u81EA\u884C\u9009\u62E9\uFF0C\u5982\u679C\u5728\u8FC7\u7A0B\u4E2D\u51FA\u73B0\u7F51\u7EDC\u95EE\u9898\uFF0C\u8BF7\u5C1D\u8BD5\u914D\u7F6E\u4EE3\u7406\uFF0C\u6216\u4F7F\u7528\u5176\u4ED6 npm registry\uFF0C\u4F8B\u5982\uFF0C\u4F60\u53EF\u4EE5\u5207\u6362\u5230\u6DD8\u5B9D\u955C\u50CF\u6E90\uFF1A",paraId:2},{value:"npm config set registry https://registry.npmmirror.com",paraId:2},{value:"\u3002",paraId:2},{value:"\u521D\u59CB\u5316\u5B8C\u6210\u540E\uFF0C\u6211\u4EEC\u8FDB\u5165\u9879\u76EE\u5E76\u542F\u52A8\u3002",paraId:3},{value:"$ cd antd-demo\n$ npm run dev\n",paraId:4},{value:"\u6B64\u65F6\u4F7F\u7528\u6D4F\u89C8\u5668\u8BBF\u95EE ",paraId:5},{value:"http://localhost:3000/",paraId:5},{value:" \uFF0C\u770B\u5230 NEXT \u7684 logo \u5C31\u7B97\u6210\u529F\u4E86\u3002",paraId:5},{value:"\u73B0\u5728\u4ECE yarn \u6216 npm \u6216 pnpm \u6216 bun \u5B89\u88C5\u5E76\u5F15\u5165 antd\u3002",paraId:6,tocIndex:1},{value:"\u4FEE\u6539 ",paraId:7},{value:"src/app/page.tsx",paraId:7},{value:"\uFF0C\u5F15\u5165 antd \u7684\u6309\u94AE\u7EC4\u4EF6\u3002",paraId:7},{value:"import React from 'react';\nimport { Button } from 'antd';\n\nconst Home = () => (\n  <div className=\"App\">\n    <Button type=\"primary\">Button</Button>\n  </div>\n);\n\nexport default Home;\n",paraId:8},{value:"\u597D\u4E86\uFF0C\u73B0\u5728\u4F60\u5E94\u8BE5\u80FD\u770B\u5230\u9875\u9762\u4E0A\u5DF2\u7ECF\u6709\u4E86 ",paraId:9},{value:"antd",paraId:9},{value:" \u7684\u84DD\u8272\u6309\u94AE\u7EC4\u4EF6\uFF0C\u63A5\u4E0B\u6765\u5C31\u53EF\u4EE5\u7EE7\u7EED\u9009\u7528\u5176\u4ED6\u7EC4\u4EF6\u5F00\u53D1\u5E94\u7528\u4E86\u3002\u5176\u4ED6\u5F00\u53D1\u6D41\u7A0B\u4F60\u53EF\u4EE5\u53C2\u8003 Next.js \u7684",paraId:9},{value:"\u5B98\u65B9\u6587\u6863",paraId:9},{value:"\u3002",paraId:9},{value:"\u7EC6\u5FC3\u7684\u670B\u53CB\u53EF\u4EE5\u53D1\u73B0\u8FD9\u65F6\u5F15\u5165\u7684 antd \u7EC4\u4EF6\u5728\u9996\u5C4F\u5E76\u6CA1\u6709\u6837\u5F0F\uFF0C\u4E0B\u9762\u5C31\u9700\u8981\u6839\u636E Next.js \u7684\u6A21\u5F0F\u6765\u9009\u62E9\u4E0D\u540C\u7684 SSR \u6837\u5F0F\u5904\u7406\u65B9\u5F0F\u3002",paraId:10},{value:"Updated",paraId:11},{value:"\u5982\u679C\u4F60\u5728 Next.js \u5F53\u4E2D\u4F7F\u7528\u4E86 App Router, \u5E76\u4F7F\u7528 antd \u4F5C\u4E3A\u9875\u9762\u7EC4\u4EF6\u5E93\uFF0C\u4E3A\u4E86\u8BA9 antd \u7EC4\u4EF6\u5E93\u5728\u4F60\u7684 Next.js \u5E94\u7528\u4E2D\u80FD\u591F\u66F4\u597D\u7684\u5DE5\u4F5C\uFF0C\u63D0\u4F9B\u66F4\u597D\u7684\u7528\u6237\u4F53\u9A8C\uFF0C\u4F60\u53EF\u4EE5\u5C1D\u8BD5\u4F7F\u7528\u4E0B\u9762\u7684\u65B9\u5F0F\u5C06 antd \u9996\u5C4F\u6837\u5F0F\u6309\u9700\u62BD\u79BB\u5E76\u690D\u5165\u5230 HTML \u4E2D\uFF0C\u4EE5\u907F\u514D\u9875\u9762\u95EA\u52A8\u7684\u60C5\u51B5\u3002",paraId:12,tocIndex:2},{value:"\u5B89\u88C5 ",paraId:13,tocIndex:2},{value:"@ant-design/nextjs-registry",paraId:13,tocIndex:2},{value:"\u5728 ",paraId:14},{value:"app/layout.tsx",paraId:14},{value:" \u4E2D\u4F7F\u7528",paraId:14},{value:"import React from 'react';\nimport { AntdRegistry } from '@ant-design/nextjs-registry';\n\nconst RootLayout = ({ children }: React.PropsWithChildren) => (\n  <html lang=\"en\">\n    <body>\n      <AntdRegistry>{children}</AntdRegistry>\n    </body>\n  </html>\n);\n\nexport default RootLayout;\n",paraId:15},{value:"\u6CE8\u610F: Next.js App Router \u5F53\u524D\u4E0D\u652F\u6301\u76F4\u63A5\u4F7F\u7528 ",paraId:16},{value:".",paraId:16},{value:" \u5F15\u5165\u7684\u5B50\u7EC4\u4EF6\uFF0C\u5982 ",paraId:16},{value:"<Select.Option />",paraId:16},{value:"\u3001",paraId:16},{value:"<Typography.Text />",paraId:16},{value:" \u7B49\uFF0C\u9700\u8981\u4ECE\u8DEF\u5F84\u5F15\u5165\u8FD9\u4E9B\u5B50\u7EC4\u4EF6\u6765\u907F\u514D\u9519\u8BEF\u3002",paraId:16},{value:"\u66F4\u591A\u8BE6\u7EC6\u7684\u7EC6\u8282\u53EF\u4EE5\u53C2\u8003 ",paraId:17},{value:"with-nextjs-app-router-inline-style",paraId:17},{value:"\u3002",paraId:17},{value:"\u5982\u679C\u4F60\u5728 Next.js \u5F53\u4E2D\u4F7F\u7528\u4E86 Pages Router, \u5E76\u4F7F\u7528 antd \u4F5C\u4E3A\u9875\u9762\u7EC4\u4EF6\u5E93\uFF0C\u4E3A\u4E86\u8BA9 antd \u7EC4\u4EF6\u5E93\u5728\u4F60\u7684 Next.js \u5E94\u7528\u4E2D\u80FD\u591F\u66F4\u597D\u7684\u5DE5\u4F5C\uFF0C\u63D0\u4F9B\u66F4\u597D\u7684\u7528\u6237\u4F53\u9A8C\uFF0C\u4F60\u53EF\u4EE5\u5C1D\u8BD5\u4F7F\u7528\u4E0B\u9762\u7684\u65B9\u5F0F\u5C06 antd \u9996\u5C4F\u6837\u5F0F\u6309\u9700\u62BD\u79BB\u5E76\u690D\u5165\u5230 HTML \u4E2D\uFF0C\u4EE5\u907F\u514D\u9875\u9762\u95EA\u52A8\u7684\u60C5\u51B5\u3002",paraId:18,tocIndex:3},{value:"\u5B89\u88C5 ",paraId:19,tocIndex:3},{value:"@ant-design/cssinjs",paraId:19,tocIndex:3},{value:"\u5F00\u53D1\u8005\u6CE8\u610F\u4E8B\u9879\uFF1A",paraId:20,tocIndex:3},{value:"\u8BF7\u6CE8\u610F\uFF0C\u5B89\u88C5 ",paraId:21,tocIndex:3},{value:"@ant-design/cssinjs",paraId:21,tocIndex:3},{value:" \u65F6\u5FC5\u987B\u786E\u4FDD\u7248\u672C\u53F7\u8DDF ",paraId:21,tocIndex:3},{value:"antd",paraId:21,tocIndex:3},{value:" \u672C\u5730\u7684 ",paraId:21,tocIndex:3},{value:"node_modules",paraId:21,tocIndex:3},{value:" \u4E2D\u7684 ",paraId:21,tocIndex:3},{value:"@ant-design/cssinjs",paraId:21,tocIndex:3},{value:" \u7248\u672C\u4FDD\u6301\u4E00\u81F4\uFF0C\u5426\u5219\u4F1A\u51FA\u73B0\u591A\u4E2A React \u5B9E\u4F8B\uFF0C\u5BFC\u81F4\u65E0\u6CD5\u6B63\u786E\u7684\u8BFB\u53D6 ctx\u3002\uFF08Tips: \u4F60\u53EF\u4EE5\u901A\u8FC7 ",paraId:21,tocIndex:3},{value:"npm ls @ant-design/cssinjs",paraId:21,tocIndex:3},{value:" \u547D\u4EE4\u67E5\u770B\u672C\u5730\u7248\u672C\uFF09",paraId:21,tocIndex:3},{value:"\u6539\u5199 ",paraId:22},{value:"pages/_document.tsx",paraId:22},{value:"import React from 'react';\nimport { createCache, extractStyle, StyleProvider } from '@ant-design/cssinjs';\nimport Document, { Head, Html, Main, NextScript } from 'next/document';\nimport type { DocumentContext } from 'next/document';\n\nconst MyDocument = () => (\n  <Html lang=\"en\">\n    <Head />\n    <body>\n      <Main />\n      <NextScript />\n    </body>\n  </Html>\n);\n\nMyDocument.getInitialProps = async (ctx: DocumentContext) => {\n  const cache = createCache();\n  const originalRenderPage = ctx.renderPage;\n  ctx.renderPage = () =>\n    originalRenderPage({\n      enhanceApp: (App) => (props) => (\n        <StyleProvider cache={cache}>\n          <App {...props} />\n        </StyleProvider>\n      ),\n    });\n\n  const initialProps = await Document.getInitialProps(ctx);\n  const style = extractStyle(cache, true);\n  return {\n    ...initialProps,\n    styles: (\n      <>\n        {initialProps.styles}\n        <style dangerouslySetInnerHTML={{ __html: style }} />\n      </>\n    ),\n  };\n};\n\nexport default MyDocument;\n",paraId:23},{value:"\u652F\u6301\u81EA\u5B9A\u4E49\u4E3B\u9898",paraId:24},{value:"// theme/themeConfig.ts\nimport type { ThemeConfig } from 'antd';\n\nconst theme: ThemeConfig = {\n  token: {\n    fontSize: 16,\n    colorPrimary: '#52c41a',\n  },\n};\n\nexport default theme;\n",paraId:25},{value:"\u6539\u5199 ",paraId:26},{value:"pages/_app.tsx",paraId:26},{value:"import React from 'react';\nimport { ConfigProvider } from 'antd';\nimport type { AppProps } from 'next/app';\n\nimport theme from './theme/themeConfig';\n\nconst App = ({ Component, pageProps }: AppProps) => (\n  <ConfigProvider theme={theme}>\n    <Component {...pageProps} />\n  </ConfigProvider>\n);\n\nexport default App;\n",paraId:27},{value:"\u5728\u9875\u9762\u4E2D\u4F7F\u7528 antd",paraId:28},{value:"import React from 'react';\nimport { Button } from 'antd';\n\nconst Home = () => (\n  <div className=\"App\">\n    <Button type=\"primary\">Button</Button>\n  </div>\n);\n\nexport default Home;\n",paraId:29},{value:"\u66F4\u591A\u8BE6\u7EC6\u7684\u7EC6\u8282\u53EF\u4EE5\u53C2\u8003 ",paraId:30},{value:"with-nextjs-inline-style",paraId:30},{value:"\u3002",paraId:30}];},"94dfec94":function(e,a,t){"use strict";t.d(a,"__esModule",{value:!0}),t.d(a,"default",{enumerable:!0,get:function(){return v;}});var n=t("777fffbe"),s=t("f19d2b93"),l=n._(t("e8387770")),d=n._(t("769c016e")),r=n._(t("b622e337")),u=n._(t("5437c7d5")),p=n._(t("97c488ea")),i=n._(t("c96b0d01")),c=t("5b220c3d"),x=t("9c86e52a"),o=t("6e87526b"),v=function(){return(0,s.jsx)(x.DumiPage,{children:(0,s.jsx)(c.Suspense,{fallback:(0,s.jsx)(i.default,{}),children:(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)("div",{className:"markdown",children:[(0,s.jsxs)("p",{children:[(0,s.jsx)(p.default,{href:"https://nextjs.org/",sourceType:"a",children:o.texts[0].value}),o.texts[1].value,(0,s.jsx)("code",{children:o.texts[2].value}),o.texts[3].value]}),(0,s.jsxs)("h2",{id:"\u5B89\u88C5\u548C\u521D\u59CB\u5316",children:[(0,s.jsx)(p.default,{"aria-hidden":"true",tabIndex:"-1",href:"#\u5B89\u88C5\u548C\u521D\u59CB\u5316",sourceType:"a",children:(0,s.jsx)("span",{className:"icon icon-link"})}),"\u5B89\u88C5\u548C\u521D\u59CB\u5316"]}),(0,s.jsxs)("p",{children:[o.texts[4].value,(0,s.jsx)(p.default,{href:"https://github.com/yarnpkg/yarn/",sourceType:"a",children:o.texts[5].value}),o.texts[6].value,(0,s.jsx)(p.default,{href:"https://pnpm.io/zh/",sourceType:"a",children:o.texts[7].value}),o.texts[8].value,(0,s.jsx)(p.default,{href:"https://bun.sh/",sourceType:"a",children:o.texts[9].value}),o.texts[10].value]})]}),(0,s.jsx)(u.default,{npm:"$ npx create-next-app antd-demo",yarn:"$ yarn create next-app antd-demo",pnpm:"$ pnpm create next-app antd-demo",bun:"$ bun create next-app antd-demo"}),(0,s.jsxs)("div",{className:"markdown",children:[(0,s.jsxs)("p",{children:[o.texts[11].value,(0,s.jsx)("code",{children:o.texts[12].value}),o.texts[13].value]}),(0,s.jsx)("p",{children:o.texts[14].value}),(0,s.jsx)(r.default,{lang:"bash",children:o.texts[15].value}),(0,s.jsxs)("p",{children:[o.texts[16].value,(0,s.jsx)(p.default,{href:"http://localhost:3000/",sourceType:"a",children:o.texts[17].value}),o.texts[18].value]}),(0,s.jsxs)("h2",{id:"\u5F15\u5165-antd",children:[(0,s.jsx)(p.default,{"aria-hidden":"true",tabIndex:"-1",href:"#\u5F15\u5165-antd",sourceType:"a",children:(0,s.jsx)("span",{className:"icon icon-link"})}),"\u5F15\u5165 antd"]}),(0,s.jsx)("p",{children:o.texts[19].value})]}),(0,s.jsx)(u.default,{npm:"$ npm install antd --save",yarn:"$ yarn add antd",pnpm:"$ pnpm install antd --save",bun:"$ bun add antd"}),(0,s.jsxs)("div",{className:"markdown",children:[(0,s.jsxs)("p",{children:[o.texts[20].value,(0,s.jsx)("code",{children:o.texts[21].value}),o.texts[22].value]}),(0,s.jsx)(r.default,{lang:"tsx",children:o.texts[23].value}),(0,s.jsxs)("p",{children:[o.texts[24].value,(0,s.jsx)("code",{children:o.texts[25].value}),o.texts[26].value,(0,s.jsx)(p.default,{href:"https://nextjs.org/",sourceType:"a",children:o.texts[27].value}),o.texts[28].value]}),(0,s.jsx)("p",{children:o.texts[29].value}),(0,s.jsxs)("h2",{id:"\u4F7F\u7528-app-router",children:[(0,s.jsx)(p.default,{"aria-hidden":"true",tabIndex:"-1",href:"#\u4F7F\u7528-app-router",sourceType:"a",children:(0,s.jsx)("span",{className:"icon icon-link"})}),"\u4F7F\u7528 App Router ",(0,s.jsx)(l.default,{children:o.texts[30].value})]}),(0,s.jsx)("p",{children:o.texts[31].value}),(0,s.jsx)("ol",{children:(0,s.jsxs)("li",{children:[o.texts[32].value,(0,s.jsx)("code",{children:o.texts[33].value})]})})]}),(0,s.jsx)(u.default,{npm:"$ npm install @ant-design/nextjs-registry --save",yarn:"$ yarn add @ant-design/nextjs-registry",pnpm:"$ pnpm install @ant-design/nextjs-registry --save",bun:"$ bun add @ant-design/nextjs-registry"}),(0,s.jsxs)("div",{className:"markdown",children:[(0,s.jsx)("ol",{start:"2",children:(0,s.jsxs)("li",{children:[o.texts[34].value,(0,s.jsx)("code",{children:o.texts[35].value}),o.texts[36].value]})}),(0,s.jsx)(r.default,{lang:"tsx",children:o.texts[37].value})]}),(0,s.jsx)(d.default,{type:"warning",children:(0,s.jsxs)("p",{children:[o.texts[38].value,(0,s.jsx)("code",{children:o.texts[39].value}),o.texts[40].value,(0,s.jsx)("code",{children:o.texts[41].value}),o.texts[42].value,(0,s.jsx)("code",{children:o.texts[43].value}),o.texts[44].value]})}),(0,s.jsxs)("div",{className:"markdown",children:[(0,s.jsxs)("p",{children:[o.texts[45].value,(0,s.jsx)(p.default,{href:"https://github.com/ant-design/ant-design-examples/tree/main/examples/with-nextjs-app-router-inline-style",sourceType:"a",children:o.texts[46].value}),o.texts[47].value]}),(0,s.jsxs)("h2",{id:"\u4F7F\u7528-pages-router",children:[(0,s.jsx)(p.default,{"aria-hidden":"true",tabIndex:"-1",href:"#\u4F7F\u7528-pages-router",sourceType:"a",children:(0,s.jsx)("span",{className:"icon icon-link"})}),"\u4F7F\u7528 Pages Router"]}),(0,s.jsx)("p",{children:o.texts[48].value}),(0,s.jsx)("ol",{children:(0,s.jsxs)("li",{children:[o.texts[49].value,(0,s.jsx)("code",{children:o.texts[50].value})]})}),(0,s.jsxs)("blockquote",{children:[(0,s.jsx)("p",{children:o.texts[51].value}),(0,s.jsxs)("p",{children:[o.texts[52].value,(0,s.jsx)("code",{children:o.texts[53].value}),o.texts[54].value,(0,s.jsx)("code",{children:o.texts[55].value}),o.texts[56].value,(0,s.jsx)("code",{children:o.texts[57].value}),o.texts[58].value,(0,s.jsx)("code",{children:o.texts[59].value}),o.texts[60].value,(0,s.jsx)("code",{children:o.texts[61].value}),o.texts[62].value]}),(0,s.jsx)("img",{width:"514",alt:"image",src:"https://github.com/ant-design/ant-design/assets/49217418/aad6e9e2-62cc-4c89-a0b6-38c592e3c648"})]})]}),(0,s.jsx)(u.default,{npm:"$ npm install @ant-design/cssinjs --save",yarn:"$ yarn add @ant-design/cssinjs",pnpm:"$ pnpm install @ant-design/cssinjs --save",bun:"$ bun add @ant-design/cssinjs"}),(0,s.jsxs)("div",{className:"markdown",children:[(0,s.jsx)("ol",{start:"2",children:(0,s.jsxs)("li",{children:[o.texts[63].value,(0,s.jsx)("code",{children:o.texts[64].value})]})}),(0,s.jsx)(r.default,{lang:"tsx",children:o.texts[65].value}),(0,s.jsx)("ol",{start:"3",children:(0,s.jsx)("li",{children:o.texts[66].value})}),(0,s.jsx)(r.default,{lang:"ts",children:o.texts[67].value}),(0,s.jsx)("ol",{start:"4",children:(0,s.jsxs)("li",{children:[o.texts[68].value,(0,s.jsx)("code",{children:o.texts[69].value})]})}),(0,s.jsx)(r.default,{lang:"tsx",children:o.texts[70].value}),(0,s.jsx)("ol",{start:"5",children:(0,s.jsx)("li",{children:o.texts[71].value})}),(0,s.jsx)(r.default,{lang:"tsx",children:o.texts[72].value}),(0,s.jsxs)("p",{children:[o.texts[73].value,(0,s.jsx)(p.default,{href:"https://github.com/ant-design/ant-design-examples/tree/main/examples/with-nextjs-inline-style",sourceType:"a",children:o.texts[74].value}),o.texts[75].value]})]})]})})});};}}]);