diff --git a/docs/next.config.js b/docs/next.config.js
index 0574f5c2cdc185..b5b51829a72b73 100644
--- a/docs/next.config.js
+++ b/docs/next.config.js
@@ -137,7 +137,7 @@ module.exports = {
 
       pages2.forEach(page => {
         if (!page.children) {
-          map[`${prefix}${page.pathname}`] = {
+          map[`${prefix}${page.pathname.replace(/^\/api-docs\/(.*)/, '/api/$1')}`] = {
             page: page.pathname,
             query: {
               userLanguage,
@@ -161,7 +161,9 @@ module.exports = {
 
     return map;
   },
-  async rewrites() {
-    return [{ source: '/api/:rest*', destination: '/api-docs/:rest' }];
+  experimental: {
+    async rewrites() {
+      return [{ source: '/api/:rest*', destination: '/api-docs/:rest*' }];
+    },
   },
 };
diff --git a/docs/pages/_app.js b/docs/pages/_app.js
index 76621c5ff69f35..846ffa7af872b7 100644
--- a/docs/pages/_app.js
+++ b/docs/pages/_app.js
@@ -3,7 +3,6 @@ import 'docs/src/modules/components/bootstrap';
 // --- Post bootstrap -----
 import React from 'react';
 import App from 'next/app';
-import find from 'lodash/find';
 import { Provider as ReduxProvider, useDispatch, useSelector } from 'react-redux';
 import { loadCSS } from 'fg-loadcss/src/loadCSS';
 import NextHead from 'next/head';
@@ -242,31 +241,6 @@ Tip: you can access the documentation \`theme\` object directly in the console.
   );
 }
 
-function findActivePage(currentPages, pathname) {
-  const activePage = find(currentPages, page => {
-    if (page.children) {
-      if (pathname.indexOf(`${page.pathname}/`) === 0) {
-        // Check if one of the children matches (for /components)
-        return findActivePage(page.children, pathname);
-      }
-    }
-
-    // Should be an exact match if no children
-    return pathname === page.pathname;
-  });
-
-  if (!activePage) {
-    return null;
-  }
-
-  // We need to drill down
-  if (activePage.pathname !== pathname) {
-    return findActivePage(activePage.children, pathname);
-  }
-
-  return activePage;
-}
-
 function AppWrapper(props) {
   const { children, pageProps } = props;
 
@@ -293,7 +267,7 @@ function AppWrapper(props) {
     pathname = pathname.replace(/\/$/, '');
   }
   // console.log(pages, { ...router, pathname })
-  const activePage = findActivePage(pages, pathname);
+  const activePage = { pathname: router.pathname };
 
   let fonts = ['https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap'];
   if (pathname.match(/onepirate/)) {
diff --git a/docs/src/modules/components/Link.js b/docs/src/modules/components/Link.js
index 021676e4e68cbd..59f4a2a8e0fbaa 100644
--- a/docs/src/modules/components/Link.js
+++ b/docs/src/modules/components/Link.js
@@ -28,37 +28,49 @@ function Link(props) {
   const {
     activeClassName = 'active',
     className: classNameProps,
+    href: routerHref,
     innerRef,
     naked,
     role: roleProp,
     ...other
   } = props;
+
+  // apply nextjs rewrites
+  const href = routerHref.replace(/\/api-docs\/(.*)/, '/api/$1');
+
   const router = useRouter();
 
   const userLanguage = useSelector(state => state.options.userLanguage);
   const className = clsx(classNameProps, {
-    [activeClassName]: router.pathname === props.href && activeClassName,
+    [activeClassName]: router.pathname === routerHref && activeClassName,
   });
 
-  if (userLanguage !== 'en' && other.href.indexOf('/') === 0 && other.href.indexOf('/blog') !== 0) {
-    other.as = `/${userLanguage}${other.href}`;
+  if (userLanguage !== 'en' && href.indexOf('/') === 0 && href.indexOf('/blog') !== 0) {
+    other.as = `/${userLanguage}${href}`;
   }
 
   // catch role passed from ButtonBase. This is definitely a link
   const role = roleProp === 'button' ? undefined : roleProp;
 
-  const isExternal = other.href.startsWith('https:') || other.href.startsWith('mailto:');
+  const isExternal = href.startsWith('https:') || href.startsWith('mailto:');
 
   if (isExternal) {
-    return <MuiLink className={className} ref={innerRef} role={role} {...other} />;
+    return <MuiLink className={className} href={href} ref={innerRef} role={role} {...other} />;
   }
 
   if (naked) {
-    return <NextComposed className={className} ref={innerRef} role={role} {...other} />;
+    return <NextComposed className={className} href={href} ref={innerRef} role={role} {...other} />;
   }
 
   return (
-    <MuiLink component={NextComposed} className={className} ref={innerRef} role={role} {...other} />
+    <MuiLink
+      component={NextComposed}
+      className={className}
+      href={href}
+      ref={innerRef}
+      role={role}
+      {...other}
+    />
   );
 }