fix base path

next.config.js

@@ -1,6 +1,9 @@
+const NEXT_BASE_PATH = process.env.NEXT_ASSET_PREFIX || "";
+
 module.exports = require("@next/mdx")({
   extension: /\.mdx?$/
 })({
   pageExtensions: ["ts", "tsx", "md", "mdx"],
-  assetPrefix: process.env.NEXT_ASSET_PREFIX || ""
+  assetPrefix: NEXT_BASE_PATH,
+  env: { NEXT_BASE_PATH }
 });

styles/MainTheme.tsx

@@ -11,6 +11,15 @@ import Head from "next/head";
 import Link from "next/link";
 import TopAppBar from "./TopAppBar";
 
+const isValidURL = (url: string) => {
+  try {
+    new URL(url);
+  } catch {
+    return false;
+  }
+  return true;
+};
+
 export const theme = createMuiTheme({
   palette: {
     primary: {
@@ -39,11 +48,17 @@ export const components = {
   h4: (props: {}) => <Typography component="h4" variant="h6" {...props} />,
   h5: (props: {}) => <Typography component="h5" variant="h6" {...props} />,
   h6: (props: {}) => <Typography variant="h6" {...props} />,
-  a: ({ href, ...props }: { href: string }) => (
-    <Link prefetch href={href}>
-      <MuiLink variant="body1" color="secondary" href={href} {...props} />
-    </Link>
-  )
+  a: ({ href, ...props }: { href: string }) => {
+    const url = isValidURL(href)
+      ? href
+      : `${process.env.NEXT_BASE_PATH}${href}`;
+
+    return (
+      <Link prefetch href={href} as={url}>
+        <MuiLink variant="body1" color="secondary" href={url} {...props} />
+      </Link>
+    );
+  }
 };
 
 const MainTheme: React.FC = ({ children }) => (

styles/TopAppBar.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { useRouter } from "next/router";
+import Link from "next/link";
 import AppBar from "@material-ui/core/AppBar";
 import Tabs from "@material-ui/core/Tabs";
 import Tab from "@material-ui/core/Tab";
@@ -24,7 +25,19 @@ const TopAppBar = () => {
         textColor="primary"
       >
         {routes.map(({ pathname, icon }) => (
-          <Tab key={pathname} value={pathname} icon={icon} />
+          <Tab
+            key={pathname}
+            value={pathname}
+            icon={icon}
+            component={props => (
+              <Link
+                href={pathname}
+                as={`${process.env.NEXT_BASE_PATH}${pathname}`}
+              >
+                <a {...props} />
+              </Link>
+            )}
+          />
         ))}
       </Tabs>
     </AppBar>