docs: update workarounds for sub-components with Next.js App router (#46711)

* docs: update workarounds for sub-components with Next.js App router

Signed-off-by: Navid <navidmafi2006@gmail.com>

* docs: (zh-CN) update workarounds for sub-components with Next.js App router

Signed-off-by: Navid <navidmafi2006@gmail.com>

* Apply suggestions from code review

Signed-off-by: Amumu <yoyo837@hotmail.com>

* Update docs/react/faq.zh-CN.md

Signed-off-by: Amumu <yoyo837@hotmail.com>

* Update docs/react/faq.zh-CN.md

Signed-off-by: Amumu <yoyo837@hotmail.com>

* Update docs/react/faq.zh-CN.md

Signed-off-by: lijianan <574980606@qq.com>

* Update docs/react/faq.zh-CN.md

Signed-off-by: lijianan <574980606@qq.com>

* Update docs/react/faq.zh-CN.md

Signed-off-by: lijianan <574980606@qq.com>

* Update faq.zh-CN.md

Signed-off-by: lijianan <574980606@qq.com>

* Update faq.en-US.md

Signed-off-by: lijianan <574980606@qq.com>

* Update docs/react/faq.zh-CN.md

Signed-off-by: lijianan <574980606@qq.com>

---------

Signed-off-by: Navid <navidmafi2006@gmail.com>
Signed-off-by: Amumu <yoyo837@hotmail.com>
Signed-off-by: lijianan <574980606@qq.com>
Co-authored-by: Amumu <yoyo837@hotmail.com>
Co-authored-by: lijianan <574980606@qq.com>

docs/react/faq.en-US.md

@@ -268,13 +268,47 @@ The above problem occurs if `strictNullChecks` is set to `true`, If you can dete
 
 ## The antd component reported an error when using the App Router of Next.js
 
-If you are using the App Router of Next.js, when you use the sub-components provided by some antd components, such as `Select.Option `, `Form.Item`, etc., you may get the following error:
+If you are using the App Router of Next.js, when you use the sub-components provided by some antd components, such as `Select.Option `, `Form.Item`, `Typography.Title`, etc., you may get the following error:
 
 ```bash
 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.
 ```
 
-At present, this problem is waiting for Next.js to give an official solution, before this, if you use sub-components in your page, you can try to add the following client tag at the top of the page to solve this problem:
+Currently, this problem is [waiting for Next.js to give an official solution](https://github.com/vercel/next.js/issues/51593). There are two workarounds as of now if you need to use sub-components in your page with the App Router:
+
+
+- Create a wrapper component that extracts the sub-components that you need, and re-exports them. Take the `Typography` component as an example. A wrapper component would look something like this:
+
+```tsx
+'use client';
+
+import React from 'react';
+import { Typography as OriginTypography } from 'antd';
+import type { LinkProps } from 'antd/es/typography/Link';
+import type { ParagraphProps } from 'antd/es/typography/Paragraph';
+import type { TextProps } from 'antd/es/typography/Text';
+import type { TitleProps } from 'antd/es/typography/Title';
+
+const Title = React.forwardRef<HTMLElement, TitleProps & React.RefAttributes<HTMLElement>>(
+  (props, ref) => <OriginTypography.Title ref={ref} {...props} />,
+);
+
+const Paragraph = React.forwardRef<HTMLElement, ParagraphProps & React.RefAttributes<HTMLElement>>(
+  (props, ref) => <OriginTypography.Paragraph ref={ref} {...props} />,
+);
+
+const Link = React.forwardRef<HTMLElement, LinkProps & React.RefAttributes<HTMLElement>>(
+  (props, ref) => <OriginTypography.Link ref={ref} {...props} />,
+);
+
+const Text = React.forwardRef<HTMLElement, TextProps & React.RefAttributes<HTMLElement>>(
+  (props, ref) => <OriginTypography.Text ref={ref} {...props} />,
+);
+
+export { Title, Link, Text, Paragraph };
+```
+
+- You can also make the page fully client-rendered by adding `use client` tag at the beginning of your page's source:
 
 ```tsx
 'use client';
@@ -292,3 +326,5 @@ export default () => {
   );
 };
 ```
+
+

docs/react/faq.zh-CN.md

@@ -297,18 +297,51 @@ export default () => {
 
 ## 使用 Next.js 的 App Router 时 antd 组件报错
 
-如果你在使用 Next.js 的 App Router，当你使用 antd 中某些组件提供的子组件，如：`Select.Option`、`Form.Item` 等，可能会出现如下报错：
+如果你在使用 Next.js 的 App Router，当你使用 antd 中某些组件提供的子组件，如：`Select.Option`、`Form.Item`、`Typography.Title` 等，可能会出现如下报错：
 
 ```bash
 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 给出官方的解决方案，在此之前，如果在你的页面中有使用子组件的话，可以尝试在页面顶部增加如下客户端标签解决这个问题：
+目前这个问题需要[等待 Next.js 官方给出解决方案](https://github.com/vercel/next.js/issues/51593)，在此之前，如果你需要在使用 App router 的页面中使用子组件，目前有两种变通方法：
+
+- 创建一个包裹组件，提取所需的子组件并重新导出。以 `Typography` 组件为例，代码大概像这样：
 
 ```tsx
 'use client';
 
-// This is not real world code, just for explain
+import React from 'react';
+import { Typography as OriginTypography } from 'antd';
+import type { LinkProps } from 'antd/es/typography/Link';
+import type { ParagraphProps } from 'antd/es/typography/Paragraph';
+import type { TextProps } from 'antd/es/typography/Text';
+import type { TitleProps } from 'antd/es/typography/Title';
+
+const Title = React.forwardRef<HTMLElement, TitleProps & React.RefAttributes<HTMLElement>>(
+  (props, ref) => <OriginTypography.Title ref={ref} {...props} />,
+);
+
+const Paragraph = React.forwardRef<HTMLElement, ParagraphProps & React.RefAttributes<HTMLElement>>(
+  (props, ref) => <OriginTypography.Paragraph ref={ref} {...props} />,
+);
+
+const Link = React.forwardRef<HTMLElement, LinkProps & React.RefAttributes<HTMLElement>>(
+  (props, ref) => <OriginTypography.Link ref={ref} {...props} />,
+);
+
+const Text = React.forwardRef<HTMLElement, TextProps & React.RefAttributes<HTMLElement>>(
+  (props, ref) => <OriginTypography.Text ref={ref} {...props} />,
+);
+
+export { Title, Link, Text, Paragraph };
+```
+
+- 你也可以在组件的开头添加 "use client" 指令，使页面完全由客户端渲染：
+
+```tsx
+'use client';
+
+// 非真实代码，仅做逻辑说明
 export default () => (
   <div className="App">
     <Form>