mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-12-18 03:14:07 +08:00
Code Issues Actions 19 Packages Projects Releases Wiki Activity

site: update doc example in next.js agin (#43663)

Browse Source
This commit is contained in:
lijianan 2023-07-20 00:24:57 +08:00 committed by GitHub
parent 473130fe32
commit 07d3a46e42
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 67 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -58,8 +58,8 @@ If you are using the Pages Router in Next.js and using antd as your component li
2. Rewrite `pages/_document.tsx` 2. Rewrite `pages/_document.tsx`
```tsx ```tsx
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';
import Document, { DocumentContext, Head, Html, Main, NextScript } from 'next/document';
const MyDocument = () => ( const MyDocument = () => (
<Html lang="en"> <Html lang="en">
@ -76,11 +76,12 @@ MyDocument.getInitialProps = async (ctx: DocumentContext) => {
const originalRenderPage = ctx.renderPage; const originalRenderPage = ctx.renderPage;
ctx.renderPage = () => ctx.renderPage = () =>
originalRenderPage({ originalRenderPage({
enhanceApp: (App) => (props) => ( enhanceApp: (App) => (props) =>
<StyleProvider cache={cache}> (
<App {...props} /> <StyleProvider cache={cache}>
</StyleProvider> <App {...props} />
), </StyleProvider>
),
}); });
const initialProps = await Document.getInitialProps(ctx); const initialProps = await Document.getInitialProps(ctx);
@ -103,37 +104,34 @@ export default MyDocument;
3. Supports custom themes 3. Supports custom themes
```tsx ```ts
import React from 'react'; // theme/themeConfig.ts
import { ConfigProvider } from 'antd'; import type { ThemeConfig } from 'antd';
const withTheme = (node: JSX.Element) => ( const theme: ThemeConfig = {
<> token: {
<ConfigProvider fontSize: 16,
theme={{ colorPrimary: '#52c41a',
token: { },
colorPrimary: '#52c41a', };
},
}}
>
{node}
</ConfigProvider>
</>
);
export default withTheme; export default theme;
``` ```
4. Rewrite `pages/_app.tsx` 4. Rewrite `pages/_app.tsx`
```tsx ```tsx
import '../styles/globals.css'; import { ConfigProvider } from 'antd';
import type { AppProps } from 'next/app'; import type { AppProps } from 'next/app';
import withTheme from '../theme'; import theme from './themeConfig';
export default function App({ Component, pageProps }: AppProps) { const App = ({ Component, pageProps }: AppProps) => (
return withTheme(<Component {...pageProps} />); <ConfigProvider theme={theme}>
} <Component {...pageProps} />
</ConfigProvider>
);
export default App;
``` ```
5. Use antd in page component 5. Use antd in page component
@ -141,13 +139,13 @@ export default function App({ Component, pageProps }: AppProps) {
```tsx ```tsx
import { Button } from 'antd'; import { Button } from 'antd';
export default function Home() { const Home = () => (
return ( <div className="App">
<div className="App"> <Button type="primary">Button</Button>
<Button type="primary">Button</Button> </div>
</div> );
);
} export default Home;
``` ```
For more detailed information, please refer to [with-nextjs-inline-style](https://github.com/ant-design/ant-design-examples/tree/main/examples/with-nextjs-inline-style). For more detailed information, please refer to [with-nextjs-inline-style](https://github.com/ant-design/ant-design-examples/tree/main/examples/with-nextjs-inline-style).
@ -240,6 +238,6 @@ const HomePage: React.FC = () => (
export default HomePage; export default HomePage;
``` ```
> Tips: The above method does not use sub-components such as `Select.Option` and `Typography.text` in the page, so it can be used normally. However, if you use a sub-component like this in your page, you will currently see the following warning in 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.`, currently need to wait for Next.js official solution. Before again, if you use the above sub-components in your page, you can add "use client" to the first line of the page component to avoid warnings. See examples for more details: [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). > Tips: The above method does not use sub-components such as `Select.Option` and `Typography.text` in the page, so it can be used normally. However, if you use a sub-component like this in your page, you will currently see the following warning in 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.`, currently need to wait for Next.js official solution. Before again, if you use the above sub-components in your page, you can add "use client" to the first line of the page component to avoid warnings. See examples for more details: [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).
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)。 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)。

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

@ -60,8 +60,8 @@ export default Home;
2. 改写 `pages/_document.tsx` 2. 改写 `pages/_document.tsx`
```tsx ```tsx
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';
import Document, { DocumentContext, Head, Html, Main, NextScript } from 'next/document';
const MyDocument = () => ( const MyDocument = () => (
<Html lang="en"> <Html lang="en">
@ -78,11 +78,12 @@ MyDocument.getInitialProps = async (ctx: DocumentContext) => {
const originalRenderPage = ctx.renderPage; const originalRenderPage = ctx.renderPage;
ctx.renderPage = () => ctx.renderPage = () =>
originalRenderPage({ originalRenderPage({
enhanceApp: (App) => (props) => ( enhanceApp: (App) => (props) =>
<StyleProvider cache={cache}> (
<App {...props} /> <StyleProvider cache={cache}>
</StyleProvider> <App {...props} />
), </StyleProvider>
),
}); });
const initialProps = await Document.getInitialProps(ctx); const initialProps = await Document.getInitialProps(ctx);
@ -105,37 +106,34 @@ export default MyDocument;
3. 支持自定义主题 3. 支持自定义主题
```tsx ```ts
import React from 'react'; // theme/themeConfig.ts
import { ConfigProvider } from 'antd'; import type { ThemeConfig } from 'antd';
const withTheme = (node: JSX.Element) => ( const theme: ThemeConfig = {
<> token: {
<ConfigProvider fontSize: 16,
theme={{ colorPrimary: '#52c41a',
token: { },
colorPrimary: '#52c41a', };
},
}}
>
{node}
</ConfigProvider>
</>
);
export default withTheme; export default theme;
``` ```
4. 改写 `pages/_app.tsx` 4. 改写 `pages/_app.tsx`
```tsx ```tsx
import '../styles/globals.css'; import { ConfigProvider } from 'antd';
import type { AppProps } from 'next/app'; import type { AppProps } from 'next/app';
import withTheme from '../theme'; import theme from './themeConfig';
export default function App({ Component, pageProps }: AppProps) { const App = ({ Component, pageProps }: AppProps) => (
return withTheme(<Component {...pageProps} />); <ConfigProvider theme={theme}>
} <Component {...pageProps} />
</ConfigProvider>
);
export default App;
``` ```
5. 在页面中使用 antd 5. 在页面中使用 antd
@ -143,13 +141,13 @@ export default function App({ Component, pageProps }: AppProps) {
```tsx ```tsx
import { Button } from 'antd'; import { Button } from 'antd';
export default function Home() { const Home = () => (
return ( <div className="App">
<div className="App"> <Button type="primary">Button</Button>
<Button type="primary">Button</Button> </div>
</div> );
);
} export default Home;
``` ```
更多详细的细节可以参考 [with-nextjs-inline-style](https://github.com/ant-design/ant-design-examples/tree/main/examples/with-nextjs-inline-style)。 更多详细的细节可以参考 [with-nextjs-inline-style](https://github.com/ant-design/ant-design-examples/tree/main/examples/with-nextjs-inline-style)。