GitHub
/
ant-design
6
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

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

pull/43454/merge
kiner-tang(文辉) 1 year ago
committed by GitHub
parent
9d66105558
commit
0ca05a7e39
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 79 additions and 97 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 87
      docs/react/use-with-next.en-US.md
  2. 89
      docs/react/use-with-next.zh-CN.md

87
docs/react/use-with-next.en-US.md
View File

@ -60,46 +60,45 @@ If you are using the Pages Router in Next.js and using antd as your component li
```tsx ```tsx
import Document, { Html, Head, Main, NextScript, DocumentContext } from 'next/document'; import Document, { Html, Head, Main, NextScript, DocumentContext } from 'next/document';
import { StyleProvider, createCache, extractStyle } from '@ant-design/cssinjs'; import { StyleProvider, createCache, extractStyle } from '@ant-design/cssinjs';
export default class MyDocument extends Document {
static async getInitialProps(ctx: DocumentContext) { const MyDocument = () => (
const cache = createCache(); <Html lang="en">
const originalRenderPage = ctx.renderPage; <Head />
ctx.renderPage = () => <body>
originalRenderPage({ <Main />
enhanceApp: (App) => (props) => ( <NextScript />
<StyleProvider cache={cache}> </body>
<App {...props} /> </Html>
</StyleProvider> );
),
}); MyDocument.getInitialProps = async (ctx: DocumentContext) => {
const cache = createCache();
const initialProps = await Document.getInitialProps(ctx); const originalRenderPage = ctx.renderPage;
// 1.1 extract style which had been used ctx.renderPage = () =>
const style = extractStyle(cache, true); originalRenderPage({
return { enhanceApp: (App) => (props) => (
...initialProps, <StyleProvider cache={cache}>
styles: ( <App {...props} />
<> </StyleProvider>
{initialProps.styles}
{/* 1.2 inject css */}
<style dangerouslySetInnerHTML={{ __html: style }}></style>
</>
), ),
}; });
}
const initialProps = await Document.getInitialProps(ctx);
render() { // 1.1 extract style which had been used
return ( const style = extractStyle(cache, true);
<Html lang="en"> return {
<Head /> ...initialProps,
<body> styles: (
<Main /> <>
<NextScript /> {initialProps.styles}
</body> {/* 1.2 inject css */}
</Html> <style dangerouslySetInnerHTML={{ __html: style }}></style>
); </>
} ),
} };
};
export default MyDocument;
``` ```
3. Supports custom themes 3. Supports custom themes
@ -117,15 +116,7 @@ const withTheme = (node: JSX.Element) => (
}, },
}} }}
> >
<ConfigProvider {node}
theme={{
token: {
borderRadius: 16,
},
}}
>
{node}
</ConfigProvider>
</ConfigProvider> </ConfigProvider>
</> </>
); );

89
docs/react/use-with-next.zh-CN.md
View File

@ -62,46 +62,45 @@ export default Home;
```tsx ```tsx
import Document, { Html, Head, Main, NextScript, DocumentContext } from 'next/document'; import Document, { Html, Head, Main, NextScript, DocumentContext } from 'next/document';
import { StyleProvider, createCache, extractStyle } from '@ant-design/cssinjs'; import { StyleProvider, createCache, extractStyle } from '@ant-design/cssinjs';
export default class MyDocument extends Document {
static async getInitialProps(ctx: DocumentContext) { const MyDocument = () => (
const cache = createCache(); <Html lang="en">
const originalRenderPage = ctx.renderPage; <Head />
ctx.renderPage = () => <body>
originalRenderPage({ <Main />
enhanceApp: (App) => (props) => ( <NextScript />
<StyleProvider cache={cache}> </body>
<App {...props} /> </Html>
</StyleProvider> );
),
}); MyDocument.getInitialProps = async (ctx: DocumentContext) => {
const cache = createCache();
const initialProps = await Document.getInitialProps(ctx); const originalRenderPage = ctx.renderPage;
// 1.1 extract style which had been used ctx.renderPage = () =>
const style = extractStyle(cache, true); originalRenderPage({
return { enhanceApp: (App) => (props) => (
...initialProps, <StyleProvider cache={cache}>
styles: ( <App {...props} />
<> </StyleProvider>
{initialProps.styles}
{/* 1.2 inject css */}
<style dangerouslySetInnerHTML={{ __html: style }}></style>
</>
), ),
}; });
}
const initialProps = await Document.getInitialProps(ctx);
render() { // 1.1 extract style which had been used
return ( const style = extractStyle(cache, true);
<Html lang="en"> return {
<Head /> ...initialProps,
<body> styles: (
<Main /> <>
<NextScript /> {initialProps.styles}
</body> {/* 1.2 inject css */}
</Html> <style dangerouslySetInnerHTML={{ __html: style }}></style>
); </>
} ),
} };
};
export default MyDocument;
``` ```
3. 支持自定义主题 3. 支持自定义主题
@ -119,15 +118,7 @@ const withTheme = (node: JSX.Element) => (
}, },
}} }}
> >
<ConfigProvider {node}
theme={{
token: {
borderRadius: 16,
},
}}
>
{node}
</ConfigProvider>
</ConfigProvider> </ConfigProvider>
</> </>
); );
@ -249,6 +240,6 @@ const HomePage: React.FC = () => (
export default HomePage; 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)。 更多详细的细节可以参考 [with-nextjs-app-router-inline-style](https://github.com/ant-design/ant-design-examples/tree/main/examples/with-nextjs-app-router-inline-style)。

Write Preview
Loading…
Cancel
Save