[docs-infra] Error when clicking on logo link in AppBarWithResponsiveMenu demo

[maheshguntur]

• I have followed (at least) the PR section of the contributing guide.

Error when clicked LOGO in below example Appbar
https://mui.com/material-ui/react-app-bar/#app-bar-with-responsive-menu

Replicated the error in local

Fixes #38412

[mui-bot]

Netlify deploy preview

https://deploy-preview-38451--material-ui.netlify.app/

Bundle size report

No bundle size changes (Toolpad)
No bundle size changes

Generated by 🚫 dangerJS against 5fbebb3

[maheshguntur]

I saw there is an issue on this and some one already assigned to it

[raphaelricardo10]

It seems a reasonable solution. Is it working locally?

You should provide a label to pass the remaining test.

[maheshguntur]

yes. It is working in local. I do not have an option to add label.

[ZeeshanTamboli]

@maheshguntur The root issue is different. I encounter the same problem on all links that use href="/". Here are a couple of examples:

• https://mui.com/material-ui/guides/routing/#navigation-components
• https://mui.com/joy-ui/react-breadcrumbs/#usage-with-link-and-typography

The error states that it can't read the name property of productIdentifier, which corresponds to the code for App Nav Drawer. What confuses me is why the AppNavDrawer component is being invoked when redirecting to the homepage. cc @mui/docs-infra @oliviertassinari

[oliviertassinari]

What confuses me is why the AppNavDrawer component is being invoked when redirecting to the homepage.

Yes! Confusion is such a great state of mind to be in, It never stops giving, to drill down until it makes 100% sense. In our case, I think a bug in the Next.js Pages Router but that is exacerbated by a buggy logic we have.

diff --git a/docs/src/modules/utils/helpers.ts b/docs/src/modules/utils/helpers.ts
index d8c774cfa6..0057c707e9 100644
--- a/docs/src/modules/utils/helpers.ts
+++ b/docs/src/modules/utils/helpers.ts
@@ -100,7 +100,13 @@ export function pathnameToLanguage(pathname: string): {
   // Remove hash as it's never sent to the server
   // https://github.com/vercel/next.js/issues/25202
   const canonicalAsServer = canonicalAs.replace(/#(.*)$/, '');
-  const canonicalPathname = canonicalAsServer.replace(/^\/api/, '/api-docs').replace(/\/$/, '');
+  let canonicalPathname = canonicalAsServer.replace(/^\/api/, '/api-docs');
+
+  // Remove trailing slash as Next.js doesn't expect it here
+  // https://nextjs.org/docs/pages/api-reference/functions/use-router#router-object
+  if (canonicalPathname !== '/') {
+    canonicalPathname = canonicalPathname.replace(/\/$/, '');
+  }

   return {
     userLanguage,

I changed the reviewer, I think it's more important for Alexandre to gain awareness of this.