docs: update _document example in next.js (#43657)

1 year ago · 0ca05a7e39
2 changed files with 79 additions and 97 deletions
--- a/docs/react/use-with-next.en-US.md
+++ b/docs/react/use-with-next.en-US.md
@ -60,8 +60,18 @@ If you are using the Pages Router in Next.js and using antd as your component li
 ```tsx
 import Document, { Html, Head, Main, NextScript, DocumentContext } from 'next/document';
 import { StyleProvider, createCache, extractStyle } from '@ant-design/cssinjs';
-export default class MyDocument extends Document {
-  static async getInitialProps(ctx: DocumentContext) {
+
+const MyDocument = () => (
+  <Html lang="en">
+    <Head />
+    <body>
+      <Main />
+      <NextScript />
+    </body>
+  </Html>
+);
+
+MyDocument.getInitialProps = async (ctx: DocumentContext) => {
  const cache = createCache();
  const originalRenderPage = ctx.renderPage;
  ctx.renderPage = () =>
@ -86,20 +96,9 @@ export default class MyDocument extends Document {
      </>
    ),
  };
-  }
+};

-  render() {
-    return (
-      <Html lang="en">
-        <Head />
-        <body>
-          <Main />
-          <NextScript />
-        </body>
-      </Html>
-    );
-  }
-}
+export default MyDocument;
 ```

 3. Supports custom themes
@ -116,17 +115,9 @@ const withTheme = (node: JSX.Element) => (
          colorPrimary: '#52c41a',
        },
      }}
-    >
-      <ConfigProvider
-        theme={{
-          token: {
-            borderRadius: 16,
-          },
-        }}
    >
      {node}
    </ConfigProvider>
-    </ConfigProvider>
  </>
 );

--- a/docs/react/use-with-next.zh-CN.md
+++ b/docs/react/use-with-next.zh-CN.md
@ -62,8 +62,18 @@ export default Home;
 ```tsx
 import Document, { Html, Head, Main, NextScript, DocumentContext } from 'next/document';
 import { StyleProvider, createCache, extractStyle } from '@ant-design/cssinjs';
-export default class MyDocument extends Document {
-  static async getInitialProps(ctx: DocumentContext) {
+
+const MyDocument = () => (
+  <Html lang="en">
+    <Head />
+    <body>
+      <Main />
+      <NextScript />
+    </body>
+  </Html>
+);
+
+MyDocument.getInitialProps = async (ctx: DocumentContext) => {
  const cache = createCache();
  const originalRenderPage = ctx.renderPage;
  ctx.renderPage = () =>
@ -88,20 +98,9 @@ export default class MyDocument extends Document {
      </>
    ),
  };
-  }
+};

-  render() {
-    return (
-      <Html lang="en">
-        <Head />
-        <body>
-          <Main />
-          <NextScript />
-        </body>
-      </Html>
-    );
-  }
-}
+export default MyDocument;
 ```

 3. 支持自定义主题
@ -118,17 +117,9 @@ const withTheme = (node: JSX.Element) => (
          colorPrimary: '#52c41a',
        },
      }}
-    >
-      <ConfigProvider
-        theme={{
-          token: {
-            borderRadius: 16,
-          },
-        }}
    >
      {node}
    </ConfigProvider>
-    </ConfigProvider>
  </>
 );

@ -249,6 +240,6 @@ const HomePage: React.FC = () => (
 export default HomePage;
 ```

-> 注意: 上述方式没有在页面中使用如：`Select.Option` 、 `Typography.Text` 等子组件，因此可以正常使用。但如果你的页面中有使用类似这样的子组件，目前在 Next.js 中会看到如下警告：`Error: Cannot access .Option on the server. You cannot dot into a client module from a server component. You can only pass the imported name through.`，目前需等待 Next.js 官方解决。再次之前，如果你的页面中使用了上述子组件，可在页面组件第一行加上 `"use client";` 来避免警告。更多细节可以参考示例：[with-sub-components](https://github.com/ant-design/ant-design-examples/blob/main/examples/with-nextjs-app-router-inline-style/src/app/with-sub-components/page.tsx)。
+> 注意: 上述方式没有在页面中使用如：`Select.Option` 、 `Typography.Text` 等子组件，因此可以正常使用。但如果你的页面中有使用类似这样的子组件，目前在 Next.js 中会看到如下警告：`Error: Cannot access .Option on the server. You cannot dot into a client module from a server component. You can only pass the imported name through.`，目前需等待 Next.js 官方解决。在此之前，如果你的页面中使用了上述子组件，可在页面组件第一行加上 `"use client";` 来避免警告。更多细节可以参考示例：[with-sub-components](https://github.com/ant-design/ant-design-examples/blob/main/examples/with-nextjs-app-router-inline-style/src/app/with-sub-components/page.tsx)。

 更多详细的细节可以参考 [with-nextjs-app-router-inline-style](https://github.com/ant-design/ant-design-examples/tree/main/examples/with-nextjs-app-router-inline-style)。