use NExtMuiButton where relevant

packages/@vulcanjs/next-mui/components/NextMuiButton.tsx

@@ -28,23 +28,25 @@ export const NextMuiButton = ({
   const linkProps = pick(props, nextLinkProps);
   const buttonProps = omit(props, nextLinkProps);
   return (
-    <Button {...buttonProps}>
-      <NextLink {...linkProps}>{children}</NextLink>
-    </Button>
+    <NextLink {...linkProps}>
+      <Button {...buttonProps}>{children}</Button>
+    </NextLink>
   );
 };
 /**
  * Button to be used when using href and pointing toward a local page
+ *
+ * Do not pass href directly to Button or ListItemButton, this leads to bad UX
+ * Use a Next link for better consistency (will use an SPA link)
  */
-export const NextMuiListItemButton = ({
-  children,
-  ...props
-}: ListItemButtonProps & NextLinkProps) => {
+export const NextMuiListItemButton = (
+  props: ListItemButtonProps & NextLinkProps
+) => {
   const linkProps = pick(props, nextLinkProps);
   const buttonProps = omit(props, nextLinkProps);
   return (
-    <ListItemButton {...buttonProps}>
-      <NextLink {...linkProps}>{children}</NextLink>
-    </ListItemButton>
+    <NextLink {...linkProps} passHref>
+      <ListItemButton {...buttonProps}></ListItemButton>
+    </NextLink>
   );
 };

packages/@vulcanjs/next-mui/index.ts

@@ -2,7 +2,8 @@ export * from "./emotion/createEmotionCache";
 
 export { default as Link } from "./components/Link"; // deprecated alias
 export { default as NextMuiLink } from "./components/Link"; // recommanded alias to use
+
 export {
   NextMuiButton,
   NextMuiListItemButton,
-} from "./components/NextMuiButton"; // other components accepting links
+} from "./components/NextMuiButton";

src/components/vn/learn/Steps.tsx

@@ -85,7 +85,6 @@ export const Steps = () => {
       {steps.map((step, stepIdx) => {
         return (
           <ListItem key={step.name}>
-            {/** Since steps are pointing to a local page, we need a Next link */}
             <NextMuiListItemButton
               href={step.path}
               disabled={stepIdx > maxStep}

src/pages/learn/intro-offline.mdx

@@ -1,4 +1,4 @@
-import { Button } from "@mui/material";
+import { NextMuiButton } from "@vulcanjs/next-mui";
 import { LearnLayout } from "~/components/vn/learn/LearnLayout";
 
 # Step 1: Opening Vulcan locally
@@ -12,9 +12,9 @@ This is all you have to do for this step. Next step is going to be about the dat
 
 ## Go to step 2
 
-<Button variant="contained" href="/learn/mongo">
+<NextMuiButton href="/learn/mongo" variant="contained">
   Click to go to next step
-</Button>
+</NextMuiButton>
 
 export default function IntroOfflinePage(props) {
   return <LearnLayout {...props} />;

src/pages/learn/models-and-graphql.mdx

@@ -1,3 +1,4 @@
+import { NextMuiButton } from "@vulcanjs/next-mui";
 import { Button } from "@mui/material";
 import { LearnLayout } from "~/components/vn/learn/LearnLayout";
 import { StepIfElse } from "~/components/vn/learn/Steps";
@@ -69,15 +70,18 @@ If this button is still disabled:
 - check if you Mongo server is running correctly
 - restart Vulcan Next (ctrl+C in your terminal, and `yarn run dev` again)
 
-  <StepIfElse
-    step={3}
-    ifOk={<Button variant="contained">Click to go to next step</Button>}
-    ifNotOk={
-      <Button variant="contained" disabled={true}>
-        Please complete step 2 to activate this button
-      </Button>
-    }
-  ></StepIfElse>
+      <StepIfElse
+
+  step={3}
+  ifOk={<NextMuiButton variant="contained" href=="/learn/final">Click to go to next step</NextMuiButton>}
+  ifNotOk={
+
+  <Button variant="contained" disabled={true}>
+    Please complete step 2 to activate this button
+  </Button>
+  }
+
+  > </StepIfElse>
 
 export default function MongoPage(props) {
   return <LearnLayout {...props} />;

src/pages/learn/mongo.mdx

@@ -1,3 +1,4 @@
+import { NextMuiButton } from "@vulcanjs/next-mui";
 import { Button } from "@mui/material";
 import { LearnLayout } from "~/components/vn/learn/LearnLayout";
 import { StepIfElse } from "~/components/vn/learn/Steps";
@@ -72,9 +73,9 @@ If this button is still disabled:
   <StepIfElse
     step={3}
     ifOk={
-      <Button variant="contained" href="/learn/about-models">
+      <NextMuiButton variant="contained" href="/learn/about-models">
         Click to go to next step
-      </Button>
+      </NextMuiButton>
     }
     ifNotOk={
       <Button variant="contained" disabled={true}>