docs: update docs about app router in use-with-next (#43579)

* docs: update docs * docs: update docs * feat: optimize code * docs: update docs * docs: update docs
2024-11-27 20:49:53 +08:00 · 2023-07-16 12:13:22 +08:00 · 2023-07-16 12:13:22 +08:00 · ca35f2f891
commit ca35f2f891
parent efbe8460e4
2 changed files with 224 additions and 0 deletions
--- a/docs/react/use-with-next.en-US.md
+++ b/docs/react/use-with-next.en-US.md
@ -48,3 +48,115 @@ export default Home;
 OK, you should now see a blue primary button displayed on the page. Next you can choose any components of `antd` to develop your application. Visit other workflows of `Next.js` at its [User Guide](https://nextjs.org/).

 We are successfully running antd components now, go build your own application!
+
+## Using Next.js App Router
+
+If you are using the App Router in Next.js and using antd as your component library, to make the antd component library work better in your Next.js application and provide a better user experience, you can try using the following method to extract and inject antd's first-screen styles into HTML to avoid page flicker.
+
+1. Install `@ant-design/cssinjs`
+
+<InstallDependencies npm='$ npm install @ant-design/cssinjs --save' yarn='$ yarn add @ant-design/cssinjs' pnpm='$ pnpm install @ant-design/cssinjs --save'></InstallDependencies>
+
+2. Create `lib/AntdRegistry.tsx`
+
+```tsx
+'use client';
+
+import React from 'react';
+import { useServerInsertedHTML } from 'next/navigation';
+import { StyleProvider, createCache, extractStyle } from '@ant-design/cssinjs';
+
+export default function StyledComponentsRegistry({ children }: { children: React.ReactNode }) {
+  const cache = createCache();
+
+  useServerInsertedHTML(() => (
+    <style id="antd" dangerouslySetInnerHTML={{ __html: extractStyle(cache, true) }}></style>
+  ));
+
+  return <StyleProvider cache={cache}>{children}</StyleProvider>;
+}
+```
+
+3. Use it in `app/layout.tsx`
+
+```tsx
+import StyledComponentsRegistry from '../lib/AntdRegistry';
+import './globals.css';
+import { Inter } from 'next/font/google';
+
+const inter = Inter({ subsets: ['latin'] });
+
+export const metadata = {
+  title: 'Create Next App',
+  description: 'Generated by create next app',
+};
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <body className={inter.className}>
+        <StyledComponentsRegistry>{children}</StyledComponentsRegistry>
+      </body>
+    </html>
+  );
+}
+```
+
+4. Customize theme in `theme/*.tsx`
+
+```tsx
+'use client';
+
+// theme/index.tsx
+import React from 'react';
+import { ConfigProvider } from 'antd';
+
+const withTheme = (node: JSX.Element) => (
+  <ConfigProvider
+    theme={{
+      token: {
+        colorPrimary: '#52c41a',
+      },
+    }}
+  >
+    {/* nesting */}
+    <ConfigProvider
+      theme={{
+        token: {
+          borderRadius: 16,
+        },
+      }}
+    >
+      {node}
+    </ConfigProvider>
+  </ConfigProvider>
+);
+
+export default withTheme;
+```
+
+5. Use in page
+
+```tsx
+'use client';
+
+import React from 'react';
+import { Button } from 'antd';
+import withTheme from '../../theme';
+
+const Home = function Home() {
+  return (
+    <div className="App">
+      <Button type="primary">Button</Button>
+    </div>
+  );
+};
+
+const HomePage = () => {
+  return withTheme(<Home />);
+};
+
+export default HomePage;
+```
+
+For more detailed information, please refer to [with-nextjs-app-router-inline-style](https://github.com/ant-design/ant-design-examples/tree/main/examples/with-nextjs-app-router-inline-style)。
--- a/docs/react/use-with-next.zh-CN.md
+++ b/docs/react/use-with-next.zh-CN.md
@ -48,3 +48,115 @@ export default Home;
 好了，现在你应该能看到页面上已经有了 `antd` 的蓝色按钮组件，接下来就可以继续选用其他组件开发应用了。其他开发流程你可以参考 Next.js 的[官方文档](https://nextjs.org/)。

 我们现在已经把 antd 组件成功运行起来了，开始开发你的应用吧！
+
+## 使用 Next.js 的 App Router
+
+如果你在 Next.js 当中使用了 App Router, 并使用 antd 作为页面组件库，为了让 antd 组件库在你的 Next.js 应用中能够更好的工作，提供更好的用户体验，你可以尝试使用下面的方式将 antd 首屏样式按需抽离并植入到 HTML 中，以避免页面闪动的情况。
+
+1. 安装 `@ant-design/cssinjs`
+
+<InstallDependencies npm='$ npm install @ant-design/cssinjs --save' yarn='$ yarn add @ant-design/cssinjs' pnpm='$ pnpm install @ant-design/cssinjs --save'></InstallDependencies>
+
+2. 创建 `lib/AntdRegistry.tsx`
+
+```tsx
+'use client';
+
+import React from 'react';
+import { useServerInsertedHTML } from 'next/navigation';
+import { StyleProvider, createCache, extractStyle } from '@ant-design/cssinjs';
+
+export default function StyledComponentsRegistry({ children }: { children: React.ReactNode }) {
+  const cache = createCache();
+
+  useServerInsertedHTML(() => (
+    <style id="antd" dangerouslySetInnerHTML={{ __html: extractStyle(cache, true) }}></style>
+  ));
+
+  return <StyleProvider cache={cache}>{children}</StyleProvider>;
+}
+```
+
+3. 在 `app/layout.tsx` 中使用
+
+```tsx
+import StyledComponentsRegistry from '../lib/AntdRegistry';
+import './globals.css';
+import { Inter } from 'next/font/google';
+
+const inter = Inter({ subsets: ['latin'] });
+
+export const metadata = {
+  title: 'Create Next App',
+  description: 'Generated by create next app',
+};
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <body className={inter.className}>
+        <StyledComponentsRegistry>{children}</StyledComponentsRegistry>
+      </body>
+    </html>
+  );
+}
+```
+
+4. 在 `theme/*.tsx` 中自定义主题
+
+```tsx
+'use client';
+
+// theme/index.tsx
+import React from 'react';
+import { ConfigProvider } from 'antd';
+
+const withTheme = (node: JSX.Element) => (
+  <ConfigProvider
+    theme={{
+      token: {
+        colorPrimary: '#52c41a',
+      },
+    }}
+  >
+    {/* nesting */}
+    <ConfigProvider
+      theme={{
+        token: {
+          borderRadius: 16,
+        },
+      }}
+    >
+      {node}
+    </ConfigProvider>
+  </ConfigProvider>
+);
+
+export default withTheme;
+```
+
+5. 在页面中使用
+
+```tsx
+'use client';
+
+import React from 'react';
+import { Button } from 'antd';
+import withTheme from '../../theme';
+
+const Home = function Home() {
+  return (
+    <div className="App">
+      <Button type="primary">Button</Button>
+    </div>
+  );
+};
+
+const HomePage = () => {
+  return withTheme(<Home />);
+};
+
+export default HomePage;
+```
+
+更多详细的细节可以参考 [with-nextjs-app-router-inline-style](https://github.com/ant-design/ant-design-examples/tree/main/examples/with-nextjs-app-router-inline-style)。