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

1 year ago · 07d3a46e42
2 changed files with 67 additions and 71 deletions
--- a/docs/react/use-with-next.en-US.md
+++ b/docs/react/use-with-next.en-US.md
@ -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`

 ```tsx
-import Document, { Html, Head, Main, NextScript, DocumentContext } from 'next/document';
 import { StyleProvider, createCache, extractStyle } from '@ant-design/cssinjs';
+import Document, { DocumentContext, Head, Html, Main, NextScript } from 'next/document';

 const MyDocument = () => (
  <Html lang="en">
@ -76,7 +76,8 @@ MyDocument.getInitialProps = async (ctx: DocumentContext) => {
  const originalRenderPage = ctx.renderPage;
  ctx.renderPage = () =>
    originalRenderPage({
-      enhanceApp: (App) => (props) => (
+      enhanceApp: (App) => (props) =>
+        (
          <StyleProvider cache={cache}>
            <App {...props} />
          </StyleProvider>
@ -103,37 +104,34 @@ export default MyDocument;

 3. Supports custom themes

-```tsx
-import React from 'react';
-import { ConfigProvider } from 'antd';
+```ts
+// theme/themeConfig.ts
+import type { ThemeConfig } from 'antd';

-const withTheme = (node: JSX.Element) => (
-  <>
-    <ConfigProvider
-      theme={{
+const theme: ThemeConfig = {
  token: {
+    fontSize: 16,
    colorPrimary: '#52c41a',
  },
-      }}
-    >
-      {node}
-    </ConfigProvider>
-  </>
-);
+};

-export default withTheme;
+export default theme;
 ```

 4. Rewrite `pages/_app.tsx`

 ```tsx
-import '../styles/globals.css';
+import { ConfigProvider } from 'antd';
 import type { AppProps } from 'next/app';
-import withTheme from '../theme';
+import theme from './themeConfig';
+
+const App = ({ Component, pageProps }: AppProps) => (
+  <ConfigProvider theme={theme}>
+    <Component {...pageProps} />
+  </ConfigProvider>
+);

-export default function App({ Component, pageProps }: AppProps) {
-  return withTheme(<Component {...pageProps} />);
-}
+export default App;
 ```

 5. Use antd in page component
@ -141,13 +139,13 @@ export default function App({ Component, pageProps }: AppProps) {
 ```tsx
 import { Button } from 'antd';

-export default function Home() {
-  return (
+const Home = () => (
  <div className="App">
    <Button type="primary">Button</Button>
  </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).
--- a/docs/react/use-with-next.zh-CN.md
+++ b/docs/react/use-with-next.zh-CN.md
@ -60,8 +60,8 @@ export default Home;
 2. 改写 `pages/_document.tsx`

 ```tsx
-import Document, { Html, Head, Main, NextScript, DocumentContext } from 'next/document';
 import { StyleProvider, createCache, extractStyle } from '@ant-design/cssinjs';
+import Document, { DocumentContext, Head, Html, Main, NextScript } from 'next/document';

 const MyDocument = () => (
  <Html lang="en">
@ -78,7 +78,8 @@ MyDocument.getInitialProps = async (ctx: DocumentContext) => {
  const originalRenderPage = ctx.renderPage;
  ctx.renderPage = () =>
    originalRenderPage({
-      enhanceApp: (App) => (props) => (
+      enhanceApp: (App) => (props) =>
+        (
          <StyleProvider cache={cache}>
            <App {...props} />
          </StyleProvider>
@ -105,37 +106,34 @@ export default MyDocument;

 3. 支持自定义主题

-```tsx
-import React from 'react';
-import { ConfigProvider } from 'antd';
+```ts
+// theme/themeConfig.ts
+import type { ThemeConfig } from 'antd';

-const withTheme = (node: JSX.Element) => (
-  <>
-    <ConfigProvider
-      theme={{
+const theme: ThemeConfig = {
  token: {
+    fontSize: 16,
    colorPrimary: '#52c41a',
  },
-      }}
-    >
-      {node}
-    </ConfigProvider>
-  </>
-);
+};

-export default withTheme;
+export default theme;
 ```

 4. 改写 `pages/_app.tsx`

 ```tsx
-import '../styles/globals.css';
+import { ConfigProvider } from 'antd';
 import type { AppProps } from 'next/app';
-import withTheme from '../theme';
+import theme from './themeConfig';
+
+const App = ({ Component, pageProps }: AppProps) => (
+  <ConfigProvider theme={theme}>
+    <Component {...pageProps} />
+  </ConfigProvider>
+);

-export default function App({ Component, pageProps }: AppProps) {
-  return withTheme(<Component {...pageProps} />);
-}
+export default App;
 ```

 5. 在页面中使用 antd
@ -143,13 +141,13 @@ export default function App({ Component, pageProps }: AppProps) {
 ```tsx
 import { Button } from 'antd';

-export default function Home() {
-  return (
+const Home = () => (
  <div className="App">
    <Button type="primary">Button</Button>
  </div>
-  );
-}
+);
+
+export default Home;
 ```

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