[docs] Fix broken Next and Previous links (#29711)

Co-authored-by: Olivier Tassinari <[email protected]>

Author: scallaway

docs/src/modules/components/AppNavDrawerItem.js

@@ -31,15 +31,9 @@ const iconsMap = {
   ReaderIcon: ChromeReaderModeOutlined,
 };
 
-const Item = styled(
-  function Item({ component: Component = 'div', ...props }) {
-    return <Component {...props} />;
-  },
-  {
-    // disable `as` prop
-    shouldForwardProp: () => true,
-  },
-)(({ theme }) => ({
+const Item = styled(function Item({ component: Component = 'div', ...props }) {
+  return <Component {...props} />;
+})(({ theme }) => ({
   ...theme.typography.body2,
   display: 'flex',
   borderRadius: 5,

docs/src/modules/components/AppTableOfContents.js

@@ -196,7 +196,7 @@ export default function AppTableOfContents(props) {
   const itemLink = (item, secondary) => (
     <NavItem
       display="block"
-      href={`${activePage.linkProps?.as ?? activePage.pathname}#${item.hash}`}
+      href={`${activePage.linkProps?.linkAs ?? activePage.pathname}#${item.hash}`}
       underline="none"
       onClick={handleClick(item.hash)}
       active={activeState === item.hash}

docs/src/modules/components/Link.tsx

@@ -51,6 +51,7 @@ export type LinkProps = {
   activeClassName?: string;
   as?: NextLinkProps['as'];
   href: NextLinkProps['href'];
+  linkAs?: NextLinkProps['as']; // Useful when the as prop is shallow by styled().
   noLinkStyle?: boolean;
 } & Omit<NextLinkComposedProps, 'to' | 'linkAs' | 'href'> &
   Omit<MuiLinkProps, 'href'>;
@@ -60,9 +61,10 @@ export type LinkProps = {
 const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(function Link(props, ref) {
   const {
     activeClassName = 'active',
-    as: linkAsProp,
+    as: asProp,
     className: classNameProps,
     href,
+    linkAs: linkAsProp,
     noLinkStyle,
     role, // Link don't have roles.
     ...other
@@ -86,12 +88,12 @@ const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(function Link(props,
     return <MuiLink className={className} href={href} ref={ref} {...other} />;
   }
 
-  let linkAs = linkAsProp || (href as string);
+  let linkAs = linkAsProp || asProp || (href as string);
   if (
     userLanguage !== 'en' &&
-    typeof href === 'string' &&
-    href.indexOf('/') === 0 &&
-    href.indexOf('/blog') !== 0
+    pathname &&
+    pathname.indexOf('/') === 0 &&
+    pathname.indexOf('/blog') !== 0
   ) {
     linkAs = `/${userLanguage}${linkAs}`;
   }

docs/src/pages.ts

@@ -226,15 +226,21 @@ const pages: readonly MuiPage[] = [
             title: 'GridPrintExportOptions',
           },
         ].map((page) => {
-          return { ...page, linkProps: { as: `${page.pathname.replace(/^\/api-docs/, '/api')}/` } };
+          return {
+            ...page,
+            linkProps: { linkAs: `${page.pathname.replace(/^\/api-docs/, '/api')}/` },
+          };
         }),
       },
     ]
       .sort((a, b) =>
         a.pathname.replace('/api-docs/', '').localeCompare(b.pathname.replace('/api-docs/', '')),
       )
       .map((page) => {
-        return { ...page, linkProps: { as: `${page.pathname.replace(/^\/api-docs/, '/api')}/` } };
+        return {
+          ...page,
+          linkProps: { linkAs: `${page.pathname.replace(/^\/api-docs/, '/api')}/` },
+        };
       }),
   },
   {

examples/nextjs-with-styled-components-typescript/src/Link.tsx

@@ -41,6 +41,7 @@ export type LinkProps = {
   activeClassName?: string;
   as?: NextLinkProps['as'];
   href: NextLinkProps['href'];
+  linkAs?: NextLinkProps['as']; // Useful when the as prop is shallow by styled().
   noLinkStyle?: boolean;
 } & Omit<NextLinkComposedProps, 'to' | 'linkAs' | 'href'> &
   Omit<MuiLinkProps, 'href'>;

examples/nextjs-with-typescript/src/Link.tsx

@@ -41,6 +41,7 @@ export type LinkProps = {
   activeClassName?: string;
   as?: NextLinkProps['as'];
   href: NextLinkProps['href'];
+  linkAs?: NextLinkProps['as']; // Useful when the as prop is shallow by styled().
   noLinkStyle?: boolean;
 } & Omit<NextLinkComposedProps, 'to' | 'linkAs' | 'href'> &
   Omit<MuiLinkProps, 'href'>;

examples/nextjs/src/Link.js

@@ -91,6 +91,7 @@ Link.propTypes = {
   as: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
   className: PropTypes.string,
   href: PropTypes.any,
+  linkAs: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
   noLinkStyle: PropTypes.bool,
   role: PropTypes.string,
 };