From 0ca05a7e396ca23007cb982cbd364e1f19d173e2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?kiner-tang=28=E6=96=87=E8=BE=89=29?= <1127031143@qq.com> Date: Wed, 19 Jul 2023 18:43:44 +0800 Subject: [PATCH] docs: update _document example in next.js (#43657) --- docs/react/use-with-next.en-US.md | 87 ++++++++++++++---------------- docs/react/use-with-next.zh-CN.md | 89 ++++++++++++++----------------- 2 files changed, 79 insertions(+), 97 deletions(-) diff --git a/docs/react/use-with-next.en-US.md b/docs/react/use-with-next.en-US.md index b320dbd7c8..150194f7ea 100644 --- a/docs/react/use-with-next.en-US.md +++ b/docs/react/use-with-next.en-US.md @@ -60,46 +60,45 @@ 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 cache = createCache(); - const originalRenderPage = ctx.renderPage; - ctx.renderPage = () => - originalRenderPage({ - enhanceApp: (App) => (props) => ( - - - - ), - }); - - const initialProps = await Document.getInitialProps(ctx); - // 1.1 extract style which had been used - const style = extractStyle(cache, true); - return { - ...initialProps, - styles: ( - <> - {initialProps.styles} - {/* 1.2 inject css */} - - + +const MyDocument = () => ( + + + +
+ + + +); + +MyDocument.getInitialProps = async (ctx: DocumentContext) => { + const cache = createCache(); + const originalRenderPage = ctx.renderPage; + ctx.renderPage = () => + originalRenderPage({ + enhanceApp: (App) => (props) => ( + + + ), - }; - } - - render() { - return ( - - - -
- - - - ); - } -} + }); + + const initialProps = await Document.getInitialProps(ctx); + // 1.1 extract style which had been used + const style = extractStyle(cache, true); + return { + ...initialProps, + styles: ( + <> + {initialProps.styles} + {/* 1.2 inject css */} + + + ), + }; +}; + +export default MyDocument; ``` 3. Supports custom themes @@ -117,15 +116,7 @@ const withTheme = (node: JSX.Element) => ( }, }} > - - {node} - + {node} ); diff --git a/docs/react/use-with-next.zh-CN.md b/docs/react/use-with-next.zh-CN.md index 564e473a2a..e98c5efb18 100644 --- a/docs/react/use-with-next.zh-CN.md +++ b/docs/react/use-with-next.zh-CN.md @@ -62,46 +62,45 @@ 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 cache = createCache(); - const originalRenderPage = ctx.renderPage; - ctx.renderPage = () => - originalRenderPage({ - enhanceApp: (App) => (props) => ( - - - - ), - }); - - const initialProps = await Document.getInitialProps(ctx); - // 1.1 extract style which had been used - const style = extractStyle(cache, true); - return { - ...initialProps, - styles: ( - <> - {initialProps.styles} - {/* 1.2 inject css */} - - + +const MyDocument = () => ( + + + +
+ + + +); + +MyDocument.getInitialProps = async (ctx: DocumentContext) => { + const cache = createCache(); + const originalRenderPage = ctx.renderPage; + ctx.renderPage = () => + originalRenderPage({ + enhanceApp: (App) => (props) => ( + + + ), - }; - } - - render() { - return ( - - - -
- - - - ); - } -} + }); + + const initialProps = await Document.getInitialProps(ctx); + // 1.1 extract style which had been used + const style = extractStyle(cache, true); + return { + ...initialProps, + styles: ( + <> + {initialProps.styles} + {/* 1.2 inject css */} + + + ), + }; +}; + +export default MyDocument; ``` 3. 支持自定义主题 @@ -119,15 +118,7 @@ const withTheme = (node: JSX.Element) => ( }, }} > - - {node} - + {node} ); @@ -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)。